Back to Tutorials

E-commerce 3D Model Setup

AR-ready models for online stores

MeshMint TeamJanuary 20, 202512 minE-commerceBeginner
E-commerceARUSDZ

E-commerce 3D Model Setup

Platform Integration

Shopify

  1. Generate model in GLB format
  2. In Shopify Admin, edit product
  3. Add media → Upload 3D model
  4. Model appears with AR view button

WooCommerce

  1. Install 3D viewer plugin
  2. Upload GLB to media library
  3. Add shortcode to product page
  4. Configure viewer settings

Custom Integration

Use model-viewer web component:

<model-viewer
  src="path/to/model.glb"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate>
</model-viewer>

AR Configuration

Enable AR viewing on mobile devices:

  • iOS: Export USDZ format
  • Android: Use GLB with scene-viewer
  • File size: Keep under 10MB
  • Textures: Optimize to 2K max

Optimization for Web

Performance Checklist:

  • ☐ Compress textures (JPEG/WebP)
  • ☐ Use Draco geometry compression
  • ☐ Implement lazy loading
  • ☐ Provide multiple LODs
  • ☐ Enable CDN delivery

Analytics Setup

Track 3D model engagement:

// Track AR views
gtag('event', 'view_in_ar', {
  'event_category': 'engagement',
  'event_label': productSku
});