1. What is a Vertical Slideshow?
The Vertical Slideshow is a dynamic section that displays slides in a vertical format, each with its own image, text, and button. It's a visually appealing way to highlight key messages or products on your Shopify store.
2. How to Add the Vertical Slideshow
To add a Vertical Slideshow in the Theme Editor:
- Go to the position you want to insert the slideshow.
- Click “Add section” and select “Vertical slideshow”.
- Click on the “Vertical slideshow” section to customize it.
Customization Options:
- Animation Settings:
- Toggle auto-play.
- Set slide duration.
- Show or hide next/previous arrows.
- Adjust arrow positions (left/right).
- Show or hide pagination. (the number indicator, for ex: 1/3).
- Desktop Layout:
- Make the slideshow full width.
- Add side padding.
- Round the corners of images.
- Adjust image height.
- Add top and bottom padding.
- Mobile Layout:
- Make the slideshow full width.
- Round the corners of images.
- Add top and bottom padding.
Note: By default, the Vertical Slideshow section includes two blocks: Image overlay slide and Media with text. You can add or remove these blocks as needed. Follow parts 3 and 4 for specific setup instructions.
3. How to Set Up the Image Overlay Slide
In the Theme Editor, under the “Vertical slideshow” section, click “Image overlay slide”.
Step 1:
Click “Select image” to choose an image for the slide. For a separate mobile image, use the “Mobile image” setting.
Step 2: Fill in the content fields:
- Subheading: Enter a subheading.
- Heading: To highlight a keyword, put it inside square brackets [].
- Text: Enter a description.
Step 3: Set up buttons:
Add up to two buttons, customize labels, assign links, and adjust styles.
Step 4: Additional Settings:
- Adjust text alignment.
- Change the position of the overlay image for desktop and mobile.
- Use a solid color instead of a background image, and more.
4. How to Set Up the Media with Text Slide
In the Theme Editor, under the “Vertical slideshow” section, click “Media with text”.
Step 1: Click “Select image” to choose an image for the slide. For a separate mobile image, use the “Mobile image” setting.
Step 2: Fill in the content fields:
- Subheading: Enter a subheading.
- Heading: To highlight a keyword, put it inside square brackets [].
- Text: Enter a description.
Step 3: Set up buttons:
Add up to two buttons, customize labels, assign links, and adjust styles.
Step 4: Additional Settings:
- Adjust text alignment.
- Change the position of the overlay image for desktop and mobile.
- Use a solid color instead of a background image, and more.
