Featured collection

Featured links

1. Company XYZ documentation on layout settings
2. Company XYZ documentation on slideshow controls settings
3. Company XYZ documentation on headers settings
4. Company XYZ documentation on product cards settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings
10. Shopify documentation on customizing sections

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to display products from one collection in a grid or slideshow, with separate layout control for desktop, tablet, and mobile. It is a strong fit for homepage product rows, curated category highlights, and promotional collection features.

Core settings

Start by selecting the collection you want to show, then choose how many products to include. Setting the item count to 0 displays all available items from that collection up to the section limit, which is useful for smaller collections but can make the section feel busy if card content is detailed.

For setup details in the theme editor, see Shopify documentation on customizing sections

If you want a tighter, more curated presentation, use a smaller item count and let the section act as a preview. When product order matters, make sure the collection itself is arranged the way you want before using it here.

This section displays products from a collection, not a hand-picked list. If you need precise manual product selection, use a section built for featured products instead.

Layout settings

Layout settings control how many product cards appear and whether they display as a grid or slideshow on each device size. This makes it easy to create a wide comparison-friendly layout on larger screens and a more compact browsing experience on smaller ones.

Tablet can inherit the desktop column count when left at 0, which is useful when both views should stay aligned. If you switch a device to slideshow mode, review how many cards remain visible at once so text, pricing, and product imagery still feel easy to scan.

A common setup is a multi-column grid on desktop and tablet with a slideshow on mobile. If your product cards include more text or variant options, grid layouts often feel clearer than tighter carousels.

Slideshow settings

Slideshow settings apply whenever the section uses slideshow mode on any device. Use them to control animation style, speed, autoplay, navigation, pagination, looping, and whether part of the next slide is visible.

Fade animation is the main decision point because it forces a single-slide view. That makes it better for spotlighting one product at a time than for letting customers compare several products in the same row.

Tip

Use the default animation when you want to show multiple cards in a swipeable row. Use fade when you want a more focused, one-product-at-a-time presentation.

Autoplay can work well for simple, highly visual product rows, but it is less effective when customers need time to compare product details. Previewing the next slide can help signal that more products are available, though it reduces the space given to the current card.

Color settings

These settings override the section header colors for the icon, main text, and subheading. They are most useful when this section sits on a custom background or needs stronger visual separation from surrounding content.

Keep header colors simple if the products themselves should remain the focus. If you also use a bold background or promotional card style, too many color changes at once can make the section feel visually crowded.

Standard section settings

Header settings

Header settings control the introductory content above the collection, including alignment, icon, caption, heading, supporting text, and an optional button. In this section, the header is useful for framing the collection with a category label, campaign message, or a link to browse more.

Use the button for a clear next step such as viewing the full collection. Keep the label specific, and double-check mobile button position and width if the section already has a lot happening visually.

Card settings

Card settings let you override the default product card presentation just for this section. You can adjust card style, image ratio, text treatment, call-to-action style, text alignment, and optional variant-selector behavior.

These overrides are helpful when this collection feature needs a different purpose from your standard product listings. For example, a banner-style card can feel more promotional, while a simpler style may be better for quick scanning and comparison.

Note

Some card options work best together. For example, middle vertical text alignment only applies to banner-style cards, and mobile uses an icon-only product action for the card button style setting.

Padding settings

Padding settings control the space above and below the section on desktop and mobile. In a collection row, spacing affects whether the section feels like a standalone feature or part of a denser browsing flow.

Use tighter padding when this section sits between other product-driven sections. Increase spacing when you want the collection to feel more editorial or visually separated.

Section background settings

Section background settings let you add a background color, gradient, image, or video behind the section. This can turn a simple product row into a stronger promotional feature, especially when paired with a header.

If you use image or video backgrounds, make sure product cards and text remain easy to read. Overlays are especially helpful when the background has strong contrast or a lot of detail.

Caution

Strong backgrounds can compete with product imagery. If shoppers have to work harder to scan the products, simplify the background or reduce its intensity.

Separator settings

Separator settings add an optional line above or below the section. They are useful when you want a subtle boundary between this collection feature and nearby content.

Use separators sparingly if the section already has a strong background or distinct card styling. A simple divider is usually enough to improve structure without adding visual noise.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is helpful when your mobile merchandising approach needs to differ significantly from your desktop layout.

Use this for deliberate alternate layouts rather than small visual tweaks. If the content is essentially the same on both versions, it is usually easier to maintain one well-tuned responsive section.

Width settings

Width settings control the maximum content width and the outer section width. In this section, width changes affect card density, slideshow breathing room, and how prominent the collection feels on larger screens.

Wider layouts can support more columns or larger product cards, while narrower layouts can make a curated collection feel more focused. If you use a full-width or full-bleed section background, preview the result on the live storefront because editor framing can make width changes feel misleading.

Usage notes

1. Match the layout to the goal. Use a grid for easy product comparison and a slideshow for a more compact or editorial presentation.
2. Limit product count when needed. A smaller selection usually creates a clearer featured row than showing every available item.
3. Use card overrides with purpose. Override card styling only when this collection needs to feel meaningfully different from your default product listings.
4. Treat fade as a spotlight mode. Fade works best when you want shoppers to focus on one product card at a time rather than browse several at once.
5. Check each device size. Review column counts, slideshow behavior, and header button placement together so the section feels balanced across desktop, tablet, and mobile.
6. Review media and color choices together. Separate desktop and mobile media, explicit color overrides, and background media can change cropping, readability, and fallback styling, so test the section on both viewport sizes.
7. Keep navigation content intentional. If the header or related controls move shoppers into menus, drawers, or nested links, make sure reordered or hidden items do not block the path you expect customers to follow.
8. Test commerce actions in context. Product selection, variant choice, quantity, and availability can change what customers can do from the card, so verify the result with the products you plan to feature.