Shop the Look: hotspots, products, and mobile layout

Turn a lifestyle image into a shoppable widget with clean hotspots, product cards, and a mobile-friendly buying flow.

Quick start

  1. Open the editor: /get-widget/shop-the-look
  2. Add the main image.
  3. Create hotspots and position them on the image.
  4. Attach product content to each hotspot.
  5. Test desktop and mobile presentation.
  6. Click Save & Get Code to publish and embed.

Image and hotspot configuration

Shop the Look depends on accurate visual positioning, so image setup matters more than in most widgets.

Use the editor to configure:

  • Main image source
  • Hotspot positions on a percentage basis
  • Hotspot label / title
  • Hotspot pulse / emphasis styling where available

Percentage-based hotspot placement is important because it scales with responsive layouts. After placing hotspots, verify the composition still feels balanced on narrow screens.

Product card content

Each hotspot usually needs enough product information to help the visitor decide whether to click:

  • Product name
  • Price or price range
  • Short description
  • CTA label
  • Product URL
  • Optional image override if the card should differ from the main scene image

Keep product copy short. The hotspot card should answer “what is this?” immediately without becoming a full PDP inside the widget.

Desktop vs mobile behavior

On desktop, hover and pointer interactions can make the experience feel lightweight. On mobile, the same pattern often needs a stronger bottom sheet or expanded card treatment.

When testing the layout, check:

  • whether multiple hotspots cluster too tightly on small screens
  • whether product cards overlap or cover important image areas
  • whether the bottom sheet or drawer stays readable without excessive scrolling

If the image is information-dense, fewer hotspots usually converts better than trying to tag everything.

Design controls that matter most

The most important styling settings for Shop the Look are:

  • hotspot size and visibility
  • card background and text contrast
  • button style and CTA hierarchy
  • spacing between product details
  • shared typography and theme settings

When in doubt, optimize for readability over visual effects. The widget should feel premium, but the purchase path must stay obvious.

Need help? Send the right details (so we can answer fast)

Support is fastest when we can reproduce the issue.

Please include:

  • The page URL where the widget is embedded (or the editor URL)
  • The platform/builder (WordPress, Webflow, Shopify, Squarespace, etc.)
  • What you expected to happen vs what you see
  • A screenshot of where the snippet is pasted (or a short screen recording)

If your issue involves a social connection (Instagram/Threads/TikTok), also include:

  • Which login path you used (Instagram vs Meta vs TikTok)
  • A screenshot of the provider error screen (if any)
  • Whether the account is Personal vs Business/Creator

Contact us here: /support.