Documentation/ Sections /Showroom with hotspots
Contact us
Install
03GENERAL

Showroom with hotspots

This page explains how “Showroom with hotspots” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Showroom with hotspots

This page explains how “Showroom with hotspots” actually behaves, which data it depends on, and what its settings change.

IMPLICIT BEHAVIOR

What the theme does automatically

  • →

    Some data can come from Shopify metafields; a missing value usually hides the related element.

CONFIGURATION

Understand the settings

Banner

Configure the visual, text, dimensions and contrast of the banner.

Show bannershow_hero
Default: enabled
Banner imagehero_image
Mobile banner imagehero_mobile_image
Titlehero_heading
Texthero_text
Text Alignmenthero_text_position
Default: center · Options: Left, Center, Right
Banner height on desktophero_height_desktop
Default: 420 · Range: 280–760px
Banner height on mobilehero_height_mobile
Default: 340 · Range: 220–560px
Title size on desktophero_heading_size_desktop
Default: 54 · Range: 28–84px
Title size on mobilehero_heading_size_mobile
Default: 34 · Range: 22–52px
Text sizehero_text_size
Default: 20 · Range: 13–28px
Veil Opacityhero_overlay_opacity
Default: 25 · Range: 0–80%

Layout

Set the dimensions, layout and spacing of the section.

Image spacing on desktopgrid_gap
Default: 12 · Range: 4–28px
Image spacing on mobilemobile_grid_gap
Default: 10 · Range: 4–24px
High internal marginsection_padding_top
Default: 32 · Range: 0–100px
Low internal marginsection_padding_bottom
Default: 72 · Range: 0–120px
High internal margin on mobilemobile_padding_top
Default: 24 · Range: 0–80px
Low internal margin on mobilemobile_padding_bottom
Default: 52 · Range: 0–100px
Show filtersshow_filters
Default: enabled
Filter label Allall_label
Show paginationshow_pagination
Default: enabled
Images per pageitems_per_page

This number is used only when paging is enabled.

Default: 12 · Range: 4–24

Grid Interaction

Adjust the visual feedback displayed when hovering over grid items.

Border thickness on hoverhover_border_size
Default: 5 · Range: 2–10px
Product hotspot blurhotspot_blur
Default: 16 · Range: 0–40px

Popup and products

Adjust the detail window, purchase actions and product information visible.

Popup widthmodal_width
Default: 1180 · Range: 760–1480px
Popup background opacitymodal_overlay_opacity
Default: 55 · Range: 20–90%
Product list titleproducts_heading
Add to cart button textadd_to_cart_label
Add all button textadd_all_label
Out of stock textsold_out_label
Text if no product is addedempty_products_text
Show brandshow_vendor
Default: disabled
Show product descriptionshow_description
Default: enabled
Show custom metafieldsshow_metafields
Default: enabled

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme
Default: disabled
Paletteopaline_color_scheme
Default: scheme-1

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px
Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px
COMPOSITION

Available blocks

Filterfilter

Add this block only when it provides useful information to the journey.

Ambient imageroom

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

  • ✓

    Content remains readable in every color scheme.

  • ✓

    Labels match the storefront language.

  • ✓

    Displayed promotions match Shopify rules.

  • ✓

    Interactions remain accessible by keyboard and touch.