Carousel
A slider that shows child blocks in a row. You set the number of columns on desktop and on handheld, the gap between items, and whether it shows arrows and pagination.
Where it is used
This is a standalone block. Its slides can be any theme block or app block, such as headings, text, buttons, media, groups, forms, timers, maps and popup links. No section in the package places it.
Settings
View the block guide .
| Setting | Options | Description |
|---|---|---|
| Inherit color scheme | When on, the carousel uses the color scheme of the section or block around it. Turn it off to pick a separate color scheme for this carousel. | |
| Color scheme | Edit color schemes in Theme settings. |
Carousel settings
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows that appear when shoppers hover over the carousel. | |
| Show pagination | Shows pagination below the slides. | |
| Columns on desktop | Number of slides visible at once on desktop. Tablets show one column fewer when this is above 3. | |
| Columns on mobile | Number of slides visible at once on mobile. A fraction such as 1.5 lets part of the next slide show and the carousel scroll freely. | |
| Column gap | • No gap | Space between slides, from none to large. The gap is smaller on mobile. |
Spacing
| Setting | Options | Description |
|---|---|---|
| Horizontal padding | Adds space on the left and right of the carousel. The value is reduced on small screens. | |
| Vertical padding | Adds space above and below the carousel. Values above 40px are reduced on small screens. |
Columns on mobile accepts fractions, such as the default 1.5.
Notes
Arrows are set to show on hover.
No comments yet