Products slideshow settings

This guide describes the Products slideshow section.

Use this section to display a series of products as a slideshow.

Each slide includes:

A product card in its original form with full variant and pricing details.
An image to highlight product features, demonstrate usage, or simply showcase its appearance.
A heading, description, and badge that can contain text information for better product promotion.

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 “Products slideshow”

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 Products slideshow section

Basic Components

The “Products slideshow” section consists of two primary components:

General settings – These control the overall settings of the section.
Slide – Each slide has its own individual settings.

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

Setting

Description

Color scheme

Select a color scheme from the list and customize it with appropriate colors for text, headings, buttons, and background.

Applying a color scheme to the entire collection list section (excluding the collection columns) automatically updates all related colors based on the settings defined in the theme's color schemes.

Background image

Setting

Description

Image

Choose a background image for your Product slideshow. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it.

Image fit

“Media fit” refers to how background images are sized and displayed within their respective containers on a web page.

Two options for Media fit:

Original: This setting displays the media at its original size, without any cropping or resizing.
Fill: This option adjusts the media to fill the entire container, even if it requires cropping or resizing to do so.

Product settings

Settings	Description
Image ratio	Image Ratio controls how your images look based on their shape. Here are the options: Portrait: Makes the image taller. Square: Makes the image a perfect square. Custom: Allows setting image height in the next option.
Custom image height	Set a custom image ratio and adjust its height using a convenient slider.
Color scheme	Select a color scheme from the list and customize it with appropriate text, heading, button, and background colors inside the product cards. Applying a color scheme to the entire collection list section (excluding the collection columns) automatically updates all related colors based on the settings defined in the theme's color schemes.

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.