SScale Themedocs
FR

Product video carousel and 3D visualization with Model Viewer and AR Quick Look on iOS.

Video & 3D

Scale Theme natively supports rich media on the product page: multiple videos in a carousel and interactive 3D models with augmented reality. These features let you showcase your products from every angle and boost customer confidence.

The Video Carousel block lets you embed multiple videos directly on the product page. Videos are presented in a navigable carousel.

Supported sources

SourceFormatAutoplayControls
YouTubeYouTube URLNo (YouTube restriction)Embedded YouTube player
VimeoVimeo URLYes (muted)Embedded Vimeo player
Hosted fileMP4, WebM via ShopifyYes (muted)Native HTML5 controls
Shopify mediaVideo uploaded to the productYes (muted)Native HTML5 controls

Settings

SettingDescriptionOptions
VideosList of video URLs or filesUp to 10 videos
AutoplayAutomatic muted playbackYes / No
LoopLoop playbackYes / No
RatioPlayer proportions16:9 / 4:3 / 1:1 / 9:16 (vertical)
ThumbnailCover image before playbackAuto / Custom
ControlsShow playback controlsYes / No
💡Autoplay videos are always muted (browser requirement). Add controls so the customer can enable sound. 16:9 videos are the standard for product presentations.
SettingDescriptionOptions
StyleVideo presentationSlider / Grid / List
ThumbnailsNavigation thumbnailsBelow / Side / None
NavigationNavigation arrowsYes / No
DotsIndicator dotsYes / No

Performance

Videos are loaded via lazy loading: only the visible video is loaded. The others are loaded on demand when the visitor navigates through the carousel.

OptimizationDetail
Lazy loadingYouTube/Vimeo iframes are only loaded when the thumbnail is clicked
FacadeA cover image is displayed before the player loads
PreconnectVideo domains are preconnected for faster loading
ℹ️The facade technique (showing an image before loading the player) significantly reduces page load time. The actual player is only loaded when the visitor clicks "Play."

3D Model

The Media block supports 3D models through Shopify's native integration with Model Viewer (Google's library for 3D display on the web).

Features

FeatureDescription
360 rotationThe customer can rotate the product with mouse/finger
ZoomZoom in/out with scroll wheel or pinch
AR Quick LookAugmented reality visualization on iOS (Safari)
AR AndroidScene Viewer on Android (Chrome)
AnnotationsPoints of interest on the model (if configured)

with rotation controls and a "View in AR" button)

Configuration

To use 3D models, you first need to upload a 3D model to your Shopify product:

  1. Go to Products > your product
  2. In the Media section, click Add
  3. Select a GLB or GLTF file
  4. Shopify processes the model and makes it available
FormatExtensionSupported
glTF Binary.glbYes (recommended)
glTF.gltfYes
USDZ.usdzYes (iOS AR only)

3D model settings

SettingDescriptionOptions
AREnable augmented realityYes / No
AR buttonAR button textFree text ("View in my space")
Auto-rotationAutomatic model rotationYes / No
Rotation speedAuto-rotation speedSlow / Normal / Fast
ExposureModel brightness0.5 - 2.0
ShadowDrop shadow under the modelYes / No

AR Quick Look (iOS)

On iOS devices (iPhone, iPad), the AR button launches AR Quick Look, Apple's native augmented reality feature:

  1. The customer taps "View in AR"
  2. The camera opens
  3. The 3D product is placed in the customer's real environment
  4. They can move it, resize it, and view it from every angle
  5. A button allows adding to cart directly from the AR view
⚠️Augmented reality requires a compatible device: iPhone/iPad with iOS 12+ for AR Quick Look, or Android with ARCore for Scene Viewer. On desktop, the AR button is hidden.

AR on Android

On Android, Scale Theme uses Google's Scene Viewer:

  1. The customer taps "View in AR"
  2. The Scene Viewer app opens (or is downloaded)
  3. The product is displayed in augmented reality
  4. The experience is similar to iOS

Videos and 3D models integrate directly into the main product gallery, alongside images:

MediaGallery displayBehavior
ImagesStandard thumbnailZoom on click/hover
VideosThumbnail with play iconPlayback in the gallery or fullscreen
3D modelThumbnail with 3D iconInteractive viewer in the gallery
💡Place images first in your product gallery, followed by videos, then the 3D model. Images load faster and give an immediate first impression, while videos and 3D enrich the experience for engaged visitors.

Performance

OptimizationVideo3D
LoadingLazy (facade + iframe on demand)Lazy (Model Viewer loads on scroll)
WeightNo impact if no videoModel Viewer ~50KB (loaded once)
Preconnectyoutube.com, vimeo.commodelviewer.dev
MobileAdaptive (auto quality reduction)Adaptive (auto polygon reduction)

Best practices

  1. Short videos: 15-30 seconds per video. Long videos are rarely watched in full on a product page
  2. 16:9 format: Standard for product presentations. Use 1:1 for embedded social media videos
  3. Attractive thumbnail: The thumbnail is the first thing the customer sees. Make it count
  4. Lightweight 3D models: Keep GLB files under 15MB for fast loading
  5. Neutral lighting: For 3D models, neutral lighting renders better across all AR environments
  6. Test on real devices: Augmented reality must be tested on real devices, not in a simulator
PreviousSize ChartNextProduct Cards