About this section
A 3D fan of product cards that customers can drag or browse with the arrow keys, with the front card's product, price and button below.
How to add itCustomize → Add section
Where it can goAny page
Settings15 · 1 block type
Good to know: Choose a product for each card and the title, image, price and link fill themselves in.
Settings
| Setting | Type | What it does |
|---|---|---|
| Color scheme | Color scheme | One of the colour schemes from Theme settings → Colors. |
| Height | Slider | From 40 to 88 rem, 64 rem to start. |
| Heading size | Choice | Choose Medium, Large, Extra large. Medium to start. |
| Show price on the card | On / off | Only for cards filled from a product. On by default. |
| Use outline button style | On / off | Off by default. |
The ring
| Setting | Type | What it does |
|---|---|---|
| Card spacing | Slider | Reduced automatically on narrow screens so the ring always fits. From 120 to 320 px, 200 px to start. |
| Card rotation | Slider | 0 lays the ring flat into a plain row. From 0 to 60 °, 38 ° to start. |
| Depth falloff | Slider | How far each step back from the center recedes. From 0 to 240 px, 130 px to start. |
| Let shoppers drag the ring | On / off | On by default. |
| Drag hint | Text | Shown in the corner on desktop. Leave empty to hide it. |
Slideshow
| Setting | Type | What it does |
|---|---|---|
| Turn the ring automatically | On / off | Pauses on hover, on drag, on keyboard focus, while the section is off screen, and whenever the shopper presses pause. On by default. |
| Turn every | Slider | From 3 to 12 s, 5 s to start. |
| Carousel description | Text | Read out by screen readers to describe what this hero is for. |
Padding
| Setting | Type | What it does |
|---|---|---|
| Top | Slider | From 0 to 100 px, 0 px to start. |
| Bottom | Slider | From 0 to 100 px, 0 px to start. |
Blocks
Blocks are added inside the section with Add block, and can be reordered by dragging.
Card
| Setting | Type | What it does |
|---|---|---|
| Product | Product | Fills the image, title, price and link on its own. Everything below overrides it. Choose a product. |
| Image | Image | Portrait crops sit best on the ring. Leave empty to use a gradient built from the accent color. Choose an image from your files. |
| Accent color | Color | #8fe3d0 to start. |
| Card label | Text | The small line across the bottom of the card. |
| Heading | Text with bold, italic and links | Shown under the ring while this card is in the center. |
| Text | Formatted text | — |
| Button label | Text | — |
| Link | Link | Used by the card and the button. Taken from the product when one is picked. A link to any page. |
Something here not as described?Tell us which setting and what you saw. We reply within two business days.
Contact support