Store location

Overview

The Store Location section is designed to showcase one or more store locations using image-based hotspots. You can set separate desktop and mobile background images, add a section heading and description, and optionally display the content as a slideshow with navigation controls. Each Location hotspot block can include its own images, text content, two buttons, and precise hotspot positioning for desktop and mobile.

Section Configuration:

Images

Setting	Description
Desktop background image	Uploads the section’s main background image for desktop devices.
Mobile background image	Uploads an alternate background image for mobile devices.

Header

Setting	Description
Heading	Sets the main title displayed in the section. Supports inline rich text.
Heading size	Controls the visual size of the heading (heading sizes or text-size presets).
Heading weight	Sets the font weight used for the heading text.
Heading case	Controls capitalization styling for the heading (none, uppercase, capitalize, lowercase).
Heading tag	Selects the HTML heading level (H1–H6) used for the heading.
Description	Adds supporting text beneath the heading. Supports rich text formatting.
Text size	Controls the size preset used for the description text.
Text weight	Sets the font weight used for the description text.
Text case	Controls capitalization styling for the description text.

Slideshow

Setting	Description
Show arrows	Displays previous/next navigation arrows for the slideshow.
Show pagination	Displays pagination indicators (such as dots) for the slideshow.
Auto play	Automatically cycles through slides when enabled.
Interval	Sets the time between slide changes when auto play is enabled (milliseconds).

Layout

Setting	Description
Container layout	Controls how the section is sized on the page: page-width (boxed), contained-content, or container-fluid (full width).
Container size (Desktop)	Sets the maximum section width on desktop as a percentage (50%–100%).
Color scheme	Applies a theme color scheme to the section styling.
Text alignment (Desktop)	Controls text alignment on desktop (left, center, right).
Text alignment (Mobile)	Controls text alignment on mobile (left, center, right).

Inner padding

Setting	Description
Top (Desktop)	Adds space above the section’s inner content on desktop.
Bottom (Desktop)	Adds space below the section’s inner content on desktop.
Left (Desktop)	Adds space to the left of the section’s inner content on desktop.
Right (Desktop)	Adds space to the right of the section’s inner content on desktop.
Top (Mobile)	Adds space above the section’s inner content on mobile.
Bottom (Mobile)	Adds space below the section’s inner content on mobile.
Left (Mobile)	Adds space to the left of the section’s inner content on mobile.
Right (Mobile)	Adds space to the right of the section’s inner content on mobile.

Outer padding

Setting	Description
Top (Desktop)	Adds space above the section (outside the section content) on desktop.
Bottom (Desktop)	Adds space below the section (outside the section content) on desktop.
Left (Desktop)	Adds space on the left side of the section (outside) on desktop.
Right (Desktop)	Adds space on the right side of the section (outside) on desktop.
Top (Mobile)	Adds space above the section (outside) on mobile.
Bottom (Mobile)	Adds space below the section (outside) on mobile.
Left (Mobile)	Adds space on the left side of the section (outside) on mobile.
Right (Mobile)	Adds space on the right side of the section (outside) on mobile.

Blocks Configuration:

Location Hotspot

Adds an individual hotspot entry (typically used to represent a store). Each block can display its own content and can be positioned precisely over the section image.

Images

Setting	Description
Desktop image	Uploads the hotspot block’s image for desktop devices.
Mobile image	Uploads the hotspot block’s image for mobile devices.

Title & description

Setting	Description
Heading	Sets the location title shown for the hotspot.
Heading size	Controls the visual size of the hotspot heading (heading sizes or text-size presets).
Heading weight	Sets the font weight for the hotspot heading.
Heading case	Controls capitalization styling for the hotspot heading.
Heading tag	Selects the HTML heading level (H1–H6) used for the hotspot heading.
Heading font family	Chooses a font preset for the heading (default theme or body font).
Show title on hover	When enabled, the hotspot title is revealed on hover (theme interaction style).
Description	Adds rich text details for the location (for example, timings, address, phone).
Text size	Controls the size preset used for the description text.
Text weight	Sets the font weight used for the description text.
Text case	Controls capitalization styling for the description text.

Button 1

Setting	Description
Label	Sets the text displayed on the first button.
Link	Sets the destination URL for the first button.
Open in new tab	When enabled, the link opens in a new browser tab/window.
Button style	Selects the style for the first button (Primary, Secondary, or Link).
Text case	Controls capitalization styling for the first button label.

Button 2

Setting	Description
Label	Sets the text displayed on the second button.
Link	Sets the destination URL for the second button.
Open in new tab	When enabled, the link opens in a new browser tab/window.
Button style	Selects the style for the second button (Primary, Secondary, or Link).
Text case	Controls capitalization styling for the second button label.

Hotspot position

Setting	Description
Top position (Desktop)	Sets the hotspot’s vertical position on desktop (percentage from the top).
Left position (Desktop)	Sets the hotspot’s horizontal position on desktop (percentage from the left).
Top position (Mobile)	Sets the hotspot’s vertical position on mobile (percentage from the top).
Left position (Mobile)	Sets the hotspot’s horizontal position on mobile (percentage from the left).
Dropdown alignment	Controls where the hotspot content panel appears relative to the hotspot marker.