Integration

Setup is one component

Models are served over CDN. One component is added to the product page and theme code stays untouched. Code, formats and performance budget are listed below.

Platforms

Where it works

Shopify

Added as a theme section or product page block. Variant selection maps to Shopify variants.

WooCommerce

Shortcode or block. The model resolves automatically based on the product ID.

Custom storefront

Embed script for React/Next/Vue, or a direct iframe. The model URL stays with the brand.

Marketplace / campaign page

A standalone landing page, or an AR link opened via QR code.

Code

Two ways to integrate

Web component (recommended)

<!-- One-time script on the product page -->
<script type="module"
  src="https://cdn.volumup.co/viewer.js"></script>

<volum-viewer
  model="https://cdn.volumup.co/m/tote-01.glb"
  ios-src="https://cdn.volumup.co/m/tote-01.usdz"
  poster="https://cdn.volumup.co/m/tote-01.webp"
  ar
  camera-controls
  loading="lazy">
</volum-viewer>

iframe (fastest setup)

<!-- Without adding a script: iframe -->
<iframe
  src="https://demo.volumup.co/e/tote-01"
  title="Product 3D viewer"
  loading="lazy"
  allow="camera; xr-spatial-tracking; fullscreen"
  style="width:100%;aspect-ratio:4/3;border:0"></iframe>

The web component also brings the AR button and the variant API. The iframe runs fully isolated, so no theme conflicts occur.

Formats

Which file goes where

Format	Usage	Note
GLB / glTF	Web + Android	Single file, compressed geometry and textures
USDZ	iOS Quick Look	Native AR viewing in Safari
Poster (WebP)	Initial load	Static frame shown until the model loads
Draco / KTX2	Optimization	Geometry and texture compression

Performance

Without slowing down the page

Model file size≤ 10 MB (target 5 MB)
Polygons50k–150k triangles
Texture2K, KTX2 compressed
LoadingLazy, on entering the viewport
First-paint impactZero layout shift thanks to poster image

No app required

iOS

Safari + Quick Look, via USDZ. iOS 12 and above.

Android

Chrome + Scene Viewer, via GLB. ARCore-supported devices.

Unsupported device

The AR button is hidden; the 3D viewer keeps working.

Data

Measurement and privacy

3D interaction, AR launch and variant-change events are sent to GA4 / GTM.
Camera footage never leaves the device; AR runs entirely on-device.
No personal data is collected, and no cookies are required.
Model ownership stays with the brand; source files are delivered on request.