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.
Set up a Collection carousel section
To set up a Collection carousel section:
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.
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.
From the side menu, select Collection carousel.
Select a setting described in the following table.
|In the Heading box, enter text to display as title text inside the section.
|Heading > Connect dynamic source
|To 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.
|Use the following Collection selector options to set up a collection inside the section.
|Product tile type
|Select 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.
|Adjust 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
|Show 'View all' link
|Select the Show 'view all' link checkbox to show/hide a link inside the section for accessing an entire collection.
|Product tiles > Image crop
|Use 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 width
|Use the Mobile width setting to specify a width for the section's product tiles on mobile display devices. The options are
100% (percentage the width of the section).
|Product tiles > Desktop width
|Adjust the Desktop width slider to specify a width for the section's product tiles on desktop display devices. The slider ranges from
40% (percentage the width of the section).
|Quick buy > Enable quick buy
|Select 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 style
|Use 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
|Color > Color scheme
|Use 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.
|If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
|Select 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.
|Select Remove section to delete the section from the current page.