Add a 3D Viewer to Shopify — No App Needed

Shopify's Built-in 3D: What You Get and What's Missing

Shopify does have native 3D model support. You can upload GLB or GLTF files directly to a product's media gallery, and Shopify will render them with their built-in model viewer. On supported devices, customers can even tap "View in your space" to see the product in AR using Apple's AR Quick Look or Android's Scene Viewer.

So why would you want an alternative? Several reasons. Shopify's built-in viewer only supports GLB and GLTF formats. If your 3D files are in STL, OBJ, 3MF, or STEP format — common in manufacturing, 3D printing, and CAD workflows — you can't upload them to Shopify at all. You'd need to convert every file to GLB first, which is an extra step that can introduce quality loss or break material assignments.

Second, Shopify's viewer customization is extremely limited. You can't change the background color, adjust the lighting, disable the floor shadow, or control the initial camera angle. The viewer looks the same on every Shopify store. If your brand has specific visual requirements, you're stuck.

Third, Shopify's 3D files count against your product media limits and must be hosted on Shopify's servers. For stores with hundreds of 3D models, this can become a management headache. An external viewer with its own hosting separates the 3D content from your Shopify plan limits.

The GeometryViewer Approach

Instead of using Shopify's built-in viewer, you'll embed the GeometryViewer web component directly in your theme code. The 3D model loads from GeometryViewer's CDN, and the viewer runs entirely in the customer's browser. Your Shopify store just needs a few lines of HTML in the right places.

This approach works with every Shopify theme — Dawn, Debut, Brooklyn, or any custom theme. It works on Shopify Basic, Shopify, and Advanced plans. The only requirement is access to the theme editor (Online Store > Themes > Edit code).

Step 1: Add the Script to Your Theme

In your Shopify admin, go to Online Store > Themes. Click the three-dot menu on your active theme and select Edit code. In the file tree on the left, open the Layout folder and click theme.liquid.

Find the closing </head> tag and add this line just before it:

<script type="module" src="https://geometryviewer.com/embed.js"></script>

Click Save. This loads the GeometryViewer web component on every page. The script is under 20 KB gzipped, loads asynchronously, and won't affect your store's performance.

Step 2: Create a Product Metafield for the Model URL

You need a way to associate a 3D model URL with each product. Shopify metafields are the standard way to add custom data to products. Go to Settings > Custom data > Products and click Add definition.

• Name: 3D Model URL
• Namespace and key: custom.model_3d_url
• Type: Single line text (or URL)

Click Save. Now go to any product in your catalog, scroll to the Metafields section, and paste the GeometryViewer URL for that product's 3D model (e.g., https://geometryviewer.com/v/abc123).

Step 3: Add the Viewer to Your Product Template

Back in the theme editor, you need to modify the product template to display the 3D viewer when a model URL is present. The exact file depends on your theme, but for Dawn (Shopify's default theme), look in the Sections folder for main-product.liquid or a similar file.

Find the area where product images are displayed (usually inside a media gallery or image container). Below the existing image/media code, add this Liquid snippet:

{% if product.metafields.custom.model_3d_url %}
  <div class="product-3d-viewer" style="margin-top: 16px;">
    <geometry-viewer
      src="{{ product.metafields.custom.model_3d_url }}"
      style="width: 100%; height: 450px; border-radius: 12px; border: 1px solid #e5e5e5;"
      camera-controls
      auto-rotate
      ar
    ></geometry-viewer>
  </div>
{% endif %}

The {% if %} block ensures the viewer only appears on products that have a 3D model URL set. Products without the metafield show just the normal image gallery.

Step 4: Create a Dedicated Section (Optional)

For more flexibility, you can create a dedicated Shopify section for the 3D viewer. This lets store owners add, remove, and reposition the viewer using the theme customizer without touching code. Create a new file in the Sections folder called gv-3d-viewer.liquid and add:

{% if product.metafields.custom.model_3d_url %}
<div class="page-width" style="padding: 24px 0;">
  <geometry-viewer
    src="{{ product.metafields.custom.model_3d_url }}"
    style="width: 100%; height: {{ section.settings.height }}px; border-radius: 12px;"
    {% if section.settings.auto_rotate %}auto-rotate{% endif %}
    camera-controls
    ar
  ></geometry-viewer>
</div>
{% endif %}

{% schema %}
{
  "name": "3D Model Viewer",
  "settings": [
    {
      "type": "range",
      "id": "height",
      "label": "Viewer height (px)",
      "min": 300,
      "max": 700,
      "step": 50,
      "default": 450
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "Auto-rotate model",
      "default": true
    }
  ],
  "templates": ["product"]
}
{% endschema %}

Now store owners can go to Customize theme > Product page, add the "3D Model Viewer" section, and configure the height and auto-rotation through the visual editor. No code required after the initial setup.

Alternative: Simple Iframe for a Single Product

If you only need a 3D viewer on one or two products and don't want to set up metafields, you can use the simpler approach: add an iframe directly in the product description.

Go to the product editor, switch the description to HTML mode (click the </> icon), and paste:

<iframe
  src="https://geometryviewer.com/v/abc123"
  width="100%"
  height="450"
  frameborder="0"
  allow="xr-spatial-tracking"
  style="border: none; border-radius: 12px; margin-top: 16px;"
></iframe>

This works immediately without any theme modifications. The downside is that the viewer appears inside the product description text block rather than as part of the media gallery, so it may not align perfectly with your theme's layout.

Styling to Match Your Theme

The <geometry-viewer> element can be styled with CSS just like any other HTML element. To make it match your Shopify theme, consider these adjustments:

• Border radius: Match your theme's card border radius. Dawn uses 0px by default, so border-radius: 0 keeps things consistent. Themes like Prestige use larger radii.
• Border: If your theme uses borders around product images, apply the same border to the viewer. Check the computed styles on a product image for exact values.
• Background: Some themes use a light grey background behind product images. You can set a background color on the viewer's container div to match.
• Spacing: Match the margin and padding of existing media elements. In Dawn, product media has specific vertical spacing that you'll want to replicate.

Performance Considerations for Shopify

Shopify stores live and die by their load speed — it directly affects conversion rates. Here's how to keep the 3D viewer from slowing things down.

• Lazy load the viewer. Place the viewer below the main product image so it loads after the critical content. The embed script loads asynchronously and won't block your page render.
• Optimize model size. Keep GLB files under 5 MB for product pages. E-commerce customers expect fast page loads, and a 30 MB model will cause abandonment.
• Use a static image as the initial view. Show a product photo in the main gallery and the 3D viewer as a secondary media item. Customers who want to interact with the 3D model will scroll to it; others will see the fast-loading photo first.
• Test with Shopify's speed report. After adding the viewer, check your theme's speed score in Online Store > Themes. The GeometryViewer script is small enough that it shouldn't move the needle, but always verify.

Troubleshooting

The viewer shows up on all products, even ones without a model

Check that the Liquid {% if %} condition is correct. Make sure you're checking product.metafields.custom.model_3d_url and that the namespace matches what you set in Settings.

The viewer appears but the model doesn't load

Verify the URL in the metafield. Open it in a new browser tab to confirm it loads. If the URL is correct but the model fails, it may be a CORS issue — GeometryViewer URLs are CORS-enabled by default, but if you're hosting models on your own CDN, you'll need appropriate CORS headers.

The AR button doesn't work

AR requires HTTPS (which Shopify provides) and a supported device. On iOS, AR Quick Look needs a USDZ file. On Android, Scene Viewer needs a GLB. GeometryViewer handles both formats automatically when the ar attribute is present.