Appearance
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:
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.
Select Add section > Slideshow.
A default slideshow section contains three slides (blocks). To configure a slide, refer to Configure a slide within a slideshow.
From the side menu, select Slideshow.
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:
Go to Customize theme, and then use the dropdown at the top of the page to select a template that contains a slideshow section.
In the side menu, expand the Slideshow section menu.
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.
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.
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.
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.
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. |