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 previous video, a Slideshow section is displayed on a store's home page. 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 progress the slides automatically, enable the section's 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:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a Slideshow section.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Slideshow. Refer to Shopify help: Add a section.
From the side menu, select Slideshow.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Height | Use the Height options 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 Full screen option uses the full height of the section. |
| Auto-rotate slides | Select the Auto-rotate slides checkbox 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 speed | Select the Autoplay speed dropdown 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 settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |
Configure a slide inside a Slideshow section
A default Slideshow section contains two image slide blocks. To configure an Image slide block inside a Slideshow section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a slideshow section.
From the side menu, expand the Slideshow section menu.
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.
Note
Inside the section, you can add, remove, show, hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.
Apply the block settings described in the following table.
| Setting name | Description |
|---|---|
| Image | Use the Image selector options to set up an image inside the block for desktop displays. Refer to Add, replace or remove an image or video inside a section or block. On desktop displays, large images are cropped. The recommended image dimensions are 1800 x 800 pixels in .jpg format. |
| Image > Connect dynamic source | To display an image from a dynamic source for desktop displays, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Image - mobile | Use the Image selector options to set up an image inside the block for mobile displays. Refer to Add, replace or remove an image or video inside a section or block. The recommended image dimensions are 800 x 1200 pixels in .jpg format. |
| Image - mobile > Connect dynamic source | To display an image from a dynamic source for mobile displays, select the Connect dynamic source icon beside the Image - mobile selector, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Content > Content position | Select 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 desktop | Select 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 > Heading | In the Heading box, enter text to display as a title inside the block. |
| Content > Text | In the Text box, enter (body) text to display inside the block. Format the text and add links using the Text editor pane. |
| Content > Text > Connect dynamic source | To display body text from a dynamic source, select the Connect dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Content > Text color | Use the Text color options to specify a color for text inside the block. Set the text color to use the section's color scheme color for Primary, Secondary or Tertiary text. Alternatively, set the text color to White or Black. Refer to Colors. |
| Content > Call to action URL | In the Call to action URL box, enter a URL for the block's button to use or select a link to a store page. To remove a link, select the X icon inside the text box. |
| Content > Call to action URL > Connect dynamic source | To display a link from a dynamic source, select the Connect dynamic source icon beside the Call to action URL box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Content > Call to action button text | In the Call to action button text box, enter text to display as a label for the block's button. |
| Remove block | Select Remove block to delete the block from the current section. |