Featured collection
Overview
Use Featured collection to present products from one collection in a product rail or a responsive grid. It works well for best sellers, new arrivals, seasonal edits, and any curated group that should lead visitors into a collection.
Before you start
Create the collection in Shopify Admin, add the products you want to feature, and make sure those products are active and available on the Online Store sales channel.
Add the section
In the Shopify Theme Editor, open the template where the collection should appear. Select Add section, choose Featured collection, and place it in the page order.
ADD FEATURED COLLECTION
| Open a template | Go to Online Store > Themes > Customize, then choose the page template you want to edit. |
|---|---|
| Add the section | Select Add section and choose Featured collection. |
| Choose a source | Open Collection and select the collection whose products should appear. |
| Set the amount | Use Products to show to limit the visible selection from that collection. |
Choose the product layout
Choose Rail row when visitors should browse a single horizontal row. Choose Grid when the products should wrap into rows. Set the desktop and mobile column counts and adjust the matching column gaps to control density.
Mobile swipe turns the mobile product list into a touch-friendly horizontal rail. Rail row always uses the mobile rail behavior, even when the separate mobile swipe option is not needed.
PRODUCT GRID OPTIONS
| Layout style | Switch between Rail row and Grid. |
|---|---|
| Desktop items | Set the number of product cards across larger screens. |
| Mobile items | Set the mobile grid columns when mobile swipe is disabled. |
| Column gaps | Control product spacing independently for desktop and mobile. |
| Mobile swipe | Let mobile visitors move through cards horizontally. |
Add section content
The section accepts up to two content blocks above the products. Use Custom text for a subheading, heading, supporting copy, or button. Use Image with text links when the header needs a visual and a set of navigation links. Block order controls the order in which this header content is rendered.
Configure product cards
Keep Use global settings enabled when product cards should match the rest of the store. Disable it only when this section needs its own hover effect, title, price, vendor, variant options, badges, quick view, or content alignment.
Sticky overlap
Enable Sticky overlap to let this section visually overlap while scrolling. Mobile sticky overlap is a separate option. Choose an animation only after enabling sticky overlap. Keyboard navigation disables sticky behavior so keyboard users can move through the page without pinned content obstructing focus.
Layout, color, and spacing
SECTION OPTIONS
| Full width | Expand the section across its available page width. |
|---|---|
| Section layout | When Full width is off, choose Page, Content, Narrow, or Custom. |
| Color scheme | Apply one of the color schemes configured in Theme settings. |
| Section spacing | Set top and bottom spacing separately for desktop and mobile. |
Check the result
Preview desktop and mobile. Confirm the intended products appear, rail controls work when needed, product cards match the chosen settings, and the section does not create page-level horizontal scrolling.
Troubleshooting
If placeholders appear, select a collection. If an expected product is missing, check its collection membership, product status, sales-channel availability, and the Products to show limit. If local card changes have no effect, turn off Use global settings first.