Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

Slideshow

The Slideshow displays up to 16 auto-rotating slides to showcase your product images and videos. You can fine-tune how your images look and add a mobile-specific image for the best experience across all devices. Each slide has its own text layout and call to action button.

This section looks especially great as the top-most section on your home page with the transparent header enabled.

Slideshow on mobile device
Slideshow on mobile device
Slideshow on mobile device
Slideshow on mobile device

Add a slideshow section

The Slideshow section can be added to any template (except the Checkout). Learn more about sections and templates in our article about how to use the theme editor.

In the 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. Change the order of your sections by using the drag and drop handles ⋮⋮

Add slides with images

Add up to 8 slides with unique images, headings, buttons, and custom colors.

In your theme editor (Customize):

  1. Click +Add slide and/or click on the Slide block to open the block 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 Ira 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 Image focal point to choose which section of the image to keep centered within the slide.

    This setting ensures the key part of your image appears when cropping occurs.

  5. (Optional.) Return to the list of sections to change the order of the slide blocks using the drag and drop handles ⋮⋮

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  6. Remember to click Save.

Slide image settings

Each slide image has the following settings:

Configuration Settings

Image

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 Ira to learn more.

Mobile image

Alternate image to displayed only on mobile devices.

Image focal point

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

Mobile image focal point

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

Add headings and buttons

Add and customize slide headings, buttons, and colors.

In your theme editor (Customize):

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

  2. Add a Heading as a title of slide.

    We recommended a short title of just a few words.

  3. Add Subheading text to display below the heading.

    We recommend two or three short sentences.

  4. Adjust the Max width of text of your headings using the slider.

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

  5. Add a Button Link and change the Button label to display a button underneath the subheading.

    The entire slide will become a link if the Button label is blank.

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

  6. Set the Link style to either a Button or Link with arrow.

  7. Change the position of the slide content by using the Text alignment dropdown.

    Slideshow text alignment
  8. Change the color of the Text color andOverlay color.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  9. Change the Overlay opacity 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.

    These settings help make your text clear and readable.

  10. Remember to click Save.

Slide content settings

Content for slides have the following settings:

Configuration Settings

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.

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 button or slide.

Text alignment

Choose how the text inside the current slide should be aligned and positioned on the slide.

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.

Overlay color

Choose the color that overlays the entire slide image.

Adjust slideshow height

In the section settings, set the height of the slideshow for desktop and mobile devices.

Slideshow section settings

In your theme editor (Customize):

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

  2. Adjust the Height and Mobile Height of your slide images between 50% to 100% of the maximum height.

  3. Remember to click Save.

Adjust time between slides

By default, multiple slides will rotate every 4 seconds. You can choose to display each slide between 0 to 10 seconds.

Slider for Time between slides

In your theme editor (Customize):

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

  2. Move the slider to set the time between slides between 0 to 10 seconds.

  3. Remember to click Save.

Enable parallax

The parallax makes it look like the image and text have depth as customers scroll.

In your theme editor (Customize):

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

  2. Check the Enable parallax scrolling checbox to add a dynamic 3D-like effect.

    Use the Parallax scale to adjust how much the image moves when scrolling past.

  3. Remember to click Save.

Slideshow settings

The slideshow has the following settings:

Configuration Settings

Height

The height of the slideshow as a percentage of the screen or browser height. Your image will be cropped to match the height.

If the custom height is %100, the slideshow will expand to the full height of any screen or browser window.

Mobile height

The height of the mobile slideshow as a percentage of the screen height. Your image will be cropped to match the height.

If the custom height is %100, the slideshow will expand the full height of any screen.

Time between slides

The number of seconds each slide is shown before rotating.

Choose between 0 seconds and 10 seconds.

Enable parallax

Check this checkbox to add a parallax scrolling effect to the slideshow.

The parallax effect gives the text and image a sense of depth as the user scrolls.

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.