Collection list – Boostheme Help Center

Overview

The Collection list section lets you showcase multiple collections in a grid or slider layout. Each collection is added as a block, so you can fully control which collections appear, their order, and optional overrides like custom image/title.

This section is commonly used on the homepage to help customers browse categories quickly.

Where to use this section

Use this section when you want:

A category / collection navigation area on the homepage
A visual “Shop by category” section
A curated list of featured collections
A collection carousel for mobile + desktop browsing

Common placements:

Home page
Landing pages
Collection hub page

How it works

Blocks-based

Each collection card is a block (featured_collection).
You can add up to 20 blocks.

Each block supports:

Collection picker
Optional custom image
Optional custom title

If a collection has no featured image and no custom image, the card falls back to a placeholder.

Layout behavior

Grid vs Slider

The section automatically switches to slider mode when enabled and when there are more blocks than visible columns:

Mobile slider: enabled when swipe_on_mobile is on AND blocks > columns_mobile
Tablet slider: enabled when swipe_on_mobile is on AND blocks > columns_tablet
Desktop slider: enabled when enable_desktop_slider is on AND blocks > columns_desktop

If the slider is enabled, the section uses slider-component and can show slider controls.

Collection card styles

Image ratio

You can control collection image shape with Image ratio:

Adapt
Square
Portrait
Landscape
Circle (forces border-radius 50%)

Title sizing

The section automatically uses smaller title styles when there are many columns:

Smaller on mobile when columns_mobile > 1
Smaller on tablet when columns_tablet > 2
Smaller on desktop when columns_desktop > 4

View all button

If enabled, a View all collections button appears in the section heading.

It only shows when:

show_view_all is enabled
AND block count is smaller than the total number of store collections (collections.size)

The button links to the collections index (routes.collections_url).

Performance option: Preload first item

Setting Preload will preload the first collection card image (first block only).
This can help improve perceived loading speed when the section is near the top of the page.

Section settings

Content

Title
Subtitle
Heading size

Layout

Columns (desktop)
Columns (tablet)
Columns (mobile)
Swipe on mobile (enables mobile/tablet slider behavior)
Enable desktop slider
Full width
Enable section box layout

Card options

Image ratio (including circle)
Show title
Show products count
Preload

Styling

Color scheme
Padding top / bottom (responsive)

Blocks

Featured collection block

Each block includes:

Collection
Custom image (optional override)
Custom title (optional override)

Use custom image/title when:

You want a different banner image than the collection featured image
You want a shorter or more marketing-friendly title

Limitations

Max blocks: 20
Product count display depends on collection data (and may be hidden if disabled)
“View all” button only appears if your store has more collections than the section blocks
Slider appears only when conditions match (see Layout behavior)

Tips

Use Circle ratio for brand-style category icons.
Keep columns_mobile = 1 + enable swipe for a clean mobile carousel.
Enable Preload only if this section is near the top of the page.
Use custom image/title for seasonal campaigns (e.g. “Spring Sale”, “Gift Ideas”).

Common mistakes

Enabling desktop slider but not adding enough blocks (no slider will appear).
Using too many columns + long titles (titles will shrink automatically, but can still wrap).
Expecting “View all” button when your store has fewer collections than block count.