The Featured collections section allows you to showcase multiple product collections in a tabbed layout, helping customers easily browse and discover products from different collections without leaving the page.
You can customize the collection tabs, product grid layout, product card appearance, and section heading to create an engaging shopping experience.
This section is ideal for highlighting new arrivals, best-selling products, seasonal collections, or promotional collections.
Click the Featured collections section name to see its settings on the right-hand sidebar.
Use these settings to customize how collection tabs are displayed and positioned.
Tab style: Choose how the collection tabs are displayed:
Inline: Display collection tabs as text-based navigation.
Button: Display collection tabs as buttons.
Tab position: Choose the alignment of the collection tabs: Left, Center, or Right. Center is the default layout on mobile devices.
Use these settings to display a link that directs customers to the selected collection.
Show view all: Enable this option to display a View all link.
Label: Enter the text displayed for the link, such as View all.
Uppercase: Enable this option to display the link text in uppercase letters.
Customize the heading displayed above the collection tabs.
Heading: Enter the section heading, such as Featured collections.
Heading size: Select the heading size.
Heading tag: Choose the HTML heading tag, such as H1, H2, or H3. This setting affects the page's heading structure and SEO.
Heading align: Choose the heading alignment: Left, Center, or Right. Center is the default layout on mobile devices.
Use these settings to control the number of products displayed and the product grid layout.
Maximum products to show: Set the maximum number of products displayed from each collection.
Number of columns on desktop: Choose how many product columns are displayed on desktop devices.
Carousel on desktop: Enable this option to display products in a carousel layout on desktop devices.
Carousel inside: Enable this option to use the inside carousel layout.
Carousel on mobile: Enable this option to display products in a carousel layout on mobile devices.
Mobile slide width: Adjust the width of each product slide on mobile devices. Set a value below 100% to reveal a preview of the next slide.
Customize the appearance of the product cards displayed in each collection.
Image ratio: Select the aspect ratio of product images, such as Adapt to image.
Vendor: Enable this option to display the product vendor.
Highlights: Enable this option to display product highlights.
Style: Choose between Standard and Card to customize the product card layout.
Use these settings to customize the overall appearance of the section.
Reveal on scroll: Enable this option to show an animation when the section becomes visible as customers scroll down the page.
Make section full width: Enable this option to display the section across the full width of the page.
Color scheme: Select the color scheme applied to the section. Click Edit scheme to customize the selected color scheme in the theme settings.
Click Add block under the Featured collections section and select Collection.
Each Collection block represents a separate tab in the section. Customers can switch between tabs to view products from different collections.
For example, you can add three Collection blocks for New Arrivals, Hot, and Sale Off.
Use these settings to select the collection and customize its tab appearance.
Collection: Select the Shopify collection whose products you want to display.
Tab label: Enter a custom name for the collection tab. If left blank, the collection title will be used.
Link: Add a custom destination link for the collection. If left blank, the collection URL will be used.
Show image: Enable this option to display an image alongside the collection tab label.
Image: Select the image displayed in the collection tab when Show image is enabled. By default, the collection image is used. A 100 × 100px JPG image is recommended, and the image will be scaled down to 100 × 100px.
Inside each Collection block, you can find a Product card block.
The Product card block allows you to add and organize additional content within the product cards displayed in that collection.
Click Add block inside the Product card block to add available content elements.
The Text block allows you to display additional text inside each product card.
For example, you can use it to display a product metafield or additional product information below the product price.
The available options include:
Text: Enter the text you want to display. You can also connect a dynamic source, such as a product metafield, to display product-specific information.
Color: Choose between Primary and Secondary text colors.
Text size: Select the size of the text.
Hide on mobile: Enable this option to hide the text on mobile devices.
For example, you can connect the Text field to the product title to display an additional product name below the price.