Hotspots

Supported blocks

• _hotspot
• badge
• heading
• text
• button

Settings

Setting	ID	Type	Default	Description
Full width	full_width	checkbox	false
Enable inner spacing	enable_spacing	checkbox	false
Block class	class	text
Background	bg	color_background		Supports solid or gradient colors.
Use theme background schema	bg_schema	checkbox	false
Fixed background	bg_attachment	checkbox	false
Image (desktop)	image	image_picker
Image (mobile)	image_mob	image_picker
Image radius	radius	select	rounded-md
Style	overlay_style	select	none
Overlay background	overlay_bg	color_background	linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1) 100%)	Applied to the whole overlay (Tint) or to the text box (Box). Supports solid or gradient colors.
Overlay radius	overlay_radius	select	rounded-md
Content position (desktop)	text_position	select	lg:items-end lg:justify-start
Content position (mobile)	text_position_mob	select	items-center justify-center
Text box width (desktop)	text_width	range	420	Width of the text box inside the overlay, in pixels.
Text box width (mobile)	text_width_mob	range	280	Width of the text box on screens below 1024px, in pixels.

Option values

• Image radius (radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud)
• Style (overlay_style): Tint (full), Box (box), Text shadow (shadow), Text shadow and tint (full shadow), No overlay background (none)
• Overlay radius (overlay_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud)
• Content position (desktop) (text_position): Top left (lg:items-start lg:justify-start), Top center (lg:items-start lg:justify-center), Top right (lg:items-start lg:justify-end), Center left (lg:items-center lg:justify-start), Center (lg:items-center lg:justify-center), Center right (lg:items-center lg:justify-end), Bottom left (lg:items-end lg:justify-start), Bottom center (lg:items-end lg:justify-center), Bottom right (lg:items-end lg:justify-end)
• Content position (mobile) (text_position_mob): Top left (items-start justify-start), Top center (items-start justify-center), Top right (items-start justify-end), Center left (items-center justify-start), Center (items-center justify-center), Center right (items-center justify-end), Bottom left (items-end justify-start), Bottom center (items-end justify-center), Bottom right (items-end justify-end)

Presets

• Hotspots

💡 Edit via Shopify Admin → Online Store → Themes → Customize.