Shopify Dev Helper
Chrome extension for Shopify development workflows.
/ Feature showcase
3D in Web Showcase
Google's Model Viewer is a web component that lets you embed interactive 3D models directly into any webpage — no complex code or 3D expertise required. It supports augmented reality, camera controls, animations, model variants, and annotations out of the box.
Key features
-
Simple embedding
Model Viewer works like an HTML tag. With a few lines of code you get a fully interactive 3D experience.
-
Augmented reality
Users can view 3D models in their real-world environment through supported devices, perfect for e-commerce product previews.
-
Interactive & Responsive
Built-in camera controls (zoom, rotate, pan) that work across all modern devices and browsers.
-
Customization
Add auto-rotation, custom camera angles, annotations, and material/variant switching to tailor the experience.
Shopify integration
Shopify uses Google Model Viewer by default to display 3D models on product pages. This allows merchants to provide an immersive shopping experience where customers can explore products in 3D directly in their browser, or place them in their own space via AR. Shopify's built-in support makes it easy for store owners to upload and showcase 3D models, enhancing product visualization and customer engagement without any custom development.
Interaction via annotations
Annotations are clickable. Click "Open" to animate the pods, then explore left and right views.
Model descriptions with annotations
Click an annotation to zoom in and read a description of that part of the guitar.
Bridge. The bridge anchors the strings and transfers their vibrations to the body. It affects tone, sustain, action, and intonation.
Machine heads. Tuning pegs adjust string tension for precise pitch control. Locking tuners add stability for more aggressive playing.
Frets. Frets divide the fretboard into notes. Their size, material, and placement affect playability, tone, and tuning precision.
Interaction via buttons
Use the buttons to animate the drone folding and unfolding its arms.
Model configuration
Switch color, change camera views, and toggle laces visibility.
View
Configuration
Augmented reality
View 3D models placed in your real-world environment. Works on mobile devices with ARCore or ARKit support.
On iPhone, AR only works in Safari — Chrome isn't supported.
Open on your phone
Use your mobile device with a camera and a modern browser.
Scan to view in AR
You're on desktop. Scan the QR code to open this page on your mobile device and experience the AR models.
Scan the QR code
Point your camera at the code to open this page and experience the AR models.
Wall placement
Attach a 3D model to a wall surface in AR. Useful for artwork, signage, or wall decor.
Floor placement
Place a 3D model on the floor in AR. Useful for furniture, sculptures, or any floor-standing item.