Slideshow settings

This guide describes the Slideshow section.

Use this section to display a series of slides at the top of the page (hero area). Each slide can feature one of the following:

1. Slide with images

Main background: background gradient, or image
Content container: visible or invisible, with optional background color
Up to 4 images can be added on top of the background
Images can be positioned and resized
Optional parallax animation effect for added depth

2. Simple slide

Main background: background gradient, or image
Content container: visible or invisible, with optional background color

Demo Example: A Slideshow section displayed on the homepage, featuring a slide with colorful gradient background, animated overlay images using parallax effects, and centered content container highlighting a promotional message.

Slide with images

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 "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Slideshow section

Basic Components

The “Slideshow” section consists of two primary components:

General settings – These control the overall settings of the section.
Block – Each block has its own individual settings.

Available block types include:

Slide with images. To learn about all available block settings, see the related article "Slide with images"
Slide. To learn about all available block settings, see the related article "Slide"

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.

General settings

Select a setting described in the following table:

Setting	Description
Layout	• Full Width: The image banner spans the entire width of the page, edge to edge. • Grid: The image banner is constrained to the same width as other sections and aligns with the main content container.
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.
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 • Extra large
Slider direction	Choose how slides transition: • Horizontal – Slides move left or right • Vertical – Slides move up or down • Fade – Slides dissolve smoothly into each other
Pagination color	Select the color of the pagination dots or indicators. Default: white (#FFFFFF).
Enable pagination dark mode	Lets you set a separate pagination color for when the storefront is in dark mode, shown in Pagination color dark mode below. Only appears when the theme's dark/light mode feature (Theme settings) is enabled. Disabled by default.
Pagination color dark mode	The pagination indicator color used when the storefront is in dark mode. Only shown when dark/light mode is enabled in theme settings and Enable pagination dark mode is turned on. Default: black (#000000).
Pagination style	Sets the visual style of the pagination indicators. • Long dots (Default) • Dots
Pagination position desktop	Choose where the pagination appears on desktop screens: • Left • Bottom • Right
Auto-rotate slides	Enable automatic slide rotation.
Change slides every	Set the interval (in seconds or milliseconds) between each slide when auto-rotate is enabled. Only shown when Auto-rotate slides is on.

Mobile layout

(Only shown when Slider direction is not Vertical)

Setting	Description
Slide image position mobile	Controls how the slide image is positioned on mobile. • Cover — the image covers the full mobile slide as a background. (Default) • Top — places the image above the content, revealing image-height and pagination-color settings below.
Slide image height mobile	Sets the height of the image on mobile: Default, Adapt to first image, Small, Medium, Large, Extra large, or Custom.
Slide image height mobile custom	Sets a custom image height on mobile as a percentage (20–100%). Only shown when Slide image height mobile is set to Custom.
Pagination color mobile	The pagination indicator color used on mobile. Only shown when Slide image position mobile is set to Top. Default: #101010.
Pagination color dark mode	The mobile pagination indicator color used when the storefront is in dark mode. Only shown when dark/light mode is enabled, Enable pagination dark mode is on, and Slide image position mobile is set to Top. Default: white (#ffffff).

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.