Narrivelle
Shoppable hero
Combine campaign storytelling with up to six linked product hotspots.
Home page
Create a campaign image customers can shop
Open Customize → Home page → Add section → Shoppable hero. This Home page-only section pairs hero content with Hotspot blocks that open a linked product preview.
Desktop and mobile editing
Turn on Edit mobile layout to edit the mobile image, image fit, overlay, heading size, copy position, text alignment, hero height, hotspot style, hotspot color, and text color. Turn it off to edit the desktop equivalents.
Hero content
Image and Mobile image set the campaign media. Eyebrow, Heading, Text, Link label, and Link create the visible story. The call to action appears only when both its label and link are set.
Layout and appearance
Image fit chooses Cover or Contain. Text protection darkens the copy area. Content position offers nine positions, while Text alignment is separate. Desktop and mobile heights are each set from 50vh to 100vh.
Product hotspots
Add up to six Hotspot blocks. Each block selects one Shopify product and sets horizontal and vertical positions for the current desktop or mobile editing context. The customer can open its preview and follow it to the product page.
Settings reference
Use this reference while working in the Theme Editor. Setting names match the Narrivelle controls.
| Theme Editor setting | What it controls | Use and review |
|---|---|---|
| Edit mobile layout | Switches the Theme Editor controls between desktop and mobile-specific settings. | Use it to set a deliberate compact composition; it does not hide the section on mobile. |
| Image / Mobile image / Image fit | Sets the desktop or mobile campaign image and whether it covers or contains within the hero area. | Use the matching desktop or mobile control for the editing context. |
| Text protection / Text color | Controls the dark overlay strength behind copy and the color of the hero content. | Use these together to keep campaign copy readable over the selected media. |
| Eyebrow / Heading / Heading size / Text | Creates and sizes the campaign label, headline, and supporting copy. | Mobile has its own Heading size when Edit mobile layout is enabled. |
| Link label / Link | Creates the hero call to action when both fields are present. | Use a short label with a relevant product, collection, or page destination. |
| Content position / Text alignment / Hero height | Controls copy placement, alignment, and the section minimum height. | Desktop and mobile use separate values through their matching editing context. |
| Hotspot icon style / Hotspot color | Styles all hotspot triggers as Dot, Plus, Tag, or Bag and sets their color. | Desktop and mobile use separate values through their matching editing context. |
Hotspot block
Each hotspot position is expressed as a percentage of the image area, separately for desktop and mobile.
Hotspot
Links one location on the image to one Shopify product preview.
- Settings
- Product; Horizontal position; Vertical position; Mobile horizontal position; Mobile vertical position.
- Review
- Add up to six blocks. Position fields shown depend on the Edit mobile layout context; a block without a selected product does not render.