§12 / SECTIONS
REF: TG–DOC–12 · REV. 1.7
Hero
sections/hero.liquid) is a full-width banner. The background is an image, a Shopify-hosted video or a YouTube/Vimeo link. Content is built from theme blocks placed over the media. Up to three product hotspots can be placed on the banner.TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
Presets
The section can be added from four presets in the Banners category:
| Preset | Differences from the section defaults | Blocks |
|---|---|---|
| Image or video banner | — | Text (label), Heading, Text, Group with two Buttons |
| Hero: Beauty showcase | Content position Center, overlay 30% | Text (label), Heading, Group with one Button |
| Hero: Luxury minimal | Content position Bottom center, Solid overlay, 25% | Heading, Button |
| Hero: Sport commerce | Height Large, Content position Top left, Solid overlay, 30% | Text (label), Heading, Group with two Buttons |
Setup
- Add Image or video banner to a template.
- Choose Background: Image or Video.
- For an image, upload Image (3000 x 1600 px recommended) and optionally Mobile image (1100 x 1500 px recommended). The mobile image is used on screens up to 749 px wide.
- For a video, upload an MP4 to Video, or paste a YouTube or Vimeo link in Or YouTube / Vimeo link. Add a Video description for screen reader users.
- Edit the content blocks.
Settings
| Setting | ID | Type | Default | Options / notes |
|---|---|---|---|---|
| Background | media_type | Select | Image |
|
| Image | image | Image | — | Also the cover for YouTube and Vimeo videos. 3000 x 1600 px recommended. |
| Mobile image | image_mobile | Image | — | Image background only. Optional. 1100 x 1500 px recommended. |
| Video | video | Video | — | Video background only. MP4 uploaded to Shopify. |
| Or YouTube / Vimeo link | video_url | Video URL | — | Video background only. Loads and plays when a shopper presses play. Used only when no Video is uploaded. |
| Video description | video_alt | Text | — | Video background only. Read by screen readers. |
| Autoplay muted and loop | autoplay | Checkbox | On | Video background only. A pause button is always shown. Autoplay stops for shoppers who prefer reduced motion. |
Layout
| Setting | ID | Type | Default | Options |
|---|---|---|---|---|
| Height | height | Select | Full screen |
|
| Content position | position | Select | Bottom left |
|
| Content width | content_width | Range 400–1600 px, step 20 | 900 px |
Heights (from assets/base.css):
| Height | Minimum height |
|---|---|
| Full screen | Viewport height minus the announcement bar minus 50 px, between 650 px and 1060 px (630–880 px on mobile) |
| Large | min(86svh, 880px) |
| Medium | min(64svh, 640px) |
| Small | min(44svh, 440px) |
Overlay
| Setting | ID | Type | Default | Options |
|---|---|---|---|---|
| Overlay opacity | overlay | Range 0–90%, step 5 | 40% | |
| Overlay style | overlay_style | Select | Gradient |
|
| Color scheme | color_scheme | Color scheme | scheme-3 |
Shoppable hotspots
Pick up to three products and place their dots on the image. Check positions on a phone, especially with a separate mobile image.
| Setting | ID | Type | Default |
|---|---|---|---|
| Products | hotspot_products | Product list | — |
| Hotspot 1 horizontal / vertical position | hotspot_1_x / hotspot_1_y | Range 0–100% | 40% / 50% |
| Hotspot 2 horizontal / vertical position | hotspot_2_x / hotspot_2_y | Range 0–100% | 55% / 40% |
| Hotspot 3 horizontal / vertical position | hotspot_3_x / hotspot_3_y | Range 0–100% | 70% / 55% |
Each hotspot is a dot that opens a small product card. Only one card in the banner is open at a time.
Blocks
The section accepts theme blocks (@theme) and app blocks (@app). Theme blocks in Tangent: Text, Heading, Button, Group, Image, Spacer, Custom Liquid.
Image cropping
The banner image fills the section with object-fit: cover. The theme positions it at 64% horizontally and centered vertically (63% on mobile). Use Mobile image when the desktop crop does not work on phones. The theme does not read the image's focal point setting directly.
Structure
1Image or video banner (sections/hero.liquid)2├── Media: <picture> / image, <video-media> (Shopify video) or <deferred-media> (YouTube/Vimeo)3│ └── Overlay (gradient or solid)4├── Hotspots (snippets/hotspot.liquid), up to 35├── Content: theme blocks, max width = Content width6└── Bottom bar: "01 — 03" index and a scroll-down buttonLast updated for Tangent 1.7