Appearance

Slideshow ​

This guide describes setting up the Slideshow section. Use the section to display a series of images on a store page.

In the following video, a slideshow section is displayed on a store's homepage. The section's settings are set to their defaults, and the slideshow contains three image slides (blocks). Selecting the Next arrow progresses to the next image slide in the slideshow. To play the slideshow automatically, enable the checkbox option to Auto-rotate slides.

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

Set up a slideshow section ​

To set up a slideshow section:

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

    Note

    The slideshow section can be added into any page, except Checkout and Giftcard pages. To add a slideshow section into the current page, select Add section > Slideshow. Refer to Shopify help: Add a section.

  2. From the side menu, select Slideshow.

    A slideshow section selected in Theme editor.

  3. Select a setting described in the following table.

Section setting nameDescription
HeightSelect the Height dropdown to set a height for the 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 section.
Auto-rotate slidesSelect 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.
Autoplay speedSelect the dropdown Autoplay speed to set the number of seconds to wait before showing the next slide. The options are 4, 5, 6, 7, 8, 9, and 10 seconds. To use this setting, enable the previous option to Auto-rotate slides.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Remove sectionSelect Remove section to delete the section from the current page template.

Configure a slide inside a slideshow section ​

A default slideshow section contains two image slides (blocks). To configure an image slide block inside a slideshow section:

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

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

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add slide, and then select the block you added.

    An image slide block inside a slideshow section in Theme editor.

    Note

    Inside a slideshow section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks.

  4. Apply the block settings described in the following table.

Block setting nameDescription
ImageUse the Image menu options to set up an image inside the block, for desktop displays.
  • 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.
On desktop displays, large images are cropped. The recommended image dimensions are 1800 x 800 pixels in .jpg format.
Image - mobileUse the Image - mobile menu options to set up an image inside the block, for mobile displays.
  • 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.
Image focal pointSelect the Image focal point dropdown to display a specific area of the image, inside the 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 > Content positionSelect the Content position dropdown to position text inside the block. The dropdown options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Content > Content width on desktopSelect the dropdown Content width on desktop to set a width for the block's content. The options are One third, One half, Two thirds, and Full width.
Content > HeadingIn the Heading box, enter text to display as a title inside the block.
Content > TextIn the Text box, enter (body) text to display inside the block. Format the text using the text editor pane.
Content > Text colorSelect the Text color dropdown to set a color for the text inside the block. The options are: Primary, Secondary, Tertiary, Black, and White. Refer to Colors.
Content > Call to action URLIn the Call to action URL box, enter a URL for the block's button to use, or select a store page to link to. To remove a link, select the X icon inside the text box.
Content > Call to action button textIn the Call to action button text box, enter text to display as a label for the block's button.
Remove blockSelect Remove block to delete the block from the current section.