Language
Tag products directly inside the lifestyle photo instead of showing them in a boring product list. Hotspot tooltip with image, price, and buy button — click takes the customer to the product page or directly to the cart.
Works on Online Store 2.0, in any theme, no app install needed.
Upload a product look shot, place a marker on each product, fill the tooltip with a price block and shop link.
Two lines of HTML, copy-paste ready. Works on any Shopify page.
Open the page editor, click the </> icon in the text editor, paste the code, save.
Since Online Store 2.0 Shopify offers several ways to embed HTML. Three of them cover practically all use cases: page editor for standard pages, product description for individual products, custom Liquid section for reusable areas in the theme.
In the Shopify admin go to Online Store → Pages. Create a new page or open an existing one. In the text editor top right there is a </> icon — that opens the HTML source view.
Paste the embed code at the desired position, switch back to visual view, save the page.
In the product editor under Products → [Product] you find the description field with the same text editor as on pages. Click the </> icon, paste the embed, save.
That lets you show material, dimensions, and matching accessories of a piece of furniture as hotspots — without sending the customer to a second page.
For lookbook-style pages you need in multiple places: in the theme editor (Online Store → Themes → Customize) add a Custom Liquid section. Paste the embed code there — the section is then available on any page where you drag it in.
Benefit: when you update the interactive image later, it changes automatically everywhere the section is included.
If you want embeds hardcoded into the theme (e.g. always on the homepage), you can paste the code directly into a Liquid file — like sections/index.liquid or your own section template.
Done via Online Store → Themes → Edit Code. Important: duplicate the theme as a backup first.
Outfit or interior shot, every item as a hotspot with price and "Add to cart" button. Conversion straight from the photo.
Features, materials, or dimensions marked right on the product image. Saves tables and long scrolling.
Main product in the center, complementary products as markers around it. More items per order, no pop-ups.
Group photo of the team, every member clickable with name, role, and LinkedIn link. More personality than a wall of text.
</> icon), do not paste in visual view — otherwise the code gets escaped./products/handle) — direct add-to-cart works via /cart/add?id=VARIANT_ID&quantity=1.Yes. From Basic Shopify up to Shopify Plus, HTML embedding in pages and product descriptions works without restrictions. Shopify Lite also works as long as you can reach the HTML editor.
No. The embed is plain HTML+JS, no app entry, no monthly fee. That also avoids the performance hit many apps bring.
The embed.js script loads asynchronously (async attribute) so it does not block page render. Images themselves are lazy-loaded. In tests embeds add 5–10 points Lighthouse performance difference — comparable to one extra image on the page.
Markers and tooltip content are stored per image in picpins, not per language. For multilingual storefronts you have two options: create separate picpins images per language and use Liquid logic to pick the right embed ID, or use generic tooltips without text (e.g. only image + price).
Embeds in pages and product descriptions are theme-independent — they keep running. Embeds you placed directly in theme code can get lost on a theme reset or change. Rule of thumb: lifestyle embeds in pages; hard-coded embeds only when you actively maintain the theme code.
Yes, as many as you like. The embed script loads once and initializes all .picpins-embed containers automatically. Performance impact: only the script once, not per image.
In the standard checkout (Shopify-hosted) HTML embedding is not possible — locked on all plans except Shopify Plus. On Shopify Plus you could use checkout extensions, but the use case is rarely useful: in checkout the customer wants to finish, not browse.
Tooltip content is injected dynamically via JavaScript, so it is not in the page source. The main page with image description, product names, and surrounding text remains crawlable. SEO-wise: tooltips are a bonus for users; the actual page content stays classically optimizable.
First lifestyle image interactive in five minutes: drop in the photo, place markers, copy the embed code, paste into Shopify.