Featured collection

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Featured collection section empowers you to spotlight a specific group of products for maximum impact. You can feature curated sets like best sellers or new arrivals, choosing exactly how and where they display. With its blend of layout flexibility and engaging presentation, this section ensures your products are both attention-grabbing and easy to browse on any device.

⚠️ Important:Featured collection gives you full control over both layout and interactivity, delivering a visually compelling and highly usable experience for shoppers.

Key components and functionality

Section introduction

The Featured collection section lets you feature a collection of products and configure the overall display style, product quantity, and arrangement. You can use grid or slider formats and fine-tune appearances for desktop, tablet, and mobile screens, ensuring optimal engagement wherever your customers view your store.

Collection selection

Select the collection you want to highlight within the section. This determines which products will be displayed for shoppers.

Number of items

Control how many products appear from your selected collection. This helps you manage visual clutter and direct attention to your most important items.

1. Choose to display between 0 and 50 products.

2. When set to 0, the section will show all products from the selected collection.

3. Default: 0

Layout settings

Layout settings control the grid or slider arrangement and the number of columns for each device type. This ensures a consistently appealing and user-friendly experience across desktops, tablets, and phones.

Desktop column count

Configure how many columns your products are shown in on desktop displays.

1. Select any value from 1 to 12 columns.

2. Default: 4

Tablet column count

Determine the number of product columns for tablet devices.

1. Choose between 0 (inherits desktop columns) and 8 columns.

2. Default: 0

Mobile column count

Set the column count for shoppers on mobile devices.

1. Values range from 1 to 4 columns.

2. Default: 2

Desktop layout

Choose the display mode for desktop users.

1. grid – shows all products in a multi-column format.

2. slider – enables horizontal scrolling of items.

Tablet layout

Set the presentation for tablet visitors.

1. grid – uses columns for clarity and organization.

2. slider – enables swipe navigation for an interactive experience.

Mobile layout

Customize the look for mobile shoppers.

1. grid – presents products in vertical columns for easy browsing.

2. slider – allows touch-driven browsing, perfect for small screens.

Slideshow settings

Slideshow settings become active when you use a slider layout. These options let you animate transitions, set up autoplay, and define how navigation or pagination is shown for a dynamic product experience.

Animation style

Select the visual transition style between product slides.

1. default – sliding animation.

2. fade – fading animation.

3. Default: default

Animation speed

Adjust how quickly slides animate.

1. Select timings from 0.1 to 5 seconds.

2. Default: 0.8 seconds

Autoplay delay

Set the amount of time a slide remains before switching when autoplay is active.

1. Choose from 0 to 10 seconds.

2. Default: 4 seconds

Autoplay slideshow

Enable or disable automatic cycling through slides.

1. On/off setting.

2. Default: false

Loop slides

Choose to repeat slides in a continuous carousel if desired.

1. On/off setting.

2. Default: false

Navigation position (vertical)

Control where navigation arrows are displayed for greater usability.

1. above – places these controls above the main content.

2. below – positions controls beneath the content.

3. Default: above

Pagination style

Customize how slide progress is indicated to users.

1. dynamic – adapts based on user interaction.

2. fraction – shows the “slide X of Y” count.

3. progress bar – displays a moving progress bar.

4. scrollbar – uses a classic scroll indicator.

Show navigation

Show or hide arrows for manual slide navigation.

1. On/off toggle.

2. Default: true

Show pagination

Choose whether users see pagination indicators to help orient them within the slider.

1. On/off toggle.

Show preview of next slides

Reveal a preview of the next slide, encouraging users to continue scrolling.

1. On/off toggle.

2. Default: true

Supported block types

All customization and product selection is handled directly through the section settings in Featured collection. There are no block types available in this section.

Usage notes

Featured collection provides robust layout and styling options for a highly flexible, accessible, and responsive product showcase. Adjust product counts and columns according to your goals—whether for minimal, focused features or larger, more dynamic presentations. Use autoplay and slide animations sparingly to preserve usability, especially for shoppers using assistive technologies. Navigation and pagination controls should always be visible, clear, and functional for smooth browsing across every screen size.

💡 Tip: Preview your Featured collection section on various devices to ensure a consistent and user-friendly experience. Use high-quality images and review every interactive element for accessibility and performance.