Shoppable images for Squarespace One Code Block.
Add a Code Block, paste one tag, save. Your photos become interactive: marks on each product, tooltips in your brand's style, links to your products.
Free forever — 3 images, 1 live · No Squarespace extension · No credit card
See the resultInstallation
From your photo to live on Squarespace.
Before you start
Check your plan first
Squarespace runs JavaScript in Code Blocks on the Core, Plus and Advanced plans (and some legacy plans). On a plan without it, the block shows nothing.
- 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
Edit the page
Open the page where the image should appear and click Edit.
- 04
Add a Code Block
In the section, click Add block (or +) and choose Code.
- 05
Paste the tag in HTML mode
Click the block's pencil icon and paste the tag. Leave Mode on HTML and Display Source off: in any other setting, the code shows as text.
- 06
Save and check while logged out
Click Save. Custom code might not show while you're logged in: open the page in a private window, or preview it in Safe Mode.
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
Edit the page
Open the page where the image should appear and click Edit.
Step 04 of 06
Add a Code Block
In the section, click Add block (or +) and choose Code.
Step 05 of 06
Paste the tag in HTML mode
Click the block's pencil icon and paste the tag. Leave Mode on HTML and Display Source off: in any other setting, the code shows as text.
Step 06 of 06
Save and check while logged out
Click Save. Custom code might not show while you're logged in: open the page in a private window, or preview it in Safe Mode.
Tap a pin to explore
The result
Your photo, on Squarespace. Now a storefront.
Tap a pin to explore
↑ This is a live Markspot. Hover or tap a pin to see what your shoppers will.
The embed tag
<script src="https://markspot.app/embed/embed.a0785de482c7.js"
data-embed-id="YOUR_EMBED_ID"
integrity="sha384-oHhd5ILHywvcsJMcVDYzLK8iGo5QR0xWsnMAY/6dbt23Bjb6hTrgF+QQaURTXoEf"
crossorigin="anonymous"
async></script>Replace YOUR_EMBED_ID with the ID from your Markspot dashboard.
7.0 templates with Ajax loading
Some version 7.0 templates load pages with Ajax, without a full reload, and a Code Block's script may not run after you navigate. Either turn Ajax loading off in your site styles, or add the script once in Code Injection (Footer) and put the element in your Code Blocks: it comes back on every page.
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>Where to use it
Where it goes on your Squarespace site.
01
Page sections
A Code Block in any section: a shoppable hero, a lookbook spread, a product spotlight.
02
Blog posts
Make editorial posts shoppable: mark every product in the photography.
03
Site footer
A Code Block in the footer shows the same image on every page, such as a seasonal edit.
04
Campaign pages
A dedicated page per collection or campaign, with several shoppable images.
Troubleshooting
Something's off? Here's why.
Symptom
The code shows as text
Fix
Set the Code Block's Mode to HTML and turn Display Source off.
Symptom
Nothing shows while you're logged in
Fix
Squarespace may not render custom code for logged-in editors. Check the page logged out or in a private window.
Symptom
It shows after a reload, not after clicking a link
Fix
Your 7.0 template loads pages with Ajax, or the page is inside an index page. Use the two-part install above, or turn Ajax loading off.
FAQ
Markspot on Squarespace, explained.
Create the image in Markspot and copy its embed tag. In Squarespace, edit the page, add a Code Block, paste the tag with Mode on HTML, and save.
Core, Plus and Advanced, plus some legacy plans: those run JavaScript in Code Blocks and offer Code Injection.
Squarespace may not run custom code while you're logged in. Check the published page logged out, or in a private window.
Yes. On 7.0 templates that use Ajax loading, use the two-part install (the script in Code Injection, the element in a Code Block) or turn Ajax loading off.
No. Names, prices and links are what you enter in Markspot. Update a mark when a price changes; each mark links to your product page.
Make your Squarespace site shoppable — free.
No extension. One Code Block. Live in minutes.