Shoppable image

sections/shoppable-image.liquid

Settings

Setting	ID	Type	Default	Notes
Heading
Heading	heading	Text	Shop the look
Subheading	subheading	Text
Heading size	heading_size	Dropdown	medium	Options: Small, Medium, Large.
Heading alignment	heading_alignment	Dropdown	center	Options: Left, Center, Right.
Image
Image	image	Image
Mobile image	image_mobile	Image		Falls back to the image above. Hotspot positions are shared, so use a similar crop.
Image description	image_alt	Text		Describes the scene for screen readers and search engines. Falls back to the heading.
Aspect ratio	aspect_ratio	Dropdown	landscape	Options: Natural, Square (1:1), Portrait (4:5), Landscape (4:3), Wide (16:9), Banner (3:1).
Rounded corners	rounded	On/off	On
Hotspots
Hotspot style	hotspot_style	Dropdown	plus	Options: Plus icon, Solid dot, Numbered, Pulsing.
Hotspot size	hotspot_size	Slider	28	Range: 16–48 step 4.
Hotspot color	hotspot_color	Color	#FFFFFF
Hotspot icon color	hotspot_icon_color	Color	#1F1F1F
Open card on	open_on	Dropdown	click	Hover never fires on touch devices, so tapping always works as well. Options: Click or tap, Hover (desktop).
Card width	card_width	Slider	260	Range: 180–320 step 20.
Product card
Show vendor	show_vendor	On/off	Off
Show price	show_price	On/off	On
Show rating	show_rating	On/off	Off
Show badges	show_badges	On/off	Off
Show add to cart	show_quick_add	On/off	On	Products with options open the variant picker instead.
Layout
Desktop layout	layout	Dropdown	full	Options: Image only, Image with product list beside it.
Mobile layout	mobile_layout	Dropdown	list	A list is far easier to use than small hotspots on a phone. Options: Product list below the image, Keep hotspots.
Color scheme	surface	Dropdown	background	Options: Background, Surface, Primary, Accent.
Make section full width	full_width	On/off	Off
Enable side padding	side_padding	On/off	On
Top padding	padding_top	Slider	56	Range: 0–120 step 4.
Bottom padding	padding_bottom	Slider	56	Range: 0–120 step 4.
Top padding (mobile)	padding_top_mobile	Slider	32	Range: 0–120 step 4.
Bottom padding (mobile)	padding_bottom_mobile	Slider	32	Range: 0–120 step 4.

Blocks

Product hotspot (hotspot)

Setting	ID	Type	Default	Notes
Product	product	Product picker
Custom title	label	Text		Overrides the product title on the card. Leave blank to use the product's own.
Horizontal position	x_position	Slider	38	Range: 0–100 step 1.
Vertical position	y_position	Slider	45	Range: 0–100 step 1.

Text hotspot (note)

Setting	ID	Type	Default	Notes
Heading	heading	Text	About this piece
Text	text	Rich text
Link	link	Link
Link label	link_label	Text	Find out more
Horizontal position	x_position	Slider	64	Range: 0–100 step 1.
Vertical position	y_position	Slider	58	Range: 0–100 step 1.

Maximum blocks: 12

Presets

Available in Add section: Shoppable image