This is a live demo — click the dots. The same popup opens on a published GemPages page.
How Hotspot Studio fits into a GemPages page
Sections are built in Hotspot Studio — the photo, the hotspots, the products, the popup style — and shown wherever you place them. A GemPages page has two places for them: the Custom Code element, where you paste the section’s embed snippet, and GemPages’ Shopify App element, which holds our app block from Shopify’s theme editor. We tested both on a published GemPages 7 page: popups open, add to cart works and the theme’s cart drawer opens, on desktop and phones.
One thing not to do: don’t add Hotspot Studio to a GemPages page with Add section in Shopify’s theme editor. GemPages rebuilds the page’s theme template every time you click Publish, and sections added there from outside GemPages disappear with it — we tried. Both routes keep the section inside the page, so it survives every republish.
And it stays one section in the app: change a hotspot, swap a product or restyle the popup in Hotspot Studio, and once you save, the GemPages page shows the change without being republished.
Shop the Look on a GemPages page, in five steps
1. Publish a section in Hotspot Studio
Install Hotspot Studio from the App Store — the free plan covers your first shoppable image. Create a section from your lifestyle photo and pin each product in it, by hand or with AI suggestions you approve. Choose a style preset and publish the section: unpublished sections don’t show on the storefront.
2. Copy its embed snippet
In the section editor, open Where it’s shown, click Embed in page or blog post
content, then Copy snippet. You get two short lines — a
<div data-hs-embed="12"></div> and a script tag — where the
number is this section’s ID. If the window says Embeds in pages & posts is off
in your theme, click Turn on in theme editor and press Save there. You only
do that once per theme; it keeps pasted sections showing even when a builder inserts the
snippet in a way that stops its script line from running.
3. Add a Custom Code element
Open the page in the GemPages editor and click the + at the top of the left sidebar. Switch to Element and drag Custom Code from the Advanced group to where the section should appear — or type “custom” into the search box to find it faster.
4. Paste the snippet
Select the element and open its Settings tab. Use the button under Code to open the code editor, paste the snippet into the HTML tab and click Save.
5. Publish and check the live page
Click Publish. In the editor the element only says “Publish the page to see the content” — GemPages doesn’t run embedded code on its canvas — so open the live page, tap a dot and try add to cart.
Prefer the theme editor? Use GemPages’ Shopify App element
The Shopify App element is GemPages’ slot for blocks from other apps. The block itself lives in Shopify’s theme editor, so you set it up there instead of pasting code.
In GemPages: open the Apps panel from the left sidebar — the element isn’t in the + Elements list — and search for “Shopify App”. Drag Shopify App from the Integrated with all apps group to where the section should go, then Save and Publish the page: the slot reaches your theme when the page is published. The element is on every GemPages plan, Free included.
In the theme editor: select the element in GemPages and click Open Shopify editor in its settings. In the page’s template, open the GemPages section that holds the element — GemPages names them Section 1, Section 2 and so on, in page order — click Add block, switch to Apps and pick Hotspot Studio. Tell the block which section to show: assign this page to the section in the app, under Where it’s shown, or type the section’s number into the block’s Experience ID. Click Save.
Every GemPages section offers Add block, but the block only shows in the one that holds the element; the theme editor’s preview tells you straight away. The block is part of the theme template, so it stays put when you edit and republish the page in GemPages — we checked.
Tips that matter in GemPages
Skip Add section in the theme editor
GemPages rewrites its page templates on every Publish, and sections added from the theme editor go with them. Keep Hotspot Studio inside the page: in Custom Code or the Shopify App element.
Check the live page
GemPages’ canvas shows a placeholder where the section goes. Publish and open the live page to see it, tap the dots and test the cart — or, on the Shopify App route, use the theme editor’s preview.
Edit in the app, not in GemPages
Hotspots, products and popup style live in Hotspot Studio. Save there and the page updates — no GemPages republish needed.
One element per section
Want two looks on one page? Add a Custom Code element for each and paste each section’s own snippet. The script and styles still load only once.
Switch on the app embed
“Embeds in pages & posts” is the safety net for pasted sections. It takes one Save in the theme editor and covers every page in that theme.
Give phones their own crop
Landing pages live on phones. Upload a tighter mobile image with its own hotspot positions so dots sit on the products at every size.
GemPages + Hotspot Studio, answered
Does Hotspot Studio work with GemPages?
Yes, on GemPages pages published to your theme, in two ways: paste the section’s embed snippet into a Custom Code element, or add the Hotspot Studio block to GemPages’ Shopify App element in the theme editor. We tested both on a GemPages 7 page: the section renders, popups open, and add to cart opens the theme’s cart drawer, on desktop and phones.
Why does the Custom Code element say to publish the page to see the content?
GemPages doesn’t run embedded code in its editor. Publish the page and open it live: the section, its popups and add to cart work there.
Can I add the Hotspot Studio block to a GemPages page in the theme editor?
Yes, inside GemPages’ Shopify App element: add the element in GemPages and publish, then add the Hotspot Studio block to the section that holds it, and it stays when you republish the page. Don’t use Add section between GemPages sections instead: GemPages rebuilds the page’s theme template every time you click Publish, and sections added that way disappear — we tried both.
Should I use the Custom Code element or the Shopify App element?
Custom Code is the quickest: everything happens in GemPages. The Shopify App element suits you if you’d rather manage the section from the theme editor, whose preview shows it; GemPages’ own canvas shows only a placeholder either way. Shopify App sits in the Apps panel of GemPages’ left sidebar, not in the Elements list, and it’s on every GemPages plan.
Do I need to republish the GemPages page after changing the section?
No. The page loads the section from Hotspot Studio every time it’s viewed, so the changes you save in the app show up on their own.
Does it work on GemPages headless pages?
No. Headless pages are served outside your Shopify theme, where the app’s storefront code doesn’t run. Build the page as a regular GemPages page published to your theme.
Shop the Look in PageFly
Two tested routes for PageFly pages: the HTML/Liquid element, or PageFly’s App blocks element with the theme editor.
Shop the Look in EComposer
Five steps to a shoppable photo on an EComposer page with its Code element.
Shop the Look for Shopify
The theme-agnostic guide: why looks lift average order value and what a converting section needs.
Make your GemPages pages shoppable
Free plan included, paid plans from $7.99/mo with a 7-day trial — and the photo already on your GemPages page is enough to start.