The top portion of a store's home page its most valuable real estate. To make the most of it, merchants often use a slideshow to showcase their most recent deals and top-selling products.
Use the theme editor to add a slideshow section to your home page, automate slide rotation, adjust the slideshow height, add up to five slides to display, and customize the content for the slideshow section.
Add Slideshow to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Slideshow
- Click the section, then Add
- Save
Invert slideshow control colors
The Invert slideshow control colors option allows you to swap the default translucent white "next/previous" buttons for a darker version. This helps to make these controls more visible in contrast to the slideshow images.
Automate slide rotation
To rotate through the included slides automatically, select Enable auto-rotate slides.
Customize how long each slide displays using the Rotation interval slider.
Adjust the slideshow height
Choose an option from the Slideshow height dropdown. The options are:
- Small
- Medium
- Large
- Original aspect ratio
Each option will adapt the image to fit the container, except for Original aspect ratio, which will respect the original proportions of the image.
Add up to five slides to display
Select a Slide block to access its settings. To add a new block, select [+] Add slide.
In the slide block, click Select image to upload the image.
The best dimensions for slideshow images are 940 x 444px. Adjust the image to these dimensions before uploading.
Customize the content
Contrast the text and slide image with an overlay
Add an Overlay, complete with text and button.
Include the slide's Heading and Subheading. Then add a Button label and Link to control what the button says and where it directs to.
Select a Color for the text components of the slide using the rounded-rectangle swatch. Then do the same for the Background color, which will be the overlay color covering the slide image.
Adjust the Background color opacity using the provided slider. This controls the level of opacity for the background color, so having a value closer to 0% will make the color more transparent, while one closer to 100% will be more opaque.
Align the text
Use the Alignment dropdown to select a text alignment option. This helps to position the text to work with the subject of the image. For instance, if there is empty space on the left side of an image and details on the right side, choosing Left (center, top, bottom) would balance the slide's layout.