This is a live demo — click the dots. The same popup opens on a published EComposer page.
How Hotspot Studio fits into an EComposer page
Sections are built in Hotspot Studio — the photo, the hotspots, the products, the popup style — and shown wherever you place them. On an EComposer page they go into the Code element: paste the section’s embed snippet and the section renders in its place. EComposer has no element for app blocks, so the snippet is the way in — and it’s all you need. We tested it on a published EComposer page: popups open and add to cart works on desktop and phones.
EComposer stacks its rows on top of each other, which can trap a popup under the next row. Hotspot Studio lifts the row that holds an open popup above the rows below it, so the whole product card stays visible — on phones too.
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 EComposer page shows the change without being republished.
Shop the Look on an EComposer page, in five steps
1. Publish a section in Hotspot Studio
Install Hotspot Studio from the App Store and create a section: upload the lifestyle photo, place a hotspot on every product — AI can suggest them for you to approve — and pick a style preset. Then publish it; only published sections appear 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. The snippet is a
<div data-hs-embed="12"></div> plus a script tag, and its number
is this section’s ID. If Embeds in pages & posts is off in your theme, click
Turn on in theme editor and press Save there — a one-time switch per theme
that keeps pasted sections showing even when a builder inserts the snippet in a way that
stops its script line from running.
3. Add a Code element
Open the page in the EComposer builder and click the + at the top of the left toolbar. Drag Code from the Shopify group — or search for “code” — to where the section should appear.
4. Paste the snippet
Click the element — on the canvas it reads “Custom Code, Click to edit” — and paste the snippet into its code field.
5. Publish and check the live page
Click Publish. EComposer runs JavaScript only on the published page, so the canvas keeps the placeholder; open the live page, tap a dot and try add to cart.
Tips that matter in EComposer
Keep both app embeds on
EComposer’s own app embed shows its pages; Hotspot Studio’s “Embeds in pages & posts” keeps pasted sections working. Leave both switched on.
Trust the live page
The builder only shows a “Custom Code” placeholder. Publish and open the live page to see the section and test a dot.
Edit in the app, not in EComposer
Hotspots, products and popup style live in Hotspot Studio. Save there and the page updates — no EComposer republish needed.
A Code element per look
Several looks on one page? Give each its own Code element with its own snippet. The script and styles load once per page.
Popups stay on top
An open popup is lifted above the rows below it, so the product card and its add-to-cart button stay in view on every screen size.
Set a mobile crop
Upload a tighter image for phones with its own hotspot positions, so the dots stay on the products when the row narrows.
EComposer + Hotspot Studio, answered
Does Hotspot Studio work with EComposer?
Yes. Paste the section’s embed snippet into EComposer’s Code element and publish. We tested it on a published EComposer page: the section renders, popups open, and add to cart works on desktop and phones.
Why does the Code element show a placeholder instead of the section?
EComposer runs JavaScript only on the published page, not in the builder, so the canvas shows “Custom Code, Click to edit.” Publish and open the live page to see the section.
Is there an EComposer element for app blocks?
No. EComposer pages have no slot for theme-editor app blocks, so the Code element with the embed snippet is the way to add Hotspot Studio — and it’s all you need.
Will popups hide behind EComposer’s rows?
No. EComposer stacks its rows, so an open popup is lifted above the rows below it, on phones too.
Do I need to republish the EComposer 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.
Can one EComposer page show several sections?
Yes. Add a Code element for each section and paste each section’s own snippet. The script and styles load once per page.
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 GemPages
Two tested routes for GemPages pages: the Custom Code element, or GemPages’ Shopify App element with the theme editor.
Shop the Look for Shopify
The theme-agnostic guide: why looks lift average order value and what a converting section needs.
Make your EComposer pages shoppable
Free plan included, paid plans from $7.99/mo with a 7-day trial — and the photo already on your EComposer page is enough to start.