The Slideshow home page section offers an engaging introduction to your storefront by combining images, text, and call-to-action buttons. This section is fixed to the first home page position.
Use the theme editor to rotate slides automatically, adjust the slideshow height, build the slides, customize the buttons, and add an overlay for the Slideshow section.
Activate the slide for your home page
- In the theme editor (Customize), click Slideshow
- Click Enable
- Save
Rotate slides automatically
To have the slides rotate automatically, enable Autoplay slideshow. With this enabled, adjust the Autoplay slide duration with the horizontal slider (between 5-12 seconds). If this is disabled, customers will still be able to access additional slides through the next/previous controls.
Adjust the slideshow height
Use the Slideshow height dropdown to choose the desired vertical space this section will occupy. There are five options:
- Small
- Medium
- Large
- Fullscreen
- Original aspect ratio
Build the slides
Each slide is configured in its own block, featuring options to fine-tune the text, image, and call-to-action components. Open each block by clicking on it.
Add the image
Select the Background image to use for this block by clicking Select image.
Image dimension recommendations
- Small: 900 x 400px (or 1800 x 800px)
- Medium: 900 x 500px (or 1800 x 1000px)
- Large: 900 x 600px (or 1800 x 1200px)
- Fullscreen: 900 x 900 (or 1800 x 1800px)
Add the messaging
Add some text for the slide’s Heading and Subheading, then determine the Text color to use by clicking the rounded-rectangle swatch.
Direct customers to a page
Use the Background link field to direct customers to a particular page (product, collection, etc.) when they click on the slide image. These links are configured separately from Buttons.
Align the text
Use the Text alignment dropdown to reposition your slide’s Heading and Subheading to the Left, Center, or Right of the image.
Customize the buttons
On top of the background image link, use Buttons 1, 2, 3, and 4 to offer more link options.
Add a Label and Link for one or both, then choose a Button style (Primary or Secondary).
Add an overlay
To increase contrast, configure an Overlay for your slide(s). This will add a semi-transparent color over the slide’s background image. To enable, select either Gradient or Solid from the Overlay style dropdown. Select the Color to use for the overlay using the rounded-rectangle swatch selector, then adjust the Opacity with the slider (1% being most transparent and 100% most opaque).