Skip to main content

Featured collection

Help Center
Updated

Overview

The Featured collection section displays products from a selected collection as a grid or carousel (slider) across desktop/tablet/mobile. It also supports an optional banner image displayed alongside the product list on desktop, and below the product list on smaller screens.

Key highlights:

  • Select a collection + control how many products to show

  • Grid or carousel (desktop slider + tablet/mobile swipe)

  • Optional View all button (only when the collection contains more products than shown)

  • Supports Quick add, Quick view, Compare, Rating

  • Supports Color swatches (variant/custom)

  • Works in full width mode or within Section box layout

  • Banner image options: left/right on desktop, size/height controls, optional link, hide on mobile

Where to use this section

Use this section when you want to promote a collection on:

  • Homepage (Best sellers / New arrivals / Sale)

  • Campaign landing pages

  • Category highlight pages

  • Anywhere you want to add a curated product list

How to add this section

  1. In the Theme Editor, click Add section → Featured collection

  2. Select a Collection

  3. Configure:

    • Products to show

    • Grid/slider behavior

    • Product card options (vendor, rating, swatches, quick add, etc.)

  4. (Optional) Add a Banner image and adjust its layout settings

How it works (important behaviors)

1) “View all” only appears when there are more products

The section calculates more_in_collection:

  • If collection.all_products_count > products_to_show → more_in_collection = true

  • The View all button appears only when:

    • Show “View all” is enabled and

    • more_in_collection = true

2) Slider only activates when there are enough products

  • Mobile/Tablet swipe turns on when:

    • swipe_on_mobile = true

    • and products shown > columns_mobile (or > columns_tablet)

  • Desktop slider turns on when:

    • enable_desktop_slider = true

    • and products shown > columns_desktop (after banner-based column limiting)

3) Banner image limits desktop columns

When a Banner image is set, the section automatically caps columns_desktop to avoid a cramped layout:

  • image_size = small → max 5 columns

  • image_size = medium → max 4 columns

  • image_size = large → max 3 columns

If you set a higher value, it will be reduced automatically.

4) Appear animation may be disabled for top sections

allow_effect becomes false when section.index < 3 (typically the first few sections near the top of the page).

Section settings

Heading

  • Title (title)

  • Subtitle (subtitle)

  • Heading size (heading_size)

    • h2 / h1 / h0

Collection & product list

  • Collection (collection)

  • Products to show (products_to_show)

    • 2 → 36

  • Columns desktop (columns_desktop)

    • 1 → 6

    • Note: If a banner image is enabled, the desktop column count may be capped by image_size.

Layout

  • Full width (full_width)

    • Makes the section stretch wider depending on wrapper logic

  • Enable desktop slider (enable_desktop_slider)

    • Enables carousel on desktop (only when there are enough products)

  • Swipe on mobile (swipe_on_mobile)

    • Enables swipe on tablet/mobile (only when there are enough products)

  • Enable section box layout (enable_section_box_layout)

    • When enabled, the section renders inside a boxed wrapper (.section__box) within page width

    • When disabled, the color scheme applies directly to the section wrapper

  • Color scheme (color_scheme)

    • Applies to the section wrapper (and box wrapper if enabled)

“View all” button

  • Show “View all” (show_view_all)

    • Only shows when more_in_collection = true

    • Links to collection.url

Banner image (optional)

  • Image (image)

  • Image position (desktop) (image_position_desktop)

    • left / right

  • Image size (image_size)

    • small / medium / large
      (also affects layout width + desktop column cap)

  • Image height (desktop) (image_height)

    • adapt: uses the image aspect ratio

    • adapt_product_list: matches the product list height (theme CSS-dependent)

    • fixed heights: 42 / 56 / 72 (rem)

  • Image height (mobile) (image_height_mobile)

    • adapt or fixed 28 / 34 / 39 (rem)

  • Banner link (banner_link)

    • If set, the image becomes fully clickable (overlay link)

  • Hide banner on mobile (hide_banner_mobile)

    • Hides banner on small/medium breakpoints

Product cards

  • Image ratio (image_ratio)

    • adapt / square / portrait / landscape

  • Show secondary image (show_secondary_image)

  • Show vendor (show_vendor)

  • Show rating (show_rating)

  • Enable quick add (enable_quick_add)

  • Enable compare (enable_compare)

    • Works only if the global theme setting settings.enable_product_compare is also enabled

  • Enable quick view (enable_quick_view)

  • Show color swatches (show_color_swatches)

  • Color swatches style (color_swatches_style)

    • variant / custom (visible only when swatches are enabled)

  • Inherit card color scheme (inherit_card_color_scheme)

    • On: cards inherit the section’s color scheme

    • Off: use Card color scheme

  • Card color scheme (card_color_scheme)

    • Visible only when inherit_card_color_scheme = false

Responsive columns

  • Columns tablet (columns_tablet)

    • 2 / 3 / 4

  • Columns mobile (columns_mobile)

    • 1 / 2

Spacing

  • Padding top / bottom (padding_top, padding_bottom)

    • Mobile: uses 75% of the value (rounded)

    • Desktop: uses the full value

Limitations

  • If no collection is selected or the collection is empty:

    • The section renders placeholder product cards based on products_to_display.

  • Desktop slider will not activate unless products shown exceed the effective desktop column count (after banner limiting).

  • Compare / rating / quick add / quick view depend on:

    • Global theme settings and store setup (apps/metafields/assets).

  • image_height = adapt_product_list depends on theme CSS to visually match heights as expected.

Common use cases

  • Homepage “Best sellers” carousel

  • “New arrivals” grid on a landing page

  • Collection highlight with a banner (lookbook/storytelling layout)

  • Sale collection section + “View all” CTA

Tips for best results

  • If using a banner image:

    • Choose an appropriate image_size so the product grid doesn’t become too narrow

    • Use adapt_product_list when you want the banner to align with the product list height

  • For consistent UX across devices:

    • Enable enable_desktop_slider + swipe_on_mobile

  • If you want a clean boxed design:

    • Enable Section box layout and choose a matching color scheme

Common mistakes

  • Setting columns_desktop too high while using a banner image → the section auto-caps it, which may look like the setting “didn’t work”

  • Enabling View all but the collection does not exceed products_to_show → button won’t appear

  • Enabling swipe on mobile but product count is not greater than columns → no slider

  • Expecting ratings to appear without a review app/metafields configured → rating area stays empty

Need help?

If you can’t find what you need in the documentation:

Submit a support request here:
https://boostheme.zendesk.com/hc/en-us/requests/new

Include your theme version and the page URL so we can help faster.

 
 

Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk