Commerce 2 min read

Design useful hotspots for a 3D product viewer

Plan 3D product hotspots with short labels, focused camera views, accessible HTML explanations and touch-friendly interaction.

The approach

A hotspot should explain a specific detail that a visitor might otherwise miss. Start with a small set of genuinely useful annotations: a control, a connection, a material detail or an assembly step. A scene covered with labels makes inspection harder.

Write the explanation before placing the marker

Name the part, explain why it matters and decide whether the camera needs to move. Keep the label short and put longer information in a readable panel. Orbital supports hotspots attached to objects; inspect the result from more than one angle so the marker remains associated with the correct part.

Keep information available outside the scene

A canvas marker is not a substitute for an accessible specification list. Repeat important information in the surrounding HTML and provide clear ways to close panels. On touch screens, check whether selecting a marker accidentally starts an orbit gesture.

Make it practical

A workflow to start with

  1. Choose three details that answer real product questions.

  2. Attach markers to the corresponding objects or surfaces.

  3. Add concise explanations and a useful camera view where appropriate.

  4. Test every marker with touch and confirm the same information exists on the page.

An example design brief

Start with a specific request.

Plan three product annotations: the primary control, the main connection and the finish. Use short labels and explain one benefit per annotation. Keep the opening camera uncluttered and avoid placing markers over essential page text.

Use this as a brief for scene work or AI assistance. Inspect the result in the editor; available AI tools depend on your account and plan.

Before you publish

  • Markers remain attached to the correct part during rotation.
  • Open panels can be dismissed on a small screen.
  • Important specifications are also available as ordinary text.

Common questions

How many hotspots should a product have?

Use only as many as needed to explain important details. Start small and ask a tester which annotations they actually used.

Can a hotspot replace the product description?

No. Keep the core description and specifications outside the interactive scene so they remain available to everyone.

Further reading

Platform references for the surrounding workflow. Check destination-platform settings when publishing.

Shopify: combining product media

Watch a related tutorial

Explore practical demonstrations and companion articles by Daksh Brand Creator.