Appearance

Collection carousel ​

This guide describes setting up the Collection carousel section.

Use the section on a page to display products from a collection, arranged in a carousel layout.

​The previous video shows a Collection carousel section on a store's home page. In the upper left, part of Theme editor's section menu is displayed. The menu's Show "view all" link option is set to on ("checked"). With this checkbox option enabled, in the top right, the section shows a View all link. Store visitor follow the link to access the collection page for the collection that's displayed inside the section.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

To set up a Collection carousel section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains a Collection carousel section.

    Note

    The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Collection carousel. Refer to Shopify help: Add a section.

  2. From the side menu, select Collection carousel.

    The Collection carousel section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
HeadingIn the Heading box, enter text to display as title text inside the section.
Heading > Connect dynamic sourceTo display heading text from a dynamic source, if available, select the Connect dynamic source icon beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields.
CollectionUse the following Collection selector options to set up a collection inside the section.
  • To add a collection, choose Select collection, enter the name of a collection into the Search box or select a collection from the list. Then, choose Select.
  • To create a new collection, select Create collection to access the Create collection page in Shopify admin. Refer to Shopify help: Collections.
  • To replace a collection, choose Change > Change collection. Enter the name of a collection into the Search box and/or select a collection from the list. Then, choose Select.
  • To remove a collection, select Change > Remove collection.
Product tile typeSelect the Product tile type radio buttons to specify the type of product tile to display inside the section. The options are Standard or Text overlay. With Standard product tiles, product details, like product title and price, are displayed below the section's product images. With Text overlay product tiles, product details overlay the section's product images.
Product limitAdjust the Product limit slider to specify the maximum number of products from a collection to display inside the section. The minimum number is 5 and the maximum is 20.
Show "View all" linkSelect the Show "view all" link checkbox to show/hide a link inside the section for accessing an entire collection.
Product tiles > Image cropUse the Image crop options to set a cropping shape for the section's (product tile) images. The options are None, Square, Landscape, and Portrait.
Product tiles > Mobile widthUse the Mobile width setting to specify a width for the section's product tiles on mobile display devices. The options are 60%, 80%, and 100% (percentage the width of the section).
Product tiles > Desktop widthAdjust the Desktop width slider to specify a width for the section's product tiles on desktop display devices. The slider ranges from 20% to 40% (percentage the width of the section).
Quick buy > Enable quick buySelect the Enable quick buy checkbox to show/hide a "Choose options" button on product tiles inside the section. A store visitor uses the button to choose product options, like variants, to add to their cart. To use this option, set the Product tile type to Standard.
Quick buy > Button styleUse the Button style setting to specify a button style for the section's quick buy buttons. Apply your store's Primary or Secondary button style to the section's buttons. To use this option, set the Product tile type to Standard, and then check the Enable quick buy option (set to on).
Color > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Color > Theme settings (link)Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove sectionSelect Remove section to delete the section from the current page.