Preview slider

This guide describes the Preview slider section. Use this section to display multiple slides with images, text, allowing users to navigate through content quickly and interactively.

Key features:

Preview card – Displayed at the bottom of the slide. Clicking the Next button inside the card updates both the preview card and the main slide.
Slide settings – Options include Auto rotate, Scroll speed, and Change every (time interval for slide changes).
Image ratio – Set the aspect ratio for slide images.
Announcement line – Customize an announcement line with settings for Scroll speed, Position, and Rotate

Demo example:

The Preview slider section is displayed on the Contact Us page, featuring location images, working hours, and physical addresses.

How to access the Preview slider 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 “Preview slider”

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 Preview slider section

Basic Components

The “Preview slider” 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 (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
Heading	Display main title on the banner. In the top menu of the field, you can find options to customize it, such as making it bold or italic. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	Select heading size: Small Medium Large
Section color scheme	Select a section color scheme from the list. Applying a color scheme updates all related colors based on the theme’s predefined color schemes.
Switch section background	Within each color scheme, you can define a secondary background in addition to the main background. When you enable Switch section background, the main background of the section changes to the secondary background.
Preview card color scheme	Select a color scheme for the preview card displayed at the bottom of the slide. Applying a color scheme updates all related colors based on the theme’s predefined color schemes.
Switch preview card background	Within each color scheme, you can define a secondary background in addition to the main background. When you enable Switch preview card background, the main background of the preview card changes to the secondary background.
Auto rotate	Enable automatic slide rotation.
Change every	Set the interval (in seconds) between each slide when auto-rotate is enabled.
Scroll speed	Adjust the speed at which slides scroll in the slider.
Image ratio	Select image ratio: Adapt to image Portrait Square Landscape Wide

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.