High-growth stores are built on a strong foundation. Meet Cornerstone →

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.

Slideshow in theme editor
Slideshow in theme editor

Set up section

Add this section to your template and re-order its position. You can add this section multiple times with different content and settings.

NOTE

When you add a section to a template, it will appear on all pages that use that same template. To add sections to specific pages, you can create and assign new templates.

Steps

In your theme editor (Customize):

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

    Learn how to use Spark's available templates in our Templates help guide.

  2. Under Template, click (+) Add section and select Slideshow.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

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.

    Slide image settings
    Slide image settings
  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. Use Media focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

    See our image guide to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.

  5. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  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.

    Slide content settings
    Slide content 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 text styles, links, or lists. To learn more, see Shopify's Rich text editor guide.

  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.

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

  10. (Optional.) Select an Overlay color to display overtop of the image and adjust the Overlay opacity using the slider.

    The Overlay lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're 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. (Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

    You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.

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

    Slideshow height settings
    Slideshow height 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.

    Slider for time between slides
    Slider for time between slides
  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:

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

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

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 guide for Spark to learn more.

Mobile Image

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

Media focal point

The area of the uploaded image that will always appear centered within the slide to avoid cropping.

Heading

Enter heading text to display as a title on the slide.

Subheading

Enter subheading text to display below the heading.

Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide.

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?"

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.

Max width of text

Use the slider to control the maximum width and line breaks of the headings.

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.