Hotspot slider settings

This guide describes the Hotspot slider section.

Hotspot slider:

A section that combines a slideshow of images with interactive hotspots. Users can navigate through multiple slides, each featuring between one and seven hotspots that reveal the title, price, and a product link when hovered over.

Demo Example:

A Hotspot slider section displayed on the homepage, featuring two slides with interactive hotspots linked to products.

How to access the Hotspot slider section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
From any page, click “Add section”
Search and select “Hotspot slider”

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

Basic Components

The “Hotspot slider” section consists of two primary components:

General settings
Block. Available block types include:

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

General settings

Select a setting described in the following table:

Text content

Setting	Description
Heading	To add a heading, enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. Click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	The heading size setting offers three options to control the size of the section heading: Small Medium Large
Description	This field is for adding a description to the section. In the top menu of the field, you can find options to customize the text such as making it bold, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text and create bullet or numbered lists for your description. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description.
Heading alignment	You can align heading to the left, center, and right.

Section settings

Setting	Description
Color scheme	Color Scheme allows you to customize every aspect of your theme's colors in the settings. When you apply a color scheme to a specific section like the hotspot slider, it automatically updates all associated colors for a cohesive and professional look across your website.
Make image full width	Enable this option to display the image at full width, without side padding.

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.