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:

Settings	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.
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.

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.