The Slideshow home page section combines images, text, and call-to-action buttons.
Use the theme editor to rotate slides automatically, adjust the slideshow height (desktop and mobile), add the slide content, customize the CTA buttons, and activate an overlay for the Slideshow.
This section is fixed to the first home page position for versions before 5.8.0. For recent versions (v5.8.0+), this is a dynamic section.
Add Slideshow to your home page (v5.8.0+)
- In the theme editor (Customize), click [+] Add section
- Locate Slideshow
- Click the section, then Add
- 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 width and height
Select either Full width or Content width from the Slideshow width dropdown to control the width of the slideshow.
Use the Slideshow height dropdown to choose the desired vertical space this section will occupy. There are five options:
- Small
- Medium
- Large
- Fit screen
- Adapt to first slide
- Original aspect ratio
Adjust separately for mobile
If using the latest version of Empire, Slide height is divided into two settings for DESKTOP and MOBILE.
For mobile devices, select an option from Slide height. There are seven options:
- Small
- Medium
- Large
- Extra large
- Fit screen
- Adapt to first slide
- Original aspect ratio
Add the slide content
Each slide is set up 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 slide image
Select the Image to use for this block by clicking Select image.
Recommended image dimensions depend on the active Slideshow height setting
- Small 1800 x 800px
- Medium 1800 x 1000px
- Large 1800 x 1120px
- Fit screen 1800 x 1800px
Include an alternate image for mobile
If using the latest version of Empire, consider including a separate image for the mobile display of the slide.
The mobile image feature is optional. If one image works well for both mobile and desktop, only the desktop image needs to be added to display for both mobile and desktop.
Click Select image below Mobile image to assign the image to the slide.
If a smaller Slideshow height option is selected, taller images will crop to fit the container. Selecting Original aspect ratio is the best way to reduce cropping across various devices and window sizes.
Include headings
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 another 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 CTA buttons
On top of the background image link, use Buttons 1 and 2 to offer more link options. Add a Label and Link for one or both, then choose a Button style (Primary or Secondary).
Activate an overlay
To increase contrast, configure an Overlay for your slide. 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).