Tap a hotspot and a panel slides in inside the section while the image zooms to the detail. On phones the panel becomes a bottom sheet you can drag away.
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-panel.liquid
Locked
{%- comment -%} werk · Hotspot Panel · 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-image-hotspot-hero.jpg' | prepend: werk_cdn | append: '?v=1' assign demo_ratio = 1.7921 assign demo_w = 2000 assign demo_h = 1116 assign demo_alt = 'Oak turntable with headphones and a record on a travertine shelf' assign demo_cards = 'werk-image-hotspot-speed-dial.jpg,werk-image-hotspot-platter.jpg,werk-image-hotspot-tonearm.jpg,werk-image-hotspot-plinth.jpg' | split: ',' assign demo_pack = 'werk-image-hotspot-products.jpg' | prepend: werk_cdn | append: '?v=1'
2570 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 turntable – four Feature and two Product blocks.
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.
A tap opens the panel
The panel slides in inside the frame – it never covers the page. The image zooms towards the hotspot and keeps it in the free part next to the panel; the other hotspots dim. Tap the image or press Esc to close, and the camera glides back.
Closed · the panel slides in, the camera glides · 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
From hotspot to hotspot
The arrows in the panel go to the next and previous hotspot, the counter rolls to the new number – 02 / 06. Hovering an arrow makes the hotspot it leads to pulse. With the keyboard: ← and →, Esc closes. On phones: swipe the card sideways.
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 but stays reachable with the arrows.
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. Deselect it and the card closes.
Keyboard and screen readers
Every hotspot is a button with its number and label. Enter opens it, Esc closes and puts the focus back on the hotspot. Screen readers hear the new number on every change.
Demo content until you pick your own
Without an image the section shows the demo turntable. 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 · Classic
ClassicThe panel slides in from the side; the camera zooms to the detail next to it.
DrawerA full-width strip rises from the bottom: card image, text, and on the right add to cart and the arrows. The image zooms so the spot sits centred above it – spots near the bottom get a little more zoom so they stay visible. Made for wide, short sections where a side panel gets cramped. On phones the drawer opens under the image, inside the section, and pushes the page down instead of covering it. Card position has no effect here.
Image
Shows the demo turntable 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.
Corner radius
Default · 24 px
0–40 px. Rounds the image and the panel together. Phones always get the rounded sheet.
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
LabelSmall label 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.
TextOne or two sentences. Long text scrolls inside the card.Tell the story behind …
Link label / LinkA text link under the text. Shows when both are filled.Empty
Product
A Shopify product with its image, price, add to cart and a View product button.
SettingWhat it doesDefault
ProductThe product. Empty = a demo product.Empty
LabelSmall label above the name 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.Empty
Show add to cartOff: only View product. Sold-out products show a disabled Sold out button.On
Zoom to hotspot
Default · 115 %
100–140 %. How far the camera moves in on the open hotspot. 100 % = no zoom, the image only slides.
100 % · 140 %
Card position
Default · Right
RightThe panel slides in from the right.
LeftFrom the left; the camera keeps the hotspot in the free part on the right.
Only visible in the Classic look
Right · Left
Show label on hover
Default · On
A small pill with the label next to the hotspot while the mouse rests on it – and on keyboard focus. Touch screens skip it.
Tonearm
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 panel 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 – the padding
2Text#1C1B1AHeadings, prices, the counter
3Text muted#6F6B65Labels, texts
4Card background#F5F3EFThe panel and the sheet
5Buttons & active hotspot#1C1B1AAdd to cart, next arrow, the open hotspot
6Button text#FFFFFFText and icons on those buttons
7Hotspot#FFFFFFDots, rings and labels 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. 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.
Desktop · panel in the frame
Tablet · narrower panel
Phone · bottom sheet
TabletBelow 990 px the panel gets narrower (340 px) and the image uses Image ratio · tablet & mobile.
PhoneBelow 750 px the card opens as a sheet from the bottom. The page scrolls so the image stays visible above it.
ClosingDrag the grabber or the card image down, tap outside or press ×.
SwipeSwipe the card sideways for the next or previous hotspot.
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 turntable instead of my image.
That’s the demo image – pick your own under Image.
A hotspot is missing.
It falls outside the crop and can’t be moved in – with narrow ratios on phones, for example. It is still reachable with the arrows. Pick a wider ratio, turn on Fit to screen height, or move the hotspot further in.
The hotspot sits next to the detail on phones.
Check Position X and Y on desktop first – they are in % of the image and hold at every size. If the crop cuts the detail, set the image’s focal point.
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 – View product leads to the page.
The card text is cut off.
Long text scrolls inside the card; in very low panels the card image hides to make room. Shorten the text or give the section more height.
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.
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
NewDrawer on phones: the arrow row sits in place again (1.1.2 shifted it left and up, the counter was cut off).
1.1.22 Oct 2026
NewDrawer on phones: the arrows work again on feature cards – the card's box lay over them and took the taps.
* 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 – the paddingText#1C1B1AHeadings, prices, the counterText muted#6F6B65Labels, textsCard background#F5F3EFThe panel and the sheetButtons & active hotspot#1C1B1AAdd to cart, next arrow, the open hotspotButton text#FFFFFFText and icons on those buttonsHotspot#FFFFFFDots, rings and labels on the image
