We've recently relaunched all three of our themes. Watch the launch video here.

Slideshow

The Slideshow section displays auto-rotating slides to showcase your product and editorial images. Add up to 5 slides with unique images, text, and buttons with custom colors. You can also add mobile-specific images and adjust the mobile height to ensure the best experience across devices.

[mp4 in editor rotating]

Add a Slideshow section

The Slideshow section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Slideshow from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

Create your slides

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

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

    This opens the slide block settings.

  2. Under Image, click Select image to select or upload a slide image.

    There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall).

    We recommend uploading an image with a minimum width of 2048px for optimal quality. Read our article about Image size recommendations for Spark to learn more.

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

    There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall).

    We recommend uploading an image with a minimum width of 2048px for optimal quality.

  4. Select the Media focal point to control what part of the image to center within the slide.

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

  5. Change the Heading text.

    We recommended a short title of just a few words.

  6. Change the Subheading text.

    We recommend two to three short sentences.

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

  7. Adjust the Heading size using the slider.

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

  8. Adjust the Text shadow amount using the slider.

    Text shadow can add contrast to make your headings readable.

  9. Adjust the Text max width of your headings using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  10. 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.

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

    Slideshow text alignment
    Slideshow text alignment
  12. Change the Color for the Text, Button text, and Button background.

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

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

  14. Return to the list of your template sections in the sidebar and repeat this process until you've added all the slides you need.

  15. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your slide blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

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

  16. Remember to click Save in the top-right corner.

Customize the Slideshow section

The Slideshow section settings are applied to all slide blocks. You can adjust the overall height of the slides for both desktop and mobile, and set how long to display each slide before rotating to the next one.

  1. Click on the Slideshow section that you wish to edit.

    This opens the Slideshow section settings.

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

    Choose between 50% and 100%.

  3. 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.

  4. Remember to click Save in the top-right corner.

Slideshow section settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Height

Use the slider to set the overall height of your slides.

Choose between 50% and 100%.

Mobile height

Use the slider to set the overall height of your slides when they are displayed on a mobile device.

Choose between 50% and 100%.

Time between slides

Use the slider to set the number of seconds to display each slide before rotating to the next one.

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

Slide block settings

The following settings are found by clicking directly on one of the slide blocks:

Configuration Settings

Image

Use the Select image button to add an uploaded image. There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall).

We recommend uploading an image with a minimum width of 2048px for optimal quality. Read our article about Image size recommendations for Spark to learn more.

Mobile Image

Select or upload an alternate image to display only on mobile devices.

Heading

Add heading text to use as a title for your slide.

We recommended a short title of just a few words.

Subheading

Add subheading text to display below the heading.

We recommend two to three short sentences.

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

Heading size

Use the slider to adjust the font size of the heading between 48px to 72px.

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

Text shadow amount

Use the slider to increase the amount of text shadow to add more contrast between slide text and image.

Text max width

Use the slider to adjust the maximum width of the heading and subheading text.

Experiment with this setting to find a clean visual shape for your text.

Button label

Add custom text for your call-to-action button.

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

Button link

Select or paste a link for the call-to-action button.

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

Text alignment

Choose which section of the slide you want to display your headings and button.

Text color

Choose the color for the slide headings.

Button text color

Choose the color for the button label.

Button background color

Choose the background color for the button.

Overlay color

Choose the color that overlays the entire slide image.

Overlay opacity

Use the slider to adjust the transparency of the overlay color.

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

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.