The Featured collection slider section displays products from multiple collections as a rotatable carousels. With Quick View enabled, customers can buy your products without leaving the page.
See the Featured collection grid to display your collections in multiple rows with adjustable columns.
Set up section
Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
Under Template, click (+) Add section and select Featured collection slider.
Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.
Select featured collection
Select multiple Collections to display their products in a single row that customers can click through. You can also create a Manual product list instead of a collection.
STEPS
In your theme editor (Customize):
Under the section, click on a Collection block to open the settings.
Click (+) Add block to create new row items.
Click Remove block or the eye icon to delete or hide a block.
Use the Select collection button find the collection you want to feature.
We recommend collections with at least 3 products.
Enter the Collection name that displays as a link that customers can click to switch between collections in the section.
For the Manual product list block, use the Select products button and check off all the products you want to display.
Click Save.
Change product list layout
Change the number of columns and rows, the shape of your product images, and set how many products to display from your collection.
STEPS
In your theme editor (Customize):
Click on the Featured collection slider and scroll down to the Product list settings.
Use the slider to set the Maximum number of products to display from your collection. Between 3 and 15.
The products will display in the sort order as set in your Shopify admin settings. Learn more about admin settings for your collection pages layout ↗.
Select the Number of columns to display for both desktop and mobile.
The size of the product images will change according to the number of columns.
Click on the Theme settings tab to select an Image aspect ratio. This setting applies to all sections that display products.
Crop all images to Square, Landscape, or Portrait. The default Natural setting will display the original orientation of each image.
Click Save.
Section content
Add section headings and an optional button that can link to your collection or another page.
STEPS
In your theme editor (Customize):
Click on the Featured collection slider section to open the section settings.
Enter Heading text to display a section title in the top-left.
The default heading is "Featured collection."
Enter Subheading text to display below the heading.
Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.
Select or paste a URL for the Button Link.
Enter short text for the Button label.
Leave this field blank to remove the button.
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"
Click Save.
Section style
Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.
STEPS
In your theme editor (Customize):
Click on the Featured collection slider section to open the settings.
Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.
Select a collection to display its products. Collections are created and edited in your Shopify admin.
Show view all link
Display a "View all" card at the end of the list to link to your product collection.
Collection name
Change the link label that customers can click to switch between collections in the section.
Maximum number of products
Set the maximum number of products to display within in the section: between 3 and 15.
Number of columns on desktop
Choose how many products to show per row on desktop screens: either 3, 4, or 5 columns.
Number of columns on mobile
Choose how many collections to show per row on mobile screens: either 1 or 2 columns.
Heading
Enter text to display a section title above the collection list.
Subheading
Enter text to display a section subheading below the heading.
Button link
Select or paste a URL for the button.
Button label
Enter text to display a button label. Leave this field blank to remove the button.
Enable animation
Choose whether to display visual effects when scrolling, hovering, or interacting with the section.
See the Animation guide to learn more.
Top divider
Show a solid border above the section to visually separate it from other sections.
The Top divider uses the Lines and borders color selected in the theme color settings.
Padding
Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.