Shoppable images for Webflow — one embed element.
Drop an HTML Embed element on any Webflow page, paste your Markspot script tag, publish. Interactive hotspots, custom tooltips, click analytics — no plugin, no custom code.
Free forever for 5 images · No Webflow plugin · No credit card
Installation
Live on Webflow in five steps.
Create your shoppable image
Upload your product photo in Markspot, place hotspots on each product, add names, prices, and URLs. Click Publish to generate an embed code.
Copy the embed code
From your Markspot dashboard, copy the script tag. Each published image has its own unique embed ID.
Open Webflow Designer
In your Webflow project, open the Designer and navigate to the page where you want the shoppable image to appear.
Add an HTML Embed element
In the Add Elements panel (the + icon), find the Embeds category and drag an HTML Embed element onto the canvas where you want the image.
Paste and publish
Double-click the Embed element, paste your Markspot script tag into the HTML field, click Save & Close, then Publish your Webflow site. Done.
The embed tag
<script data-embed-id="YOUR_EMBED_ID"
src="https://markspot.app/embed/embed.v1.js"></script>Replace YOUR_EMBED_ID with the ID from your Markspot dashboard.
Where to use it
Works everywhere in Webflow.
Any page
Drop an HTML Embed element anywhere on a static page — hero section, product spotlight, editorial layout.
CMS collection pages
Add the embed in a CMS collection template to display a shoppable image per collection item (e.g., per product or per post).
Webflow Ecommerce
Place a shoppable embed on product pages or collection pages to show lifestyle context alongside product listings.
Page sections
Use the Embed element inside any Section, Container, or Div Block — it inherits your layout and is responsive by default.
FAQ
Markspot on Webflow, explained.
Create your shoppable image in Markspot and copy the embed script tag. In Webflow Designer, drag an HTML Embed element to your canvas, paste the script tag inside it, click Save & Close, then publish your Webflow site. The shoppable image is live immediately.
Yes. You can place a Markspot HTML Embed element inside a CMS Collection List or Collection Page template. If you need a different embed per CMS item, create a separate Markspot image for each item and paste the corresponding embed tag.
No. The Markspot embed script loads asynchronously and is served from a CDN. It does not block your page's initial render or affect Webflow's CMS loading. Images are hosted by Markspot, not Webflow, so they don't count against your Webflow media limits.
Yes. Markspot embeds work on Webflow Ecommerce product pages and collection pages. Add an HTML Embed element to your product template layout and paste your shoppable image tag to show lifestyle context and product hotspots alongside your Webflow product listings.
Yes. The Markspot embed fills its container and is fully responsive. In Webflow Designer, set the width and max-width of the Embed element as you would any block — the hotspot positions scale proportionally to every screen size.
Make your Webflow site shoppable — free.
No plugin. No custom code. Live in minutes from Designer.