This is a live demo — click the dots. The same popup opens on a published PageFly page.
Two ways to put a section on a PageFly page
A Hotspot Studio section is built in the app — the photo, the hotspots, the products, the popup style — and then shown wherever you place it. A PageFly page has two places for one, and we tested both on a published PageFly page: the section renders, popups open, and add to cart works on desktop and phones.
- The embed snippet in an HTML/Liquid element. The quickest way: copy the section’s snippet in the app, paste it into PageFly’s HTML/Liquid element, publish. Everything happens in PageFly.
- PageFly’s App blocks element. For when you’d rather manage the section from Shopify’s theme editor: you drop the App blocks element into the page in PageFly, then add the Hotspot Studio block to it in the theme editor.
Either way 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 PageFly page shows the change without being republished.
Shop the Look on a PageFly page, in five steps
1. Publish a section in Hotspot Studio
Install Hotspot Studio from the App Store — the free plan is enough for your first shoppable image. Create a section, upload your lifestyle photo and drag a hotspot onto each product, or let AI suggest the pins and approve them one by one. Pick a style preset, then publish the section: only published sections 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. It’s two short lines — a
<div data-hs-embed="12"></div> and a script tag — and the
number is this section’s ID. The same window shows whether Embeds in pages &
posts is on in your theme; if it isn’t, click Turn on in theme editor and
press Save there. It’s a one-time switch per theme, and it keeps the section
showing even when a page builder inserts the snippet in a way that stops its script
line from running.
3. Add an HTML/Liquid element in PageFly
Open the page in PageFly’s editor and click the Elements icon in the left toolbar. Stay on the PageFly tab and drag HTML/Liquid from the Basic group to where the section should appear — a full-width row suits a lifestyle photo best.
4. Paste the snippet
Select the element and click Open code editor. Paste the snippet and click Done — PageFly doesn’t keep code you leave without clicking it.
5. Publish and check the live page
Click Publish. PageFly’s canvas doesn’t run embedded code — the element’s settings say “Embedded Liquid code only works on the live page” — so open the page with View live, tap a dot and try add to cart.
Prefer the theme editor? Use PageFly’s App blocks element
The App blocks element is PageFly’s 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 PageFly: open Elements and drag the App blocks element from the App blocks group to where the section should go. Publish the page — the slot reaches your theme when the page is published.
In the theme editor: select the element in PageFly and click Go to theme editor. In the page’s template, open the PageFly section (its name starts with “PageFly”), 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.
The block is part of the theme template, so it stays put when you edit and republish the page in PageFly — we checked. The theme editor’s preview shows it too, which the PageFly canvas can’t.
Tips that matter in PageFly
Judge it on the live page
PageFly’s canvas shows the snippet as an empty element. Check the published page — or, on the App blocks route, the theme editor’s preview.
Edit in the app, not in PageFly
Hotspots, products and popup style live in Hotspot Studio. Save there and every page showing the section updates — no PageFly republish needed.
Several sections, one page
Paste each section’s snippet into its own HTML/Liquid element. The script and styles load once per page, however many sections it shows.
Keep the app embed on
“Embeds in pages & posts” keeps a pasted section showing when a builder inserts code that wouldn’t run on its own. Switch it on once per theme.
Crop for phones
Most shoppers will open the page on a phone. Give the section a tighter mobile image with its own hotspot positions instead of shrinking the desktop shot.
Count what it sells
Views, clicks, adds to cart and orders are tracked for a section on a PageFly page exactly as for one in your theme, so you can see which photo earns its place.
PageFly + Hotspot Studio, answered
Does Hotspot Studio work with PageFly?
Yes. We tested it on a published PageFly page through both the HTML/Liquid element and the App blocks element: the section renders, popups open, and add to cart works on desktop and phones.
Why is the HTML/Liquid element empty in the PageFly editor?
PageFly doesn’t run embedded code on its editing canvas — the element’s settings say “Embedded Liquid code only works on the live page.” Publish the page and open it live to see the section.
Do I have to republish the PageFly 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. Only published sections are shown.
Should I use the HTML/Liquid element or the App blocks element?
The HTML/Liquid element is the quickest: everything happens in PageFly. The App blocks element suits you if you’d rather work in the theme editor: the block lives in the page’s theme template, can pick its section from the page assignments you set in the app, and stays in place when you republish the page in PageFly.
Can one PageFly page show several sections?
Yes. Add one HTML/Liquid element per section and paste each section’s own snippet. The script and styles load once, however many sections the page shows.
Does add to cart open my theme’s cart drawer on a PageFly page?
It follows the store-wide cart setting in Hotspot Studio, the same as on theme pages: open the theme’s cart drawer, reload the page, go to the cart page, or do nothing.
Shop the Look in GemPages
Two tested routes for GemPages pages: the Custom Code element, or GemPages’ Shopify App 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 PageFly pages shoppable
Free plan included, paid plans from $7.99/mo with a 7-day trial — and the photo already on your PageFly page is enough to start.