Product slideshow
Product slideshow shows featured products as a slider. Each slide pairs a product with an image and short text.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Product slideshow.
The package uses this section on the Home page template.
Settings
View the section guide .
Heading content
Heading accepts inline text only. Formatting works, but new paragraphs do not.
| Setting | Options | Description |
|---|---|---|
| Subheading | Small line above the section heading, above the slider. | |
| Heading | Main heading, above the slider. | |
| Description | Text under the section heading, with rich text formatting. | |
| Heading size | • Large | Text size of the section heading: Large, Medium or Small. |
| Heading alignment | • Left | Aligns the subheading, heading and description to the left, center or right. |
Image settings
Product card width sets the width of the product card, in rem from 28 to 52.
| Setting | Options | Description |
|---|---|---|
| Image ratio | • Portrait | Shape of the slide images: portrait, square or landscape. Full screen makes them tall, with a minimum height based on the screen height. |
| Product card width | Width of the product card beside the image on desktop, in rem units. | |
| Image position | • Left | Shows the slide image on the left or right on desktop, with the product card on the opposite side. |
| Enable image link | Click the image to open the product page. |
Carousel
Autoplay interval sets how long each slide shows before it moves on. It applies only when autoplay is on.
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows on the slide image. They appear only when there is more than one slide. | |
| Show pagination | Shows a slide counter such as 1 / 3 on the slide image. It appears only when there is more than one slide. | |
| Enable autoplay | Moves to the next slide automatically. Autoplay pauses while the pointer is over the slider. | |
| Autoplay interval | Number of seconds each slide stays before moving on. It has an effect only 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 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. | |
| Show top border | Draws a line along the top edge of the section. |
Blocks
Product slide (product_slide)
One slide per product. Choose the product, then set the image, color scheme, overlay, subheading and heading for that slide.
| Setting | Options | Description |
|---|---|---|
| Product | Product shown in the product card for this slide. When the slide has no image of its own, the product's featured image is used. |
Image settings
| Setting | Options | Description |
|---|---|---|
| Image | 1920px x 840px recommended | |
| Color scheme | Edit color schemes in Theme settings. | |
| Overlay opacity | Sets the opacity of the overlay on this slide's image. | |
| Subheading | Small line shown over the slide image, above the slide heading. | |
| Heading | Caption shown over the slide image. |
Notes
- Enable image link opens the product page when the shopper selects the image. The link applies only to slides that have a product.
No comments yet