Shoppable image
Shoppable image shows an image or video with product points placed on it. Up to five products can sit on each look, and each point links to its product.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Shoppable image.
The package uses this section on the Home page template.
Settings
View the section guide .
General
Button style sets the look of the View all button: Primary, Outline or Link.
| Setting | Options | Description |
|---|---|---|
| Image ratio | • Adapt to image | Shape of the images in each shoppable look. Adapt to image keeps each picture's own proportions, and the other options crop all images to the same ratio. |
| Button style | • Primary | Style of the View all button: solid, outlined or a plain text link. Shown only when Show View all button is on. |
Heading content
Show View all button adds a View all button. View all button link sets its destination.
| Setting | Options | Description |
|---|---|---|
| Heading alignment | • Left | Aligns the subheading, heading and description. With Left or Right the View all button sits beside the heading, and with Center it sits below the carousel. |
| Subheading | Small line above the heading. | |
| Heading | Main heading of the section, with rich text formatting. | |
| Description | Text under the heading, with rich text formatting. | |
| Heading size | • Small | Text size of the heading: Small, Medium or Large. |
| Show View all button | Shows a View all button that links to the page set below. The label, link and style settings appear once this is on. | |
| View all button label | Text on the View all button. Shown only when Show View all button is on. | |
| View all button link | Page the View all button opens. Without a link the button is disabled. Shown only when Show View all button is on. |
Layout
| Setting | Options | Description |
|---|---|---|
| Columns on desktop | Number of looks visible side by side in the carousel on desktop. Tablet shows one fewer when this is above 2. | |
| Column gap | • No gap | Space between the looks in the carousel. |
| Columns on mobile | Number of looks visible at once on mobile. A decimal such as 1.5 lets part of the next look show, which hints that the carousel scrolls. |
Carousel
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows for the carousel. | |
| Arrow position | • Default | Default places the arrows over the carousel, where they appear on hover. Section header places them next to the heading. Shown only when Show arrows is on. |
| Show pagination | Shows pagination indicators under the carousel. |
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 content inside the standard page container, Wide uses a wider container, and Full width runs edge to edge. |
| Top padding | Space above the section, in pixels. | |
| Bottom padding | Space below the section, in pixels. |
Blocks
Look (_shoppable-look)
One look with an image or looping video and up to five products placed on it.
| Setting | Options | Description |
|---|---|---|
| Image | Image for the look. 1920px x 840px recommended. | |
| Video | Looping video for the look. | |
| Heading | Heading text for the look. | |
| Product 1 to Product 5 | Each product is a point on the look. Each one has a Product, a Vertical position and a Horizontal position, both in percent. |
No comments yet