Add a Slideshow section to combine images, text, and call-to-action buttons.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Slideshow.
Customize section settings
Click Slideshow to open general settings for the section.
Content width
Select Regular, Wide, or Full width to control the Content width (horizontal space occupied by the video section). Please note that this will apply to all slideshow blocks you will be adding.Â
Autoplay
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.
Slide 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:
- Adapt to the first image
- Small
- Medium
- Large
Section marginsÂ
Use the section margin sliders to control the Slideshow section’s top margin and bottom margin.
 Â
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well.Â
 Â
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.
Click the toggle beside Slideshow to reveal the blocks, then open one of the preloaded Image slide blocks to customize it. You can add a maximum of 50 slide blocks.
Â
Add the image slide
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 a heading
Add a Heading using the provided field. Leave the field blank to exclude a heading.
Font sizes
Use the sliders for Heading size, Mobile heading size, Text size, and Mobile text size to control the font sizes for the section's text components.
Customize CTA buttons
Use Buttons 1 and 2 to offer more link options. Add a Label and Link for one or both, then choose a Button style (Fill or Outline).
Adjust text color
Control the Text color by clicking the circle swatch.
 Â
Include an alternate image for mobile
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.
Â
Image overlay opacity
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 swatch selector, then adjust the Opacity with the slider (1% being most transparent and 100% most opaque).
Changelog
December 3rd, 2024
- Updates to link hover states and animations.
- Slide selection in the Theme Editor.
November 6th, 2024
- Minor bug fixes.
September 25th, 2024
- Slideshow added to Theme Sections.