Scrolling image cards
Scrolling image cards shows a row of image cards that scroll sideways. Each card has an image, a subheading, a heading and a description.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Scrolling image cards.
The package uses this section on the Home page, The Craft page, and the Product template and the two product gallery templates (gallery left and gallery bottom).
Settings
View the section guide .
General
Button style sets the look of the View all button: Primary, Outline or Link.
| Setting | Options | Description |
|---|---|---|
| Button style | • Primary | Sets the look of the View all button: Primary, Outline, or Link, which shows it as a text link. Shown when Show View all button is on. |
| Card gap | • No gap | Space between cards, and between a card's image and its text. No gap places them edge to edge. |
| Card width on desktop | Width of each card on desktop as a percentage of the screen width, up to a maximum card width. | |
| Card content alignment | • Left | Aligns the text inside each card to the left, center or right. |
Heading content
Show View all button adds a View all button. With a left or right aligned heading, the button sits beside the heading. With a center aligned heading, it sits below the cards.
| Setting | Options | Description |
|---|---|---|
| Heading alignment | • Left | Aligns the subheading, heading and description. With Left or Right the View all button sits beside them, and with Center it moves below the cards. |
| Subheading | Small line of text shown above the heading. | |
| Heading | Main heading of the section. | |
| Description | Text shown under the heading. | |
| Heading size | • Small | Sets the heading text size. Large follows the H1 style, Medium the default section heading style, and Small the H3 style. |
| Show View all button | Shows a View all button for the section. | |
| View all button label | Text on the View all button. Shown when Show View all button is on. | |
| View all button link | Where the View all button goes. With no link, the button shows but does not respond to clicks. Shown when Show View all button is on. |
Card settings
Image position on desktop puts the image on the left or right of the card text.
| Setting | Options | Description |
|---|---|---|
| Image ratio | • Adapt to image | Sets the shape of the card images. Adapt to image uses landscape for cards with an image and portrait for cards without one. The other ratios apply on desktop only, except Square. |
| Image position on desktop | • Left | Places the image on the left or right side of each card on desktop. |
Layout
Content padding sets the space around the text inside each card, in pixels. The values adjust on mobile automatically.
| Setting | Options | Description |
|---|---|---|
| Horizontal content padding | Padding inline is automatically optimized for mobile. | |
| Vertical content padding | Padding block is automatically optimized for mobile. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Page width keeps the section inside the standard page width, Wide stretches it closer to the screen edges with side margins, and Full width runs edge to edge. |
| Top padding | Space above the section, in pixels. It shrinks on smaller screens. | |
| Bottom padding | Space below the section, in pixels. It shrinks on smaller screens. | |
| Show top border | Draws a thin line along the top edge of the section. |
Blocks
Image card (_image-card)
Adds one card to the row. The section starts with three cards.
| Setting | Options | Description |
|---|---|---|
| Image | Image shown on the card. 1920px x 840px recommended. | |
| Image on mobile | Image shown on mobile. 348px x 348px recommended. | |
| Subheading | Small text above the heading. Default: Subheading. | |
| Heading | Main heading of the card, with rich text formatting. Default: Talk about your brand. | |
| Description | Text under the heading. Default: Add a short description for this block. | |
| Color scheme | Color scheme of the card text. Default: color-scheme-1. |
Notes
- With View all button link blank, the button stays visible but has no href and is marked aria-disabled, so clicking it does nothing.
No comments yet