Shopify shoppable image and lookbook without an app

What is Shoppable image?

A shoppable image is a photograph with markers on it, each opening a card that links to the product in that spot. Hullara renders each hotspot as a native disclosure element, so it is focusable, opens with Enter or Space, announces whether it is open, and works even if the page's JavaScript never arrives.

The usual way to build this locks people out

A shoppable image is normally a <div> with a click listener and a card toggled by a CSS class. It demos perfectly.

It also has no focus, no keyboard, no announced state, and nothing at all before the JavaScript arrives — on a section whose entire purpose is sending a shopper to a product page. If the script is blocked, slow, or still loading, the photograph is a photograph and the products in it are unreachable.

Hullara builds each hotspot from <details> and <summary> instead. That is the same interaction with all of it already correct, for free:

<summary> is focusable, so it is in the tab order.
Enter and Space open it, because that is what the element does.
The open state is announced, because the browser announces it.
It works with the component file missing, blocked, or still downloading.

The JavaScript adds three things the element does not do on its own — close the others when one opens, close on Escape, close on a click outside. All three are refinements of a control that already worked.

Hotspots on the photograph
One open, linking to the product

A hotspot with no product renders nothing

Not a dot with an empty card behind it, and not a card reading "Product name".

The marker stays live inside the theme editor with its position sliders working, so you can place it on the sleeve before you have decided which shirt it is. But nothing reaches a customer until there is something to link to. Same rule as everywhere else here: an empty state is rendered as absence rather than as a placeholder that looks like a mistake on your storefront.

Positions are percentages, not pixels

Each hotspot has two sliders, horizontal and vertical, and both are a percentage of the image. That is what keeps the marker on the right sleeve when the same photograph is displayed at 1280px on a laptop and 390px on a phone.

A pixel offset would be correct on exactly one screen width, which is the bug this shape avoids rather than fixes.

What it is not

It is not a tagging tool, and it does not detect products in your photograph. You choose the product for each marker. There is no image analysis, nothing is sent anywhere, and no third-party script is added to your storefront — which is part of why the theme still loads two files per page.

Which edition

Pro. The pricing page lists what each edition contains, generated from the theme's own build.

Questions people actually ask

Do I need an app for a shoppable lookbook on Shopify?

No. The hotspots are positions you set in the theme editor and the cards are theme markup, so nothing has to run on somebody else's server and nothing adds a script to your storefront.

Does it work without JavaScript?

Yes, and that is the reason for the way it is built. Each hotspot is a native disclosure element rather than a div with a click listener, so opening one is browser behaviour: focusable, Enter and Space toggle it, the open state is announced. The component adds three refinements — closing the others when one opens, Escape, and a click outside — to a control that already worked without it.

What happens to a hotspot with no product on it?

Nothing renders. The marker stays live in the theme editor with its position sliders working, so you can place it before you have chosen the product — but a dot with an empty card behind it never reaches a customer.

How do I place the markers?

Two sliders per hotspot, horizontal and vertical, in the theme editor, so the position is a percentage of the image rather than a pixel. That is what keeps a marker on the right sleeve when the image is displayed at a different width on a phone.

Which edition has it?

Pro.