Showcase carousel
Showcase carousel presents a collection as a living product stage: one featured product with a large photo and details, plus a track of cards for the rest. Shoppers tap a card to bring that product forward.
What it does
Section titled “What it does”Use it to make a small collection feel like an exhibition — new arrivals, bestsellers, one curated line. Everything on stage is real product data: the photo, name, price, and the Shop now button all follow whichever product is featured.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Showcase carousel.
- Pick a Collection (2–8 products show).
- Save.
Choose a style
Section titled “Choose a style”The Layout setting switches between two arrangements:
| Style | Look |
|---|---|
| Detail queue (default) | The featured product’s large photo on one side; on the other, a big card for the featured product and a track of small cards. The featured product steps aside from the track, so the next card is always “up next” |
| Featured center | Three cards fill the row and the middle one sits enlarged; shoppers scroll the track and the centered card becomes the featured one |
Both share: Image position (photo left or right), a soft tint band around the section, optional auto-rotation, and a Shop now button on the photo that follows the featured product.
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and pick a Collection.
- Keep the Detail queue layout and Cream tint.
- Set Large image source to match your product photography (see below).
- Save and tap through the cards in the preview.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Heading | “Popular picks” | Text | Section title; leave empty for no title |
| Collection | Empty | Collection picker | Where the products come from (2–8 show) |
| Number of products to show | 6 | 2–8, step 1 | How many products take part |
| Layout | Detail queue | Detail queue / Featured center | The two arrangements described above |
| Image position | Left | Left / Right | Which side the large photo sits on |
| Image ratio | Landscape (4:3) | Landscape (4:3) / Portrait (4:5) / Portrait (3:4) / Square (1:1) / Wide (16:9) | The large photo fills the full row height on desktop; this ratio shapes its stacked phone version |
| Large image source | 3rd photo (lifestyle) | 1st photo – 5th photo | Which gallery photo stars as the large image. Cards use the 1st photo (2nd on hover), so the 3rd is the lifestyle spot. Products with fewer photos fall back to an earlier one |
| Section background tint | Cream | None (white) / Cream / Lilac / Mint / Apricot | Soft color band around the section |
| Band padding | 0 | 0–48 px, step 4 | Space around the row inside the band. 0 keeps the photo flush to the band’s edges |
| Auto-rotate products | Off | On / Off | Steps to the next product automatically. Pauses on hover, on focus, and while off-screen; never rotates when the visitor prefers reduced motion |
| Rotate every | 5 s | 3–10 s, step 1 | How long each product stays featured |
| Show product description | On | On / Off | A two-line description under the featured product’s info |
Images and content tips
Section titled “Images and content tips”- Think in photo slots. The card shows photo 1 (photo 2 on hover), and the big image defaults to photo 3 — the “lifestyle spot”. Shoot accordingly: 1–2 clean product shots, then a lifestyle scene.
- Large image: a landscape photo works best by default (the desktop photo stretches to the row height). Portrait products look great with Portrait (4:5) and Image position Left.
- Products with fewer photos fall back gracefully — a product with two photos simply uses its last photo on stage.
Good to know
Section titled “Good to know”- First tap selects, second tap opens. Tapping a side card features that product; tapping the featured product opens its page. The Shop now button goes straight there too.
- Rotation is polite. Auto-rotate pauses when the shopper hovers or focuses the section, stops entirely off-screen, and stays still for reduced-motion visitors.
- The photo count is photos only. Videos and 3D models in the product’s media don’t take a photo slot — a product with one video and three photos has three photos to choose from.
- On phones everything stacks: photo on top, cards below; the ratio setting shapes the photo.
Example setups
Section titled “Example setups”New arrivals stage. Detail queue, 6 products, Large image source “3rd photo (lifestyle)”, Cream tint, auto-rotate on at 6 s, description on.
Quiet curated trio. Featured center, 3 products, auto-rotate off, Lilac tint, Band padding 16 px — shoppers browse the centered cards at their own pace.
Common questions
Section titled “Common questions”The big photo isn’t the one I expected. The stage uses the photo number set in Large image source, counting the product’s photos only (no videos). Set photo 3 of each product to its best scene — or change the setting to match your photography.
Tapping a card opens the product instead of featuring it. The first tap features a side card; the already-featured card opens the product on tap. That’s the intended two-step.
Auto-rotate won’t start. Check Auto-rotate products is on, and remember it pauses while hovered/focused and for visitors who prefer reduced motion — use a preview without touching the section.
A product with few photos looks odd on stage. It falls back to its last available photo — give such products at least the photos up to your Large image source setting.