Product carousel
A row of product cards you can scroll sideways, or lay out as a static grid.
What it’s for. Putting a handful of products in front of people on the homepage or a landing page — new singles, sealed restocks, staff picks. Cards carry the usual TCG extras: condition and finish swatches, a quantity stepper, quick add, and the playset button on singles with enough stock.
When to use it. Reach for the carousel when you want to tease more products than fit on screen and let people swipe through — “New arrivals,” “Trending singles.” Switch to grid when you’d rather show everything at once with nothing hidden off the edge.
Ways to use it
- New arrivals carousel — point it at your new-release collection, leave the View all button on so people can jump to the full list.
- Staff picks — set the source to hand-picked products and choose the exact cards you want featured.
- Sealed restock grid — switch layout to grid, drop the swatches, keep quick add for fast carting.
Tips
- Two sources: a collection (respects your products-to-show limit) or hand-picked products (shows everything you pick, up to 12 — the limit slider is ignored here).
- Autoplay only runs in carousel mode and pauses when someone hovers or tabs into it. It’s off by default; leave it off if you’d rather people scroll at their own pace.
- The prev/next arrows only show in carousel mode, and they’re hidden on phones — people just swipe there.
- Desktop columns drop by one on tablet; mobile uses its own column count (default 1).
- The View all button only appears with a collection source, and only if you haven’t set your own button text and link.
Settings
| Setting | Type | What it does |
|---|---|---|
| Heading | Text | Default: Featured products |
| Subheading | Multi-line text | — |
Products
| Setting | Type | What it does |
|---|---|---|
| Product source | Dropdown | From collection, Manual selection |
| Collection | Collection | — |
| Products to show | Slider | Default: 8 |
| Products | Products | — |
| Show ‘View all’ link | On / off | Default: true |
Layout
| Setting | Type | What it does |
|---|---|---|
| Layout style | Dropdown | Carousel, Grid |
| Columns (desktop) | Slider | Default: 4 |
| Columns (mobile) | Slider | Default: 1 |
Carousel
| Setting | Type | What it does |
|---|---|---|
| Show navigation arrows | On / off | Default: true |
| Enable autoplay | On / off | Default: false |
| Autoplay speed | Slider | Default: 4 |
Product card
| Setting | Type | What it does |
|---|---|---|
| Show second image on hover | On / off | Default: true |
| Show vendor | On / off | Default: false |
| Show condition/finish swatches | On / off | Default: true |
| Show quick add button | On / off | Default: true |
| Show playset button | On / off | Default: true |
| Mobile card style | Dropdown | Always visible, Tap to expand, Expand button, Compact row |
Button
| Setting | Type | What it does |
|---|---|---|
| Button text | Text | — |
| Button link | Link | — |
Spacing
| Setting | Type | What it does |
|---|---|---|
| Top padding | Slider | Default: 40 |
| Bottom padding | Slider | Default: 40 |
Was this page helpful?
Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.