# Slideshow

This guide describes setting your store’s Slideshow section to display a series of images on a store page.

The following video shows a slideshow section on a store’s homepage. The arrow icons are used to move between the slides, but you can Set up a slideshow section to play the slideshow automatically.

For general guidance with modifying sections, refer to Sections overview.

# Set up a slideshow section

To set up a slideshow section on a store page:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template to contain the slideshow section. For example, select the Home page template.

    Note

    The slideshow section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section (opens new window).

  2. Select Add section > Slideshow.

    A default slideshow section contains three slides (blocks). To configure a slide, refer to Configure a slide within a slideshow.

    The add slideshow section option in theme editor
  3. From the side menu, select Slideshow.

  4. Select a setting described in the following table.

Section setting name Description
Color scheme Use the Color scheme dropdown to set a color scheme for the slideshow section to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Height Select the Height dropdown to set a height for the slideshow section. The option Adapt to first slide sets the height to match the height of the first slide. The option Full screen uses the full height of the slideshow section.
Heading size Select the Heading size dropdown to set a size for the title text inside the slideshow section. The dropdown options are: S = small, M = medium, L = large, XL = extra large, 2XL = 2 x extra large, 2XL/ desktop 3XL = 2 x extra large on small displays and 3 x extra large on desktop displays, 2XL/ desktop 4XL, 2XL/ desktop 5XL, 2XL/ desktop 6XL and 2XL/ desktop 7XL.
Auto-rotate slides Select the checkbox Auto-rotate slides to turn on/ off playing the slideshow automatically. Enabling this setting shows a play and pause button, and disables the dragging action to move between slides.
Change slides every Select the dropdown Change slides every to set the number of seconds to wait before showing the next slide. The options are 5 Seconds, 6 Seconds, 7 Seconds, 8 Seconds, 9 Seconds and 10 Seconds. To use this setting, enable the previous option to Auto-rotate slides.
Theme settings Select Theme settings to access additional settings. Refer to Section theme settings menu.
Remove section Select Remove section to remove the slideshow section from the current page template.

# Configure a slide within a slideshow

To configure a slide block within a slideshow section:

  1. Go to Customize theme, and then use the dropdown at the top of the page to select a template that contains a slideshow section.

  2. In the side menu, expand the Slideshow section menu.

  3. To configure an existing slide block, select Image slide.

    To add a new slide block, choose Add Slide, and then select the Image slide block.

    A slide block inside a slideshow section in theme editor

    Note

    Inside a slideshow section, you can add, remove, show/ hide, or move image slide blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks (opens new window).

  4. Select a setting described in the following table.

Block setting name Description
Image > Select image Use the Image > Select image menu options to set up an image, for desktop displays, in the slide block.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store’s file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
The recommended image dimensions are 1800 x 800 pixels in .jpg format.
Image - mobile > Select image Use the Image - mobile > Select image menu options to set up an image, for small displays, in the slide block.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store’s file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
The recommended image dimensions are 800 x 1200 pixels in .jpg format.
Indent image Select the Indent image checkbox to add/ remove a border around the image inside the slide block.
Image focal point Select the Image focal point dropdown to display a specific area of the image inside the slide block. The options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right. This setting only applies when the image is cropped.
Content > Heading Use the Heading box to enter text to display as a title inside the slide block.
Content > Text Use the Text box to enter text to display inside the slide block. Format the text using the text editor pane.
Content position Select the Content position dropdown to set a position for the text inside the slide block. The options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Content width on desktop Select the dropdown Content width on desktop to set a width for the text area inside the slide block. The options are One third, One half, Two thirds, and Full width.
Text color Select the Text color dropdown to set a color for the text inside the slide block. The options are: Primary, Secondary, Tertiary, Black, and White.
Call to action > Link Use the Link text box to enter a URL or select a store page to link to. The link is displayed with the text inside the slide block. To remove a link, select the X icon inside the Link text box.
Call to action > Text Use the Text box to provide a label for the link inside the slide block.
Call to action > Style Select the Style dropdown to style the link as a Link (text) or Button inside the slide block.
Remove block Select Remove block to remove the slide block from the current slideshow section.