Free Shoppable Hotspot Image Maker

A browser tool that turns a single photo into a set of clickable product links. Built by AURA Modern Home, free to use, nothing to install. Example of what this free tool can create:

[ INSERT IMAGE HERE — example shoppable image with a few hotspots, showing a product card open on hover ]

Hi, my name is Todd Harmon and I run a furniture brand called AURA Modern Home, and for a long time I paid a monthly fee for an app that did one small thing. It let someone click a product inside a photo and I had to pay for this app every month. Well no longer!

I built my own, and I am giving it away for free.

The image up top is the whole idea. You take a room, a flat lay, a hero shot, anything, and you drop small markers on the pieces in it. A visitor hovers or taps a marker and a small card appears with the product name, a price, and a link. One image, every product in it, all one click away.

That is worth money to a furniture brand. It is worth money to anyone running Amazon affiliate links inside a blog post. It is worth money to a hero image that used to just sit there looking pretty and sell nothing. The links go wherever you point them. A product page, an affiliate URL, another article, a cart. If you can link to it, you can link to it from inside the photo.

How it works

Everything runs in your browser. You load an image, place your markers, write the name and link for each one, then copy the code it gives you and paste it into your site. There is no account and no charge. The photo stays a photo. The markers just sit on top of it, waiting to be clicked.

Build one right here

The tool is below. Make your image, copy the code at the bottom, and paste it wherever you publish.

How to use it

Add your image. Paste a public image URL and click Load Image, or upload a file. Room scenes and lifestyle shots work best. Give the products a little space.
Place a hotspot. Click Place Hotspot, then click the exact spot where the product sits. A marker drops where you click.
Fill in the product. Add the name and the URL it should link to. Add a price if you want one to show. Send the link anywhere you like.
Style the marker. Choose its color, size, and shape, and pick which direction the card opens so it never runs off the edge of the image.
Repeat for every product. Each marker carries its own name, link, and price.
Preview it. Hover each marker to confirm the card and the link work before you publish.
Generate and copy. Click Generate HTML, then Copy HTML, and paste it into your site anywhere you can add HTML.

Where to get an image link

The tool works best when you load your image from a link instead of uploading it off your computer. A link means the image already lives on the internet, so the code you copy can point straight at it. An uploaded file cannot do that, which is why it leaves a blank you have to fill in later.

An image link is just the web address of a picture that is already online. Here is the quick test. Paste the link into your browser bar and press enter. If you see only the image and nothing around it, no menus, no page, you have the right link. If you see a whole webpage instead, that is the wrong one.

Where you get it depends on where the image already lives:

If the image is already on your website, open the live page, right click the image, and choose Copy Image Address. On a phone, press and hold the image and choose Copy. That address is your link.
If you use Shopify, go to Settings, then Files. Upload the image there and click the small link icon next to it to copy the address. It will start with cdn.shopify.com, which is just the fast delivery network Shopify uses to serve your images. That is your CDN link.
If the image is not online anywhere yet, put it somewhere first. Your store files, your blog media library, or any image host will do. Then copy the link the same way.

How to paste it into your site

Once you click Copy HTML, you are holding a block of code. All that is left is dropping it into your site where you want the image to appear. Most site builders have a spot for exactly this, usually called an HTML block, an embed, or custom code. In a Shopify blog post or page, switch the editor to HTML mode with the small code button, or add it through a Custom Liquid section. In WordPress it is a Custom HTML block. In Squarespace or Wix it is a Code or Embed block.

If that still sounds fuzzy, watch the short video below. I walk through the whole thing, copy to paste, on a real site, so you can follow along.

[ INSERT VIDEO HERE — short walkthrough of pasting the HTML into a site ]

A few things worth knowing

Set your defaults once. Choose a default dot color and size, then Save as Default. Every new marker matches without redoing the work.
Aim the cards inward. Markers near the right edge should open their cards to the left, and the reverse on the left side. It keeps cards from getting clipped.
Keep it restrained. Three to six markers reads as curated. Twenty reads as a parking lot. The image should still look like a photograph first.
Write the alt text. Fill in the Alt Image Text field. It helps your search ranking and it lets anyone using a screen reader understand the image.
Use the overlay for a label. The Text or Logo overlay drops a small Shop The Look tag or your logo into a corner, and a logo can be its own clickable link.
Test every link in Preview. Thirty seconds of hovering saves you from publishing a dead link.

How we use it at AURA

I will tell you exactly how this earns its place on our own store, because the use cases will be the same ones you run into.

AURA Modern Home sells luxury furniture made for dark, low-light interiors. Most furniture sites photograph everything on a white sweep. We do the opposite. We shoot rooms that feel like dusk: walnut and deep oak, velvet and heavy linen, sculptural pieces with real visual weight. The trouble with a good room photo is that people fall for the whole scene and then cannot tell what any single piece is or how to buy it. That gap is what this tool closes.

So on a styled room shot, we tag the sofa, the coffee table, the lamp, and each marker opens to its own product. One photograph turns into a quiet storefront. We run it on hero images, inside our style guides where we break a room down piece by piece, and across our modern living room furniture scenes that would otherwise just get admired and scrolled past. If your product photographs better in a room than on a blank background, this is the line between a pretty picture and a picture that sells.

We are not a general furniture store. Everything is grouped into six aesthetics, Dark Academia, Mid Century Modern, Organic Modern, Japandi, art deco furniture, and Old Money, six ways of telling one story about depth and restraint. Across all of them we carry the pieces that hold a room together: sofas and sectionals, dining tables and chairs, beds, desks, cabinets, shelving, lighting, and rugs. You can see the catalog the way we built it in our luxury modern furniture collection, or work through modern furniture room by room to start with the space you are actually furnishing.

That is who we are, and why this exists. The tool is free for anyone. The furniture is the reason we built it. Now go make a boring image actually sell something.