Support video (Shopify hosted, YouTube, Vimeo), carrousel video TikTok/Reels, et modeles 3D interactifs avec réalité augmentee AR Quick Look iOS et Scene Viewer Android.
Video & 3D
Scale Theme supporte nativement les medias enrichis sur la page produit : videos hébergées dans un carrousel dédié, videos YouTube/Vimeo dans la galerie principale, et modèles 3D interactifs avec réalité augmentee. Ces fonctionnalités presentent vos produits sous tous les angles et augmentent la confiance du client.
Video Carousel (Carrousel video produit)
Le bloc Video Carousel permet d'integrer jusqu'à 8 videos hébergées sur Shopify directement dans la page produit, dans un carrousel horizontal defilable. Idéal pour les témoignages video clients, les demos produit ou les videos TikTok/Reels.
Apparence
Settings
| Setting | Description | Options |
|---|---|---|
| Videos 1 a 8 | Videos hébergées sur Shopify | Video upload Shopify |
| Autoplay | Lire automatiquement en muet | Oui / Non |
| Muet | Son désactivé par défaut | Oui / Non |
| Boucle | Rejouer la video en boucle | Oui / Non |
| Controles | Afficher les contrôles natifs du navigateur | Oui / Non |
Bouton play
| Setting | Description | Options |
|---|---|---|
| Style bouton play | Forme du bouton play | Circle (cercle) / Square (carre) / None (aucun) |
Bordure décorative
Les videos peuvent avoir une bordure décorative autour d'elles, inspiree de l'esthétique TikTok et Instagram Reels.
| Setting | Description | Options |
|---|---|---|
| Bordure | Activer la bordure décorative | Oui / Non |
| Style bordure | Type de bordure | Solid (couleur unie) / Gradient TikTok / Gradient Instagram |
| Couleur bordure | Couleur si mode solide | Selecteur de couleur |
| Epaisseur | Epaisseur de la bordure | Pixels |
Layout
| Setting | Description | Options |
|---|---|---|
| Videos par ligne desktop | Nombre de videos visibles sur desktop | 1 / 1.5 / 2 / 3 |
| Videos par ligne mobile | Nombre de videos visibles sur mobile | 1 / 1.5 / 2 |
| Gap | Espacement entre les videos | Pixels |
| Border radius | Arrondi des coins des videos | Pixels |
Videos dans la galerie principale
En plus du carrousel dédié, les videos uploadees en tant que medias du produit dans l'admin Shopify s'integrent directement dans la galerie principale (le slider d'images).
Sources supportees
| Source | Comment ajouter | Autoplay | Controles |
|---|---|---|---|
| Video Shopify | Upload dans Produits > Medias | Oui (muet) | Controles HTML5 natifs |
| YouTube | Coller l'URL dans Produits > Medias | Non (restriction YouTube) | Player YouTube embed |
| Vimeo | Coller l'URL dans Produits > Medias | Oui (muet) | Player Vimeo embed |
Performance
Les videos dans la galerie sont chargées en lazy loading pour ne pas impacter le temps de chargement de la page :
| Optimisation | Detail |
|---|---|
| Lazy loading | Les iframes YouTube/Vimeo ne sont chargées qu'au clic sur la miniature (technique de façade) |
| Facade | Une image de couverture est affichée avant le chargement du player réel |
| Preconnect | Les domaines video (youtube.com, vimeo.com) sont preconnectes pour un chargement plus rapide |
| Poids | Aucun JavaScript supplémentaire charge si pas de video sur le produit |
Modele 3D
Le bloc Media de la galerie supporte les modèles 3D via l'integration native de Shopify avec Google Model Viewer. Les clients peuvent faire tourner le produit, zoomer et même le visualiser en réalité augmentee dans leur environnement.
Fonctionnalites interactives
| Fonctionnalite | Description |
|---|---|
| Rotation 360 | Faire tourner le produit avec la souris ou le doigt |
| Zoom | Zoom avant/arrière avec la molette ou le pinch |
| Pan | Deplacer le modèle dans le viewer |
| Autorotation | Rotation automatique lente du modèle |
| AR Quick Look | Visualisation en réalité augmentee sur iOS (Safari) |
| Scene Viewer | Visualisation en réalité augmentee sur Android (Chrome) |
Configuration
Pour ajouter un modèle 3D à un produit :
- Allez dans Produits > votre produit dans l'admin Shopify
- Dans la section Medias, cliquez sur Ajouter
- Sélectionnez un fichier GLB (recommande) ou GLTF
- Shopify traite le modèle et le rend disponible dans la galerie
| Format | Extension | Support | Recommandation |
|---|---|---|---|
| glTF Binary | .glb | Complet | Recommande (fichier unique, compact) |
| glTF | .gltf | Complet | Supporte mais moins pratique (plusieurs fichiers) |
| USDZ | .usdz | AR iOS uniquement | Genere automatiquement par Shopify depuis le GLB |
Settings du modèle 3D
Les settings du modèle 3D sont geres au niveau de la section produit (pas du bloc individuel) :
| Setting | Description | Options |
|---|---|---|
| AR | Activer le bouton de réalité augmentee | Oui / Non |
| Bouton AR | Texte du bouton AR | Texte libre ("Voir chez moi", "Essayer en AR") |
| Autorotation | Rotation automatique lente du modèle | Oui / Non |
| Vitesse rotation | Vitesse de l'autorotation | Lente / Normale / Rapide |
| Exposition | Luminosite du modèle | 0.5 a 2.0 |
| Ombre | Ombre portee sous le modèle | Oui / Non |
AR Quick Look (iOS)
Sur les appareils iOS (iPhone, iPad avec iOS 12+), le bouton AR lance AR Quick Look, la fonctionnalité de réalité augmentee native d'Apple.
Expérience utilisateur
- Le client tape sur "Voir en AR" ou "Voir chez moi"
- L'appareil photo s'ouvre avec un écran de calibration
- Le client pointe vers une surface (sol, table)
- Le produit 3D est place dans l'environnement réel du client
- Il peut le déplacer, le redimensionner et le voir sous tous les angles
- Il ferme la vue AR et revient à la page produit
AR sur Android (Scene Viewer)
Sur Android avec Chrome, Scale Theme utilise Scene Viewer de Google :
- Le client tape sur "Voir en AR"
- L'application Scene Viewer s'ouvre (ou est proposee au téléchargement)
- Le produit est affiche en réalité augmentee
- L'expérience est similaire a iOS
Integration dans la galerie
Les videos et modèles 3D s'integrent directement dans la galerie principale du produit, à côté des images. Ils sont identifies par des icônes distinctives :
| Type de media | Icône sur la miniature | Comportement au clic |
|---|---|---|
| Image | Aucune icône | Zoom au clic ou hover (selon la config) |
| Video | Icône play (triangle) | Lecture dans le slider ou en plein écran |
| Modele 3D | Icône cube 3D | Viewer interactif avec rotation et zoom |
Performance
Scale Theme optimisé le chargement des medias enrichis pour minimiser l'impact sur les performances :
| Optimisation | Video | 3D |
|---|---|---|
| Chargement | Lazy : façade image puis iframe à la demande | Lazy : Model Viewer charge au scroll |
| Poids JS | 0KB si pas de video | Model Viewer ~50KB (charge une seule fois via CDN Google) |
| Preconnect | youtube.com, vimeo.com | modelviewer.dev |
| Mobile | Qualite adaptative automatique | Moins de polygones automatiquement |
| Lighthouse | Impact minimal (<5 points si lazy) | Impact minimal si below fold |
Bonnes pratiques
Videos
- Videos courtes : 15-30 secondes par video. Les videos longues sont rarement regardees en entier sur une page produit
- Format portrait pour le carrousel : Si vous utilisez le carrousel video pour des témoignages TikTok/Reels, gardez le format portrait (9:16)
- Format paysage pour la galerie : Les videos dans la galerie principale sont mieux en 16:9 ou 1:1
- Thumbnail soignee : La première frame de la video (où l'image de couverture) est la première chose que voit le client. Soignez-la
- Controles visibles : Ajoutez toujours les contrôles pour que le client puisse activer le son, mettre en pause, avancer
- Bordure TikTok : Utilisez la bordure gradient style TikTok pour les témoignages video UGC. Elle donne immédiatement un aspect "avis client authentique"
Modeles 3D
- Fichiers légers : Gardez les fichiers GLB sous 15MB pour un chargement rapide. Idealement sous 5MB
- Eclairage neutre : Un eclairage neutre dans le modèle rend mieux dans tous les environnements AR
- Textures optimisées : Compressez les textures du modèle. Utilisez des formats JPEG pour les textures de couleur et PNG pour les textures avec transparence
- Testez sur appareil : La réalité augmentee doit être testee sur de vrais appareils (iPhone, Android), pas uniquement en simulateur
- Bouton AR engageant : Utilisez un texte concret comme "Voir chez moi" ou "Essayer dans votre espace" plutôt que "AR" ou "3D"
- Position dans la galerie : Placez le modèle 3D en dernière position dans la galerie. Les images sont plus immediates et le 3D est un bonus pour les visiteurs engages
Prochaines étapes
- Blocs page produit — Intégrez la vidéo dans la page produit
- Page produit : vue d'ensemble — Les différents layouts disponibles
- Galerie — Affichez vos médias dans une galerie filtrée
- Décoration médias — Ajoutez des décorations aux images et vidéos