Slideshow settings

This guide describes the Slideshow section.

Use this section to display a series of slides at the top of a page (hero area), each featuring either:

A full-width image per slide, or
A split layout, where the slide is divided into left and right blocks — for example, an image on one side and text or a button on the other or two separate images side by side for visual comparison or variety.

Demo Example: A Slideshow section displayed on the homepage, featuring two slides: one full-width slide and one split-layout slide.

A full-width image:

A split slide:

How to access the Slideshow section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Slideshow”

Note: Section cannot be added to the Password page.

To insert a new section between existing ones, follow the steps in the article "Add a section"

How to configure the Slideshow section

Basic Components

The “Slideshow” section consists of two primary components:

General settings
Block. Available block types include:

Slide. To learn about all available block settings, see the related article "Slide"
Split slide. To learn about all available block settings, see the related article "Split slide"

General settings

Select a setting described in the following table:

Settings	Description
Color scheme	Apply Color Schemes: After creating your color schemes in theme settings — 'Colors' tab, you can apply them to different sections of your store. In each section or block, you'll see a Color scheme dropdown. Select the appropriate color scheme for each section, ensuring consistency with your brand's identity.
Layout	Full width: The image banner will span the full width of the page. Grid: The image banner will be sized to match the container of other sections.
Slide height	Choose slide height from the dropdown list: Adapt to first image: All images in the carousel will match the height of the first image. Small Medium Large
Auto-rotate slides (if enabled)	Set the carousel to play automatically. Note: should be added at least 2 slides block to see visual effect of this option.
Auto-rotate slides (if disabled)	The images are static, and you can rotate slides using slideshow navigation (arrows).
Change slides every	Choose in seconds how frequently your slides cycle. The range is from 3 to 9 seconds. Note: should be added at least 2 slides block to see visual effect of this option.
Pagination style	Dots: Displays dots to indicate slide positions. Numbers: Displays slide numbers for navigation. Note: should be added at least 2 slides block to see visual effect of this option.
Pagination position	Left: Pagination appears on the left side of the slide. Bottom: Pagination appears at the bottom of the slide. Right: Pagination appears on the right side of the slide. Note: should be added at least 2 slides block to see visual effect of this option. Pagination is automatically positioned at the bottom on mobile and tablet devices.

Accessibility

Setting	Description
Slideshow description	Enhance accessibility by providing a description for your slideshow, catering to visually impaired customers.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.