Slideshow

The Slideshow displays up to 5 auto-rotating slides to showcase your product images with call-to-action buttons. You can fine-tune how your images look and add a mobile-specific image for the best experience across all devices.

Add slideshow section

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   

2. In the side panel, click +Add section and select Slideshow.

   

3. Use the drag and drop handles ⋮⋮ to change the order of your sections.

   

Add image slides

You can add up to 5 slides with unique images, text, and buttons, with custom colors.

Steps

In your theme editor (Customize):

1. Click +Add slide and/or click on the Slide block you wish to edit.

   

2. Under Image, click Select image to upload and select your image file.

   There are no required images dimensions. We recommend images that are square (1:1) or landscape (3:2) (wider than tall) with a minimum width of 2048px for optimal quality across all devices.

   See our article for image recommendations for Spark to learn more.

3. (Optional.) Under Mobile image, click Select image to upload and select an alternate slide image that will show only on mobile.

   You may want a different image that works best with mobile screen dimensions.

4. Select the Media focal point to choose which section of the image to keep centered within the slide.

   Use the focal point to make sure the key part of your image remains visible when cropping occurs.

5. (Optional.) Use the drag and drop handles ⋮⋮ to change the order of the slide blocks.

   

   Click the Remove block button in the block settings to remove a slide block entirely.

6. Click Save.

Slide headings and styles

Add and customize slide headings, buttons, and colors.

Steps

In your theme editor (Customize):

1. Click the Slide block to open the block settings.

   

2. Change the Heading text.

   We recommended a short title of just a few words.

3. Change the Subheading text.

   We recommend two to three short sentences.

   Use the formatting buttons to add bold, italic, or linked text.

4. Adjust the Heading size using the slider.

   Make sure the heading is large enough so it's distinctive and easy to read.

5. Adjust the Text shadow amount using the slider.

   Text shadow can add contrast to make your headings readable.

6. Use the Max width of text slider to control the maximum width of the headings.

   Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

7. Add a Button label and Button link to display a button underneath the subheading.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

   To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

8. Use the Text alignment dropdown to change the position of your headings and button on the slide.

   

9. Change the Color for the Text, Button text, and Button background.

10. Change the Overlay color and Overlay opacity using the slider to increase the contrast between the slide text and image.

    These settings help make your text clear and readable.

    Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color slide with no image.

11. Click Save.

Slideshow height

You can adjust the overall Height of the slidehow for both desktop and mobile. The Height of the slideshow is set as a percentage of the screen or browser height.

Steps

In your theme editor (Customize):

1. Click on the Slideshow section to open the section settings.

   

2. Adjust the overall Height and Mobile height of all your slide images using the slider.

   When Height is set to 50%, the slideshow will always display at half the height of the customer's screen or window height.

   Your image will be cropped to match the height.

3. Click Save.

Time between slides

By default, multiple slides will rotate every few seconds. You can choose to display each slide between 5 to 15 seconds.

Steps

In your theme editor (Customize):

1. Click on the Slideshow section to open the section settings.

   

2. Adjust the Time between slides using the slider.

   Choose between 0 seconds and 10 seconds.

   The setting of 0 seconds between slides turns off autoplay, so visitors can click and drag (or swipe) through each slide on their own.

3. Click Save.

Slideshow section settings

Click on the Slideshow section to find the following settings:

Slide block settings

Click on the Slide blocks to find the following slide settings: