Slideshow
Slideshow shows full-width slides, each with an image or video and optional text and a button. Slides change on their own when autoplay is on, and shoppers can also use the arrows.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Slideshow.
The package uses this section on the Home page template.
Settings
View the section guide .
General
Slide height sets how tall the slides are: Full screen, Match first slide, or Small, Medium or Large. Match first slide keeps every slide the same height as the first one.
| Setting | Options | Description |
|---|---|---|
| Loading background color | Background color of the slideshow area, visible while the slides load. | |
| Loading text color | Color of the text shown on the slideshow while it loads, before the slides are ready. | |
| Slide height | • Full screen | Full screen fills the window height below the header. Match first slide follows the proportions of the first slide's image or video. Small, Medium and Large are also offered. |
Carousel
Enable autoplay moves to the next slide after each autoplay interval, from 2 to 10 seconds.
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows on the slideshow. | |
| Show pagination | Shows pagination dots. When this is off, the dots still show on screens narrower than 768px. | |
| Enable autoplay | Moves to the next slide automatically. Autoplay holds while the pointer is over the slideshow. | |
| Autoplay interval | Seconds each slide stays on screen before the next one appears. Used when Enable autoplay is on. |
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 container. Wide uses a wider container. Full width runs edge to edge. |
| Top padding | Space above the section. | |
| Bottom padding | Space below the section. |
Blocks
Slide (_slideshow-slide)
One slide of the slideshow. It can show an image or a video, with a separate image or video for mobile, plus optional text and a button.
| Setting | Options | Description |
|---|---|---|
| Image | Image for the slide. 1920px x 840px recommended. | |
| Image on mobile | Image for mobile screens. 348px x 348px recommended. | |
| Video | Video for the slide. 684px x 500px recommended. | |
| Video on mobile | Video for mobile screens. 390px x 572px recommended. | |
| Overlay opacity | Darkens the image or video behind the text. Default: 0%. | |
| Highlight text | Highlight text on the slide. | |
| Badge icon | • None | Icon shown with the highlight text. Default: Star. |
| Background color | Background color of the slide content. Default: #E3CEA4. | |
| Text color | Color of the slide text. Default: #1D1D1F. | |
| Subheading | Short line above the heading. Default: Subheading. | |
| Heading | Heading of the slide. Leave blank to use the collection's title. Default: Image slide. | |
| Heading size | Heading 0 to Heading 6 | Size of the heading. Default: Heading 0. |
| Description | Text under the heading. Default: Tell your brand's story through images. | |
| First button label | Text of the button. Leave blank to hide the button. Default: Button label. | |
| First button link | Page the button opens. | |
| First button style | • Primary | Style of the button. Default: Primary. |
| Content position on desktop | • Top left | Where the text sits on desktop. On mobile, the position adjusts automatically. Default: Middle left. |
| Content alignment | • Left | Aligns the text on desktop. Default: Left. |
| Content position on mobile | • Top | Where the text sits on mobile. Default: Bottom. |
| Content alignment on mobile | • Left | Aligns the text on mobile. Default: Left. |
Notes
- Loading text color applies only until the slides are ready. Loading background color is the background of the slideshow area.
No comments yet