Shoppable hero
sections/shoppable-hero.liquid · section type shoppable-hero · max 6 blocks
Used on templates: index
Presets: Shoppable hero
Section settings
Image
| Setting | ID | Type | Default | Notes |
|---|---|---|---|---|
| Image | image | image_picker | — | — |
| Mobile image | mobile_image | image_picker | — | Optional<br>Shown when image |
| Text protection on desktop | text_protection | range | 20 | Darkens your image to ensure your text is readable<br>Range 0–100 %, step 5 |
Content
| Setting | ID | Type | Default | Notes |
|---|---|---|---|---|
| Preheading | preheading | text | Shop the look | — |
| Heading | heading | text | Made to go together | — |
| Heading size | heading_size | select | lg | Options: Small · Medium · Large |
| Text | text | text | Pieces that elevate each other, no matter how you style them. Designed to feel effortless every time. | — |
| Button label | button_label | text | Shop now | — |
| Button link | button_link | url | — | Shown when button_label |
| Button | color_accent | color | transparent | — |
| Text alignment | text_alignment | text_alignment | left | — |
| Text position | text_position | select | bottom-left | Options: Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right |
Hotspots
| Setting | ID | Type | Default | Notes |
|---|---|---|---|---|
| Hotspot icon style | hotspot_style | select | plus | Options: Dot · Plus · Tag · Bag |
| Hotspot color | hotspot_color | color | #FFFFFF | — |
Blocks
Hotspot
Block type hotspot
| Setting | ID | Type | Default | Notes |
|---|---|---|---|---|
| Product | product | product | — | — |
| Vertical position | vertical_position | range | 50 | Range 0–100 %, step 1 |
| Horizontal position | horizontal_position | range | 50 | Range 0–100 %, step 1 |
| Mobile vertical position | vertical_position_mobile | range | 50 | Range 0–100 %, step 1<br>Shown when mobile_image != blank |
| Mobile horizontal position | horizontal_position_mobile | range | 50 | Range 0–100 %, step 1<br>Shown when mobile_image != blank |