Image gallery
Image gallery shows a row of images that move as a carousel or as a marquee. Each image is a block, and you can add up to ten.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Image gallery.
The package uses this section on the Home, Collection, Collection list, Cart, Search, About, Contact, FAQs, Sustainability and The Craft templates.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Image ratio | • Adapt to image | Sets the shape of every gallery image. Adapt to image keeps each picture's own proportions, and the other options crop the images to the chosen ratio. |
| Image width | Width of each image in the marquee, in pixels. Shown when Display mode is Marquee. | |
| Image width on mobile | Width of each image in the marquee on mobile, in pixels. Shown when Display mode is Marquee. | |
| Display mode | • Carousel | Carousel shows the images in a swipeable row with columns, arrows and pagination. Marquee scrolls the images in a continuous loop. |
| Show blurred background | Fades the left and right edges of the image row so the images blend out at the sides. | |
| Show icon on hover | Shows a round icon over an image when a shopper hovers over it. A custom icon image can be chosen once this is on. | |
| Hover icon image | Optional. Leave empty to use the default arrow icon. 60px x 60px recommended for Marquee. The icon shows at 44px in Carousel mode. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | Small line of text shown above the heading. | |
| Heading | Main heading of the section. | |
| Description | Text shown under the heading. | |
| Heading size | • Large | Sets the heading text size. Large follows the H1 style, Medium the default section heading style, and Small the H3 style. |
| Heading alignment | • Left | Aligns the subheading, heading and description to the left, center or right. |
Marquee settings
| Setting | Options | Description |
|---|---|---|
| Scroll direction | • Left | Direction the marquee moves, left or right. Shown when Display mode is Marquee. |
| Scroll speed | Seconds the marquee takes to complete one loop. A higher number scrolls slower. Shown when Display mode is Marquee. | |
| Item spacing | Space between images in the marquee, in pixels. Shown when Display mode is Marquee. |
Marquee settings apply when Display mode is set to Marquee.
Layout
| Setting | Options | Description |
|---|---|---|
| Column gap | • No gap | Space between images in the carousel. No gap places them edge to edge. Shown when Display mode is Carousel. |
| Columns on desktop | How many images show across at once on desktop. Shown when Display mode is Carousel. | |
| Columns on mobile | How many images show at once on mobile. A decimal such as 1.5 lets the next image peek in and enables free scrolling. Shown when Display mode is Carousel. |
Carousel
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows when a shopper hovers over the carousel on desktop. Shown when Display mode is Carousel. | |
| Show pagination | Displays carousel pagination. Shown when Display mode is 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 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 (_gallery-image)
One image in the gallery. Ratio, marquee width and the hover icon come from the section settings.
| Setting | Options | Description |
|---|---|---|
| Image | Image shown in the tile. Leave it empty to show a placeholder. 1920px x 840px recommended | |
| Image link | Page the image opens when a shopper selects it. Setting a link makes the tile a link. |
No comments yet