A circle grows out of the tapped hotspot and fills the whole section with the detail image, huge type and an outline number. A minimap and a rolling counter keep your place; below 990 px it opens full screen.
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-portal.liquid
Locked
{%- comment -%} werk · Hotspot Portal · 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-portal-hero.jpg' | prepend: werk_cdn | append: '?v=1' assign demo_ratio = 1.7921 assign demo_w = 2000 assign demo_h = 1116 assign demo_alt = 'Graphite sports car with a large carbon rear wing in a white studio' assign demo_cards = 'werk-hotspot-portal-light-bar.jpg,werk-hotspot-portal-cockpit.jpg,werk-hotspot-portal-wheel.jpg,werk-hotspot-portal-intake.jpg,werk-hotspot-portal-wing.jpg' | split: ',' assign demo_pack = 'werk-hotspot-portal-products.jpg' | prepend: werk_cdn | append: '?v=1'
2639 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 seven blocks on the demo sports car – five Feature and two Product – dark colours and no 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 portal opens – and move Position X and Y until the chip sits on the detail. Add or remove blocks, up to eight.
5
Give every detail a picture
Card image in each Feature block – a close-up fills the portal. Product blocks take the product’s image. Then save and look at it once on your phone.
A circle opens from the hotspot
The circle opens from the chip you tapped, with a thin light rim along its edge. The title rises word by word, the rest follows. Close with × or Esc: the circle shrinks back into its chip, and the chip catches it with a small bounce.
Hover shows the label · the circle grows out of the chip · open
Feature or product
A Feature fills the portal with its card image; the text sits bottom left on a shade. A Product puts its picture on the right and name, price and Add to cart on the left.
FeatureProduct
No card image? The portal zooms in
A Feature without a card image zooms into your main image, right at the hotspot. Good for details that are already sharp in the big picture.
With card imageWithout – zoom into the image
From detail to detail
The arrows go to the next and previous hotspot; the counter and the big number roll to the new number. The dots on the minimap jump straight to a hotspot, and hovering an arrow lights up the dot it leads to. With the keyboard: ← and →, Esc closes. On touch screens: swipe 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.
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 chip stays inside, starting from its focal point. A chip that still doesn’t fit is hidden but stays reachable with the arrows and the minimap.
Good to know
White type on your background
The portal’s type, arrows and close button are always white. Keep Background dark enough for them – the preset uses ink.
The theme editor opens the portal
Select a block in the sidebar and its portal opens on the preview. Deselect it and the portal closes.
Keyboard and screen readers
Every chip is a button with its number and label. Enter opens it, ← and → move on, Esc closes and puts the focus back on the chip. Screen readers hear the new number on every change.
Demo content until you pick your own
Without an image the section shows the demo car. 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 · Noir
NoirThe portal opens dark with white type.
DaylightThe light version: the portal and its shade take the background color, type is dark, the outline number gets its own color, the nav is white glass. The Daylight preset brings matching colors (canvas, ink, orange number). With Use theme colors the portal takes the lighter of the page's background and text color.
Big number
Default · #F2571F
Color of the outline number. Daylight only.
Only visible in the Daylight look
Image
Shows the demo car 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. The minimap shows it too.
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. The big type follows the height, so a low frame gets smaller type.
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 chips stay in the frame.
Fit to screen height
Default · On
Keeps the image within one screen, below a sticky header. When that would cut chips 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. The portal opens full screen either way.
Off · On
Placing a hotspot
Position X and Y are measured in % of the image from its top left corner, so a chip stays on its detail at every size and crop. Chips right of 70 % open their label to the left.
Feature
A detail of the image: a close-up with a big heading, a text and a link.
SettingWhat it doesDefault
LabelThe chip’s label on hover and what screen readers hear.Detail
Position X / Position YWhere the chip sits, in % of the image.50 %
Card imageFills the portal. Empty = the portal zooms into the main image at the hotspot.Empty
HeadingThe huge line. Headings over 32 characters get a smaller size.A detail worth a closer look.
TextUp to four lines.Tell the story behind …
Link label / LinkA text link under the text. Shows when both are filled.Empty
Product
A Shopify product: its picture on the right, name, price and Add to cart on the left.
SettingWhat it doesDefault
ProductThe product. Empty = a demo product.Empty
LabelThe chip’s label on hover, next to the price. Empty = the product title.Empty
Position X / Position YWhere the chip sits, in % of the image.50 %
Image overrideAnother picture for the portal. Empty = the product’s featured image.Empty
Short textUnder the price, up to four lines.Empty
Show add to cartOff: only View product. Sold-out products show a disabled Sold out button.On
Text shade
Default · 70 %
0–85 %. Darkens the detail image behind the text with Background, from the left and the bottom – so white type reads on light pictures too.
0 % · 85 %
Show minimap
Default · On
The whole scene small in the bottom right corner, with a dot per hotspot. Tap a dot to jump there. Off: the arrows move down into the corner.
Show big number
Default · On
The outline number of the open hotspot, top left – it rolls to the new number when you move on.
Show label on hover
Default · On
The chip grows to show its label while the mouse rests on it – and on keyboard focus. Products add their price. Touch screens skip it.
06 Driving gloves €129.00
Open first hotspot on load
Default · Off
Opens hotspot 01 as soon as the section comes into view. From 990 px up – below it the portal would take over the whole screen.
Animations & easing
Default · On · werk Signature
Off: the portal opens without the circle and 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 chips grow out of it to their places. Off: they fade in one after another.
A dot in the middle · the chips 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 the counter and the prices on the chips. 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
The portal is set in white on Background, so two colours matter here. Text, Text muted, Card background and the button colours barely show in the Portal. Button and Button text give the buttons their own colours – empty keeps the design.
1Background#1C1B1AThe portal, its shade and the product side; around the image with padding
2Hotspot#FFFFFFThe chips 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, in Background. 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 · portal fills the section
Tablet · full screen
Phone · full screen
Tablet & phoneBelow 990 px the portal opens full screen: the picture on top, the text on Background below, the minimap bottom left, the arrows bottom right.
Long textScrolls under the buttons – Add to cart never leaves the screen, on desktop too.
SwipeSwipe sideways for the next or previous hotspot. Close with ×.
ChipsA little smaller on tablets and phones.
TouchNo hover labels. The first tap opens the portal.
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 sports car instead of my image.
That’s the demo image – pick your own under Image.
The text in the portal is hard to read.
The type is always white. Pick a darker Background or raise Text shade.
The portal shows my main image, blurry and big.
The Feature block has no Card image, so the portal zooms into the main image. Add a close-up as Card image.
The heading is smaller than on the other hotspots.
Headings over 32 characters get a smaller size so they fit. The size also follows the section’s height.
The text ends after four lines.
The portal shows up to four lines. Keep it short and link to the full story.
A chip 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 and the minimap. Pick a wider ratio 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 – View product leads to the page.
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#1C1B1AThe portal, its shade and the product side; around the image with paddingHotspot#FFFFFFThe chips on the image
