User Guide

Search limit to:






Vertical slideshow

by Admin on Nov 24, 2024

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:

  1. Go to the position you want to insert the slideshow.
  2. Click “Add section” and select “Vertical slideshow”.
  3. 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 2Fill 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.
  • Adjust the background overlay opacity.

Step 5Click "Save".

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.