Layouts¶
The block supports three layouts. Pick one in Settings → Storefront.
Side panel (default)¶
Diagram on the left, scrollable parts list on the right.
Best for:
- Wide product pages — desktop-first stores, lots of horizontal space.
- Diagrams with many parts (10+). The side panel scrolls independently so shoppers can browse without losing the diagram from view.
On narrow viewports (mobile), the side panel collapses below the diagram automatically. No separate mobile setting is required.
Overlay¶
Parts list overlays the bottom or side of the diagram image, with hotspot click expanding inline detail. The overlay is partially translucent so the diagram remains visible behind it.
Best for:
- Stores with narrow product pages or layouts where a separate side panel would overflow.
- Diagrams with few parts (≤8) — the overlay style works best when the parts list stays short.
Click expands a detail card inline; the layout doesn't navigate the shopper away from the diagram view.
Popup-only¶
Diagram only — no parts list at all. Each hotspot opens a popup on click with full detail.
Best for:
- Minimalist storefronts where a side panel would feel heavy.
- Diagrams used as a visual catalog navigator rather than a parts reference.
Shoppers must hover or click each hotspot to discover what it represents, so make sure your hotspot labels are descriptive — they appear in the hover tooltip.
Comparing layouts at a glance¶
| Side panel | Overlay | Popup-only | |
|---|---|---|---|
| Diagram visible on hotspot detail | Yes | Mostly | No (popup covers) |
| Side parts list always visible | Yes | Half-visible | No |
| Best on narrow screens | OK (collapses) | Better | Best |
| Best for many hotspots (10+) | Best | Cramped | OK |
| Discoverability without hover | Best | Good | Lowest |
Switch between them at any time in Storefront settings. Use Storefront preview to compare before publishing the change.