Featured collection
Product cards from one collection as a grid or swipeable carousel, with hover image, sale and sold-out badges, and a quick add button.
- Category
- Product and collection discovery
- Use on
- Home, Product, Collection, Landing pages
- Reads
- Products from a collection
- Size
- 38 KB, small script included
- License
- MIT, free for client work
In short
Featured collection is a free Shopify section that shows up to 24 products from a collection as a grid or a swipeable carousel. Cards show a second image on hover, compare-at prices with a sale badge, a sold-out badge and a quick add button for products without options, and it works in Online Store 2.0 themes without an app.
When to use it
- Home page "New in" or "Bestsellers" row under the hero
- "Complete the set" carousel on a product page, pointing to a matching collection
- Seasonal or gift landing page showing the products of one curated collection
In the theme editor
- Heading, heading tag and size, text, and a "View all" link to the collection with its own style
- Collection and number of products to show (2–24)
- Grid or carousel with previous/next buttons; 2–6 columns on desktop, 1 or 2 on mobile; card spacing
- Image shape (square, portrait, tall, landscape), second image on hover, plain or card style, corner radius
- Vendor on or off; sale and sold-out badge wording
- Quick add button with your own labels for "Quick add" and "Choose options"
- Background color or gradient, text, accent, text on accent and card colors
- Top and bottom padding per device, show on desktop/mobile only, anchor ID
Files
sections/lib-featured-collection.liquidView the code
snippets/lib-image.liquidView the code
snippets/lib-button.liquidView the code
Written in plain Liquid, CSS and, where needed, a small script. No app, no dependencies.
How to add it to your theme
- Copy the section file into your theme’s sections folder, and any snippet it lists into snippets.
- In the theme editor, choose Add section and pick the one that starts with “Lib ·”.
- Replace the sample text with your store’s own, and set the colors to match your brand.
Questions
- How does the quick add button work?
- For a product with no options it is a standard Shopify product form that posts the product's variant and a quantity of 1 to /cart/add, so it works without JavaScript and Shopify then shows the cart page. It does not open your theme's cart drawer. Products with options show a "Choose options" link to the product page instead, and a sold-out product without options shows a disabled button with your sold-out wording.
- Does the carousel need JavaScript?
- No. The row is a CSS scroll-snap strip that scrolls by touch, trackpad and keyboard on its own. A small custom element adds previous and next buttons from 750px up, shown only when the row has more products than fit; on phones the row is swiped and the next card peeks in.
- Where does the hover image come from?
- From the product's second media item. It fades in on devices that can hover and when a card has keyboard focus. Products with a single image simply keep their first image, and the fade is switched off for visitors who prefer reduced motion.
- What happens if no collection is selected?
- In the theme editor the section shows placeholder cards with sample text, as many as "Products to show". On the live store the section is not rendered until a collection with products is selected.
- How many products and columns can it show?
- From 2 to 24 products. Desktop shows 2 to 6 columns, tablets up to 3, and phones 1 or 2 per row, in both the grid and the carousel.
- Will the product images slow the page down?
- Images load lazily, except the first row when the section is one of the first two on the page. Every card reserves its space with a fixed image shape, so nothing shifts while images load.
Before you publish
- The text in the demos is sample content. Replace it with facts about your own store before you publish.
- Animations are switched off for visitors who ask for reduced motion.
- Every file is checked with Shopify Theme Check before it is published here.
Need it adapted to your theme, or a section that isn’t here? See Shopify theme development.
More sections
Product and collection discovery
Collection cards
Up to eight collection cards with image, title, label and product count. Text over the image or below it, 2 to 5 columns, or a swipeable row on mobile.
Product and collection discovery
Shop the look
A lifestyle image with up to six product hotspots. Tapping a dot opens a small product card, and a product list beside the image shows the same items.
Hero and banners
Hero banner
A full-bleed image banner with eyebrow, heading, text and two buttons over it, a separate mobile image, overlay, nine content positions and height per device.
