Each hotspot opens a frosted glass card right where it sits, connected by a thin leader line. On phones the card turns into a glass sheet from the bottom.
In your theme code editor (Online Store → ⋯ → Edit code), click the sections folder, then “New File”, name it and hit Enter.
02
Paste the code
In the file that just opened, paste the code below. Then hit Save (top right corner).
Note: Shopify shows no confirmation when a section saves – that’s normal.
03
Add it in the theme editor
Saved? Then reload the theme editor – otherwise the new section sometimes doesn’t show up. After that: Edit theme → Add section → . Everything else is in the sidebar – the Docs below explain every setting.
Code
One file. Copy it, paste it, done.
sections/werk-hotspot-popover.liquid
Locked
{%- comment -%} werk · Hotspot Popover · v1.5.0 · werk.build/license – do not remove {%- endcomment -%}{%- liquid assign s = section.settings # Demo images and fonts load from the werk demo store's Files (Shopify CDN), so the section looks the same in any store. assign werk_cdn = 'https://cdn.shopify.com/s/files/1/0954/8303/5932/files/' assign demo_hero = 'werk-hotspot-popover-hero.jpg' | prepend: werk_cdn | append: '?v=1' assign demo_ratio = 1.7921 assign demo_w = 2000 assign demo_h = 1116 assign demo_alt = 'Waxed canvas roll-top backpack with a steel bottle and a folded jacket on a boulder in the mountains' assign demo_cards = 'werk-hotspot-popover-roll-top.jpg,werk-hotspot-popover-buckle.jpg,werk-hotspot-popover-laptop-sleeve.jpg,werk-hotspot-popover-canvas.jpg' | split: ',' assign demo_pack = 'werk-hotspot-popover-products.jpg' | prepend: werk_cdn | append: '?v=1'
2657 lines · Liquid, CSS & vanilla JS
Free – just add your email
Every section is free during launch. Enter your email once and copy any code you like.
Edit theme → Home page, or the product, collection or landing page template you want the section on.
2
Add the section
Add section → . The preset brings six blocks on the demo backpack – four Feature and two Product – and runs edge to edge without padding.
3
Pick your image
Image → select or upload your picture. Set its focal point in the Shopify admin if the important part isn’t in the middle.
4
Place the hotspots
Click a block – its card opens – and move Position X and Y until the dot sits on the detail. Add or remove blocks, up to eight.
5
Fill the cards
Feature: heading, text, card image, link. Product: pick the product – image, price and add to cart come with it. Then save and look at it once on your phone.
The card opens at the hotspot
The card grows out of the hotspot and blurs the image behind it. It takes the first side with room – above, below, right, left – and stays inside the image; each block can also be fixed to one side. Tap another hotspot and the card moves there. Tap the image, the same hotspot again or press Esc to close; ← and → step through the hotspots.
Closed · the card grows out of the hotspot · open
Feature or product
Every hotspot is a block. A Feature tells a story with a picture, a heading, a text and a link. A Product shows a Shopify product with its image, price and a working add to cart.
FeatureProduct
After “Add to cart”
The label rolls to a spinner, then to a check with “Added”, and a small dot flies to the cart icon. No cart drawer opens: the theme hears about the new item, so cart counts that listen update. After a moment the button is back to Add to cart.
Add to cart → loading → ✓ Added
Hotspots stay in the frame
When the frame crops your image – another ratio, a share of the screen, a phone – the image slides so every hotspot stays inside, starting from its focal point. A hotspot that still doesn’t fit is hidden; on phones the arrows in the sheet still reach it.
Good to know
The theme editor opens the card
Select a block in the sidebar and its card opens on the preview – handy while you move the dot or try a card position. Deselect it and the card closes.
Keyboard and screen readers
Every hotspot is a button with its number and label. Enter opens it, ← and → move on, Esc closes and puts the focus back on the hotspot.
Demo content until you pick your own
Without an image the section shows the demo backpack. Product blocks without a product show a demo product – its Add to cart opens your catalogue and adds nothing.
Words in the section
Add to cart, Added, Sold out and View product are English and can’t be changed yet. Everything else is yours – labels, headings, texts, links.
Cart counts
After adding, the section sends two cart events. Horizon listens and updates right away; in Dawn and the themes built on it the section refreshes the cart count and drawer itself. Other themes catch up on the next page.
shopify:cart:lines-update · cart:refresh
Look
Default · Glass
GlassThe glass card shows the block's image on top.
LensA round magnifier instead of the photo: a live crop of the main image, zoomed in on the hotspot. No extra images needed – block images are not shown in this look. Good for stores without detail shots.
Lens zoom
Default · 200 %
150–300 %. How far the lens zooms into the main image. Lens look only. The lens loads a larger version of the main image the first time a card opens.
Only visible in the Lens look
Image
Shows the demo backpack until you pick your own. Upload your own for the best speed and privacy. The crop starts at the image’s focal point – set it in the Shopify admin when you open the image.
Height
Default · Image ratio
Image ratioThe frame keeps a fixed shape, one for desktop and one for tablet and phone.
Share of screenThe frame takes a part of the screen height, whatever the image’s shape.
Image ratio · desktop
Default · 16:9
From 990 px up. 16:9, 21:9, 3:2, 4:3 or Original – the shape of your image. Only shows with Height: Image ratio.
21:9 · 4:3
Image ratio · tablet & mobile
Default · 4:3
Below 990 px. Original, 4:3, 1:1 or 4:5. Narrow shapes crop the sides – the hotspots stay in the frame.
Fit to screen height
Default · On
Keeps the image within one screen, below a sticky header. When that would cut hotspots off, the image grows just enough to show them.
Height · desktop / Height · tablet & mobile
Default · 80 % / 60 %
30–100 % of the screen below a sticky header, padding included, never lower than 320 px. Only shows with Height: Share of screen. The image crops around its focal point.
Full width on mobile
Default · Off
Below 750 px. Off: the image sits inset with a 16 px margin and rounded corners. On: edge to edge.
Off · On
Placing a hotspot
Position X and Y are measured in % of the image from its top left corner, so a hotspot stays on its detail at every size and crop. Hotspots right of 70 % show their label on the left.
Feature
A detail of the image: picture, heading, text and a link.
SettingWhat it doesDefault
LabelNext to the number above the heading, the label on hover and what screen readers hear.Detail
Position X / Position YWhere the hotspot sits, in % of the image.50 %
Card imageThe picture at the top of the card. Empty = a text-only card.Empty
HeadingThe big line in the card.A detail worth a closer look.
TextUp to three lines, two on phones.Tell the story behind …
Link label / LinkA text link under the text. Shows when both are filled.Empty
Card position / Card distanceWhere the card opens – see below.Auto · 56 px
Product
A Shopify product with its image, price and add to cart.
SettingWhat it doesDefault
ProductThe product. Empty = a demo product.Empty
LabelNext to the number and on hover. Empty = the product title.Empty
Position X / Position YWhere the hotspot sits, in % of the image.50 %
Image overrideAnother picture for the card. Empty = the product’s featured image.Empty
Short textA line under the price. Phones leave it out.Empty
Show add to cartOff: no button, the card only informs. Sold-out products show a disabled Sold out button.On
Card position / Card distanceWhere the card opens – see below.Auto · 56 px
Card position
Default · Auto
Per block. Where the card opens next to its hotspot, from 750 px up – phones always get the sheet.
AutoThe first side with room: above, below, right, left.
Above / Below / Right / LeftAlways this side, even without room. Keep the hotspot far enough from that edge.
AboveThe line runs up
BelowThe line runs down
RightA short line to the side
LeftA short line to the side
Card distance
Default · 56 px
Per block, 24–240 px. The length of the line between the hotspot and a card above or below it – pull the card away from what it describes. To the side the line stays short.
Show label on hover
Default · On
A small glass pill with the label next to the hotspot while the mouse rests on it – and on keyboard focus. Touch screens skip it.
Jacket
Open first hotspot on load
Default · Off
Opens hotspot 01 as soon as the section comes into view. From 750 px up – on phones it would cover the page with the sheet.
Animations & easing
Default · On · werk Signature
Off: everything switches without movement. Visitors who turned on “reduce motion” on their device get the same. Easing sets the feel of every movement.
werk SignatureSlow start, soft landing
SmoothEven and quiet
BounceA small overshoot
SnapQuick start, gentle stop
GlideSlow in, slow out
Seed entrance
Default · On
When the section scrolls into view, a dot appears in the middle and the hotspots grow out of it to their places. Off: they fade in one after another.
A dot in the middle · the hotspots grow out of it · in place
Fonts
Default · Own fonts
Use theme fonts swaps every font at once – or leave it off and swap each one with its own URL. Empty keeps werk’s font.
Use theme fontsOff: Onest for text and headings, Geist Mono for labels and numbers. On: your theme’s heading and body fonts.
Self-hosted font URL (.woff2)Replaces Onest. Upload the file to Content → Files and paste its URL. Our font loads from werk’s Shopify CDN until then.
Label font URL (.woff2)Replaces Geist Mono – the small labels and numbers. Upload the file to Content → Files and paste its URL.
Colors
Default · Own colors
Use theme colors takes the text and background of the page around the section and hides the fields below; muted text, the glass and the buttons are mixed from them. Hotspot always keeps its own colour. Button and Button text give the buttons their own colours – empty keeps the design.
1Background#FFFFFFAround the image – with padding, and on phones when the image is inset
2Text#1C1B1AHeadings, prices, the counter
3Text muted#6F6B65Number and label, texts
4Card background#F5F3EFThe glass card, the sheet and the hover labels – mixed with the blurred image behind
5Buttons & active hotspot#1C1B1AAdd to cart, the next arrow in the sheet
6Button text#FFFFFFText and icons on those buttons
7Hotspot#FFFFFFDots and rings on the image
Buttons
Default · Clean
Use theme buttons gives Add to cart your theme’s style – then only the text links follow the style below. Button style sets how buttons and text links react on hover.
Space above and below the section, 0–160 px. The preset starts at 0 – edge to edge. Scales down on smaller screens.
Side padding
Default · Match theme
Match theme (the default) lines the section up with your theme's page margin – in Horizon the same edge as header and footer. Themes without one, like Dawn, keep the werk edge. werk default always uses the werk edge, Custom takes your own values in px (desktop and tablets / phones), None runs the content to the edge. This section runs edge to edge as designed, so Match theme keeps it that way; Custom and None still apply.
Desktop · card at the hotspot
Tablet · narrower card
Phone · glass sheet
TabletBelow 990 px the card gets narrower (280 px) and the image uses Image ratio · tablet & mobile.
PhoneBelow 750 px the card becomes a glass sheet at the bottom of the screen, with ×, the counter and arrows.
ClosingDrag the sheet down, tap outside or press ×.
SwipeSwipe the sheet sideways for the next or previous hotspot.
ImageInset with rounded corners – or edge to edge with Full width on mobile.
TouchNo hover labels. The first tap opens the card.
AI label
Using an AI-generated picture? Switch on AI label under that picture and pick a corner. The text and the look – pill, info dot or upright along the edge – are set once for the whole section, under AI label. Product cards get one only for an own image, not for the product's.
I see a backpack instead of my image.
That’s the demo image – pick your own under Image.
The card covers the detail it talks about.
Give that block a Card position on the other side, or raise its Card distance so the card moves further away.
The card runs over the edge of the section.
A fixed Card position is kept even without room. Switch the block back to Auto, or move the hotspot further from that edge.
The text in the card is cut off.
The card shows up to three lines of text, two on phones; product cards on phones leave the short text out. Keep it short and link to the full story.
A hotspot is missing.
It falls outside the crop and can’t be moved in – with narrow ratios on phones, for example. Pick a wider ratio, turn on Fit to screen height, or move the hotspot further in.
Add to cart opens my catalogue instead.
The block has no product yet, so it shows a demo product. Pick a product in the block.
Add to cart adds the wrong size.
The button adds the first available variant. Turn off Show add to cart for products with options.
The cart count doesn’t change after adding.
Horizon and Dawn-based themes update right away. Other themes may not listen to the cart event – the item is in the cart, the count updates on the next page.
1.5.012 Oct 2026
NewSide padding. Match theme (the default) lines the section up with your theme's page margin – in Horizon the same edge as header and footer. Themes without one, like Dawn, keep the werk edge. werk default always uses the werk edge, Custom takes your own values in px (desktop and tablets / phones), None runs the content to the edge. This section runs edge to edge as designed, so Match theme keeps it that way; Custom and None still apply.
1.4.011 Oct 2026
NewAI label per picture (EU AI Act). Under every own picture and video a switch with the corner; the text and the look – pill, info dot that opens on hover, or upright along the edge – are set once under AI label. Off by default, nothing changes until you switch it on. Product and collection pictures from Shopify never get one.
1.3.06 Oct 2026
NewLabel font URL (Fonts) – swap Geist Mono, the small labels and numbers, for your own .woff2. With Self-hosted font URL every font can now be swapped on its own; Use theme fonts still swaps all of them.
1.2.06 Oct 2026
NewButton and Button text colours (Colors). Empty = as designed – nothing changes until you pick one. Hidden while Use theme colors or Use theme buttons is on.
1.1.32 Oct 2026
NewSame version as the rest of the family (fix in Hotspot Panel · Drawer on phones). Nothing changes here.
1.1.22 Oct 2026
NewSame version as the rest of the family (fix in Hotspot Panel · Drawer on phones). Nothing changes here.
* Built for Online Store 2.0 and tested in Shopify's Horizon and Dawn themes. Heavily customised or older themes can still clash with it – if something looks off, write us and we'll take a look.
Background#FFFFFFAround the image – with padding, and on phones when the image is insetText#1C1B1AHeadings, prices, the counterText muted#6F6B65Number and label, textsCard background#F5F3EFThe glass card, the sheet and the hover labels – mixed with the blurred image behindButtons & active hotspot#1C1B1AAdd to cart, the next arrow in the sheetButton text#FFFFFFText and icons on those buttonsHotspot#FFFFFFDots and rings on the image
