Shoppable images for WordPress No plugin.
Paste one tag into a Custom HTML block. Your photos become interactive: marks on each product, tooltips in your brand's style, links to your products. Works with the block editor, page builders and WooCommerce.
Free forever — 3 images, 1 live · No WordPress plugin · No credit card
See the resultInstallation
From your photo to live on WordPress.
Before you start
Your account must be allowed to post scripts
WordPress removes script tags saved by users without the unfiltered_html capability. On a single site, Administrators and Editors have it; on a multisite network, only Super Admins. On WordPress.com, scripts need a plan that allows plugins.
- 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
Open the page in the editor
In your WordPress dashboard, open the page or post where the image should appear.
- 04
Add a Custom HTML block
Click the + block inserter where the image should go, search for Custom HTML and add the block.
- 05
Paste the tag
Paste the embed tag into the block. The block's Preview tab shows the result.
- 06
Update and check the page
Click Update (or Publish) and open the page. If the image isn't there, see "If something goes wrong" below.
Classic editor? Switch to the Text tab, not Visual, and paste the tag there. Save before switching back to Visual, which can rewrite the tag.
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
Open the page in the editor
In your WordPress dashboard, open the page or post where the image should appear.
Step 04 of 06
Add a Custom HTML block
Click the + block inserter where the image should go, search for Custom HTML and add the block.
Step 05 of 06
Paste the tag
Paste the embed tag into the block. The block's Preview tab shows the result.
Step 06 of 06
Update and check the page
Click Update (or Publish) and open the page. If the image isn't there, see "If something goes wrong" below.
Classic editor? Switch to the Text tab, not Visual, and paste the tag there. Save before switching back to Visual, which can rewrite the tag.
Tap a pin to explore
The result
Your photo, on WordPress. 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.
Themes that change pages without a reload
Some themes and plugins load the next page without a full reload (Ajax navigation, page transitions). A script tag pasted in the content doesn't run again there. Add the script once site-wide (your theme's footer scripts field, or a header-and-footer plugin) and put the element in a Custom HTML block wherever the image goes.
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>Editors and builders
Where it goes on your WordPress site.
01
Pages and posts
Custom HTML The block editor's Custom HTML block, anywhere in the content.
02
Elementor
HTML Drag the HTML widget (in the free version) into the section and paste the tag.
03
Divi
Code Add a Code module (or Fullwidth Code) and paste the tag. Other builders: use their HTML or code element.
04
WooCommerce product page
Single Product Block theme: Appearance → Editor → Templates → Single Product, add a Custom HTML block and save; it shows on every product. For one product, paste the tag in its description (Text tab).
Troubleshooting
Something's off? Here's why.
Symptom
The tag vanishes when you save
Fix
Your account lacks the unfiltered_html capability, so WordPress strips the script. Ask an Administrator (Super Admin on multisite) to add the block. If even Administrators can't, wp-config.php has DISALLOW_UNFILTERED_HTML set to true.
Symptom
The page loads but the image doesn't
Fix
An optimization plugin is probably combining, minifying or delaying the script, which breaks its integrity check. Exclude the Markspot script in WP Rocket (File Optimization: the JavaScript exclusion lists), Autoptimize ("Exclude scripts from Autoptimize") or LiteSpeed Cache (Page Optimization → Tuning: JS Excludes and JS Deferred / Delayed Excludes), then clear the cache.
Symptom
The image is gone after changing pages
Fix
Your theme loads pages without a reload. Use the two-part install above: the script once site-wide, the element in the page.
FAQ
Markspot on WordPress, explained.
Create the image in Markspot and copy its embed tag. In the WordPress editor, add a Custom HTML block where the image should go, paste the tag and click Update.
No. Markspot is a standard script tag that goes in a Custom HTML block or your page builder's HTML element. There is nothing to install or update.
On plans that allow plugins. WordPress.com removes scripts from content on its other plans, so check your plan on wordpress.com/pricing before you start. Self-hosted WordPress (WordPress.org) has no such limit.
Yes: in the Single Product template with a block theme, or in one product's description. Names, prices and links are what you enter in Markspot; they don't follow your WooCommerce catalog or stock.
WordPress strips script tags saved by users without the unfiltered_html capability: everyone but Administrators and Editors on a single site, everyone but Super Admins on multisite. Ask an Administrator to add the block.
Yes, once the Markspot script is excluded from JavaScript combining, minifying and delaying. Page caching on its own is fine.
Make your WordPress site shoppable — free.
No plugin. One block. Live in minutes.