Shoppable images for Framer Built for page changes.
Framer moves between pages without a reload, so the install has two parts: the Markspot script once in your site's Custom Code, then one element in an Embed wherever the image goes.
Free forever — 3 images, 1 live · No Framer plugin · No credit card
See the resultInstallation
From your photo to live on Framer.
Before you start
Custom code needs a paid site plan
Framer's site-wide custom code is part of its paid site plans. Check yours under the project's plan settings before you start.
- 01
Create your shoppable image
Upload your photo in Markspot, place a mark on each product, and add its name, price and link. Click Publish to get your embed code.
- 02
Copy the embed code
In your Markspot dashboard, open the image's install panel and copy the code. Each image has its own embed ID.
- 03
Add the script once
In your project settings, open Custom Code and paste the "Once, site-wide" script at the end of <body>, on all pages.
- 04
Add an Embed where the image goes
Insert an Embed on the page, set it to HTML, and paste the element: <markspot-embed data-embed-id="…">. It holds no script, so it works without an iframe.
- 05
Give the Embed room
The image fills the Embed's width and keeps its proportions. Set the width you want and a height tall enough for the image, so nothing is cropped.
- 06
Publish and click around
Framer doesn't load custom code on the canvas, so the Embed stays empty there. Publish, open the live site, and move between pages: the image comes back on each one.
Step 01 of 06
Create your shoppable image
Upload your photo in Markspot, place a mark on each product, and add its name, price and link. Click Publish to get your embed code.
Step 02 of 06
Copy the embed code
In your Markspot dashboard, open the image's install panel and copy the code. Each image has its own embed ID.
Step 03 of 06
Add the script once
In your project settings, open Custom Code and paste the "Once, site-wide" script at the end of <body>, on all pages.
Step 04 of 06
Add an Embed where the image goes
Insert an Embed on the page, set it to HTML, and paste the element: <markspot-embed data-embed-id="…">. It holds no script, so it works without an iframe.
Step 05 of 06
Give the Embed room
The image fills the Embed's width and keeps its proportions. Set the width you want and a height tall enough for the image, so nothing is cropped.
Step 06 of 06
Publish and click around
Framer doesn't load custom code on the canvas, so the Embed stays empty there. Publish, open the live site, and move between pages: the image comes back on each one.
Tap a pin to explore
The result
Your photo, on Framer. Now a storefront.
Tap a pin to explore
↑ This is a live Markspot. Hover or tap a pin to see what your shoppers will.
Your two snippets
The script goes in Custom Code once; the element goes in an Embed on each page that shows an image. Your dashboard's install panel gives you both, already filled in.
Once, site-wide
<script src="https://markspot.app/embed/embed.a0785de482c7.js"
integrity="sha384-oHhd5ILHywvcsJMcVDYzLK8iGo5QR0xWsnMAY/6dbt23Bjb6hTrgF+QQaURTXoEf"
crossorigin="anonymous"
async></script>Where the image goes
<markspot-embed embed-id="YOUR_EMBED_ID"></markspot-embed>Replace YOUR_EMBED_ID with the ID from your Markspot dashboard.
Where to use it
Where it goes on your Framer site.
01
Any page
An Embed in any section or stack: a shoppable hero, a lookbook spread, a product spotlight.
02
CMS pages
Put the Embed in the CMS page template; give each item its own image by changing the embed ID in the element.
03
Selected pages only
Custom Code can target specific pages, or go in one page's own settings, if only a few pages show images.
04
Components
Put the Embed inside a component to reuse the same shoppable image across pages.
Troubleshooting
Something's off? Here's why.
Symptom
The Embed is empty on the canvas
Fix
Expected: Framer doesn't load custom code on the canvas. Check the published site.
Symptom
The image shows once, then disappears after navigating
Fix
You pasted the full script tag in the Embed. Paste the element there instead, and the script in Custom Code.
Symptom
The image is cropped
Fix
The Embed is shorter than the image. Give it more height.
FAQ
Markspot on Framer, explained.
Paste the Markspot script once in your project's Custom Code, at the end of <body>. Then add an Embed set to HTML wherever the image goes and paste the <markspot-embed> element. Publish.
Framer changes pages without a reload, so a script inside the page may not run again when a visitor comes back to it. The element is picked up by the site-wide script on every page.
Site-wide custom code is part of Framer's paid site plans. Check yours before you start.
No. Framer doesn't load custom code on the canvas. The image shows on the published site.
The script loads with async, so it doesn't hold up your page, and it loads once for the whole visit. Images are hosted by Markspot.
Make your Framer site shoppable — free.
No plugin. One script, one element. Live in minutes.