Skip to content

Interactions

Detailed reference for every shopper interaction the block supports.

Hover (mouse)

Pointing at a hotspot on the image:

  • Triggers the chosen hover effect: highlight, spotlight, or off.
  • Highlights the matching row in the side panel (or overlay).
  • Shows a tooltip with the hotspot label.

Pointing at a side-panel row triggers the same paired highlight in reverse — the row is the focus, and the matching hotspot on the image gets the highlight ring.

Focus (keyboard)

Pressing Tab moves focus through interactive elements in this order:

  1. Diagram tabs (when multiple diagrams are attached).
  2. Each side-panel row, top to bottom.
  3. Inside an open popup: variant picker → quantity → add-to-cart.

Focus rings follow the theme's focus styles when present. Pressing Enter or Space on a focused side-panel row opens the popup just like a click.

Click

Click any of:

  • A hotspot on the image.
  • A side-panel row.
  • A part thumbnail in an open popup.
  • A part bold title in an open popup.

Behavior:

Click target Result
Hotspot on image Open popup
Side-panel row Open popup
Thumbnail in popup Navigate to product page (new tab)
Bold title in popup Navigate to product page (new tab)
Variant in popup picker Update the popup's price, stock, SKU live
Quantity stepper Increment / decrement quantity (clamped to stock)
Add to cart in popup Add to Shopify cart, show success, update header cart

Touch

Mobile and tablet behave the same as click — tap on a hotspot to open the popup. Tap-and-hold on a hotspot doesn't trigger the popup; the shopper must tap to commit.

The popup is large enough to use comfortably with thumbs and uses sticky headers so the Add to cart button stays in reach while scrolling longer popup content.

Variant change

When a hotspot is mapped to a product (not a specific variant) and the product has more than the auto-default variant:

  • The popup shows a variant picker (swatches if option names are Color / Size / similar; otherwise a dropdown).
  • Picking a different variant:
    • Updates the price (and the struck-through compare-at price if on sale).
    • Updates the SKU.
    • Updates the stock state — if the new variant is sold out, the add-to-cart and quantity controls disable.
    • Updates the swatch indicator.

The popup stays open during variant switches.

Cart redirect

After Add to cart, the next behavior depends on the Cart redirect mode shop setting:

  • Stay on page (default) — popup stays open, cart count updates in the theme header.
  • Open cart drawer — Shopify's cart drawer opens (if your theme supports drawer carts).
  • Go to cart page — full navigation to /cart.

Closing the popup

The popup closes when:

  • The shopper clicks outside it.
  • The shopper presses Esc.
  • The shopper clicks the × in the top-right corner.

Adding to cart does not close the popup automatically — shoppers often add multiple parts in sequence.