Comment ajouter la photographie de produit à 360 degrés sur Shopify

À retenir

• La photographie de produit à 360° sur Shopify est une séquence d’images que l’acheteur fait glisser pour faire pivoter le produit. Une configuration courante est de 36 images à des intervalles de 10 degrés.¹
• Shopify intègre des médias 3D et AR natifs dans son pipeline de médias de produits. Il utilise le model-viewer de Google et nécessite un modèle 3D, et non une séquence de photos.²
• Pour les rotations de photos 2D, vous avez le choix entre une application de rotation 360 ou un viewer JavaScript sur mesure. Les applications sont plus rapides à déployer ; le code sur mesure garde le balisage (markup) dans votre thème.
• La performance est le vrai risque. Un ensemble de 36 images en pleine résolution peut atteindre 10 à 20 Mo, alors compressez chaque image et chargez le viewer en lazy-loading.¹
• Ne chargez jamais votre image LCP en lazy-loading. La première image de la galerie que l’acheteur voit doit se charger immédiatement (eager loading).³

Pour ajouter la photographie de produit à 360 degrés sur Shopify, prenez 24 à 72 photos sur un plateau tournant, compressez-les en WebP, et affichez-les avec une application de rotation ou un petit viewer JavaScript sur mesure. Les médias 3D natifs de Shopify nécessitent un modèle 3D, pas des photos.

La photographie de produit à 360° montre un produit sous tous les angles dans un seul viewer interactif. L’acheteur glisse vers la gauche ou la droite, ou les images tournent automatiquement, et le produit semble pivoter. Sur une page produit Shopify (PDP), cela remplace les suppositions par une vue complète de l’article.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a travaillé avec des centaines de boutiques Shopify. Nous créons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store et un badge Built for Shopify. Nous travaillons tous les jours avec les médias des pages produits.

Qu’est-ce que la photographie de produit à 360 degrés ?

Un spin 360 n’est ni une simple photo ni une vidéo. C’est une suite ordonnée de frames (images) fixes, chacune représentant le produit tourné d’un millimètre. Le programme remplace les images quand l’utilisateur fait glisser, ce qui donne l’effet que l’objet tourne sur lui-même.

Les deux variables qui comptent :

• Le nombre d’images (frame count). Plus de frames amènent un spin plus fluide mais un téléchargement plus lourd. L’usage veut qu’on utilise 36 frames à des intervalles de 10 degrés.¹
• La taille de l’image. Une largeur d’environ 1200 à 1500 px permet de conserver les détails sans exploser la taille du fichier.¹

Cela est bien différent d’un modèle 3D, qui est un unique fichier de forme géométrique rendu en temps réel par le navigateur. Le pipeline de médias natif de Shopify peut traiter les modèles 3D et l’AR, mais pas les séquences photo.² Plus de détails sur cette nuance plus bas.

Comment capturer des séquences d’images à 360°

Plateau tournant (turntable) et appareil photo

La méthode la plus sûre est d’utiliser un plateau tournant motorisé. Placez le produit au centre, verrouillez l’appareil photo et l’éclairage, et capturez une image par étape de rotation. Une rotation tous les 10 degrés donne 36 images.¹

La régularité est ce qui rend l’effet crédible :

• Gardez l’appareil photo et la lumière fixes entre les prises de vue pour que seul le produit soit en mouvement.
• Centrez le produit sur le plateau pour qu’il ne se désaxe pas sur les images.
• Photographiez sur un fond propre et net pour pouvoir détacher l’image d’arrière-plan de la même façon à chaque fois.

Choisir le nombre d’images (frames)

Moins de frames accélèrent le téléchargement mais la rotation est saccadée. Plus de frames fluidifient l’effet, avec un poids en kilooctets plus élevé. 24 frames (par crans de 15 degrés) est une version plutôt légère ; 36 frames (par crans de 10 degrés) est le juste milieu très populaire ; 72 frames doublent l’effet de fluidité mais aussi le téléchargement global.¹

Travailler sans studio photo

Si vous n’êtes pas équipé en interne, un studio de photographie de produits peut vous fournir une séquence prête à l’emploi. Nombre d’entre eux vous fourniront 36 JPEG HD par produit par tranches de 10 degrés.¹ Il ne vous restera plus qu’à ajuster la mise en forme et l’intégration web.

Préparation des fichiers

Les rushs de studio sont rarement directement mis en ligne. Trois étapes s’imposent.

1. Nommez les images par ordre. Utilisez le format numérique rempli de zéros (frame-01.webp … frame-36.webp) de sorte que le viewer puisse les charger dans le bon ordre d’exécution.
2. Recadrez et alignez chaque frame à l’identique. La moindre différence d’alignement produira une vibration lors de la rotation.
3. Compressez chaque image. C’est l’étape que la grande partie des sites e-commerces saute, et c’est pourtant celle qui préserve la rapidité d’affichage.

Les formats récents sont mieux compressés. Les images WebP sont plus légères de 30 % que le JPEG avec la même qualité, et l’AVIF le fait encore mieux.⁴ Pour les photos de produits, régler la qualité entre 75 et 85 permet de garder vos détails en écourtant le poids d’origine.⁴

Faites le calcul sur un total global. 36 frames pesant chacune 300 Ko donnent un total de 10,8 Mo. Vos 36 frames de 60-80 Ko atteignent seulement 2 voire 3 Mo.¹ C’est tout ce qui détermine une bonne PDP rapide vis-à-vis d’une lente.

Trois façons d’ajouter un spin 360 à une PDP Shopify

Il y a trois approches. Elles diffèrent par l’effort de mise en place, l’emplacement du code et les éléments requis.

Méthode 1 : Média 3D et AR natif Shopify

Shopify permet l’ajout de modèles 3D directement dans votre onglet Médias du produit. Uploadez un modèle et le thème s’occupe de l’afficher avec le composant model-viewer de Google, et les acheteurs pourront alors y faire un zoom ou une rotation sur l’interface du navigateur.² L’AR marche par le module Shopify-XR, moteur sous le capot de l’AR natif sur Quick Look avec Safari iOS ainsi que Scene Viewer avec Android.²

Dans un thème, le système affiche les médias via la boucle product.media appliquant le fameux filtre Liquid assigné. Sur l’utilisation d’un modèle 3D ce filtre est model_viewer_tag.²

Le principal compromis est la ressource utilisée. Les médias natifs Shopify utilisent un modèle 3D, mais jamais de spin de photos. S’il ne vous reste qu’un tournage de type photographique à place de modélisation réelle, cette pratique est donc inopportune. La recommandation d’UX sur Shopify consiste à ce que le contenu 3D natif par défaut désactivé à chargement, accompagné d’une barre de loading pour qu’elle puisse se charger.⁵

Pour mettre en ligne un modèle avec 0 code à l’appui, rendez-vous dans le menu Produits > (votre produit) > Médias. Pour suivre de l’optimisation des médias associées, reportez-vous sur comment ajouter de la vidéo à une page de produit sur Shopify et d’autre part comment mettre à jour des images de vos produits Shopify.

Méthode 2 : Une application de spin 360

Les applications de spin reprennent des suites d’images et créent une interface complète interactive prête sur votre PDP. Le flux consiste à envoyer vos images sur l’interface de plugin, régler ses niveaux, par ex le toucher sensible ou la fonction auto, avant d’ancrer le module sur la présentation web par un outil injecté.

Le plus grand profit c’est son traitement immédiat. Sans la partie de construction du support, votre module est adapté à intervertir le mobile avec les clicks inter-images. Par défaut la concession à cela est similaire aux systèmes habituels : un appel script rajouté avec l’usage récurrent sur une page produit pour tout markup inabordable sur lequel nous n’avons aucun statut. Testez et gardez l’œil par son résultat PDP avant tout.

Méthode 3 : Un viewer de spin JavaScript sur mesure (custom)

Si vous voulez le viewer dans votre propre thème sans script tiers, un spinner sur mesure ne demande que peu de code. L’idée : précharger la séquence d’images, puis changer l’image visible en fonction de la distance de glissement du pointeur.

<div id="spin-360" data-frames="36" style="touch-action: pan-y;">
    <img
        id="spin-frame"
        src="/cdn/shop/files/frame-01.webp"
        width="1200"
        height="1200"
        alt="Product 360 view, frame 1"
    />
</div>

<script>
    const el = document.getElementById('spin-360')
    const img = document.getElementById('spin-frame')
    const total = parseInt(el.dataset.frames, 10)
    const base = '/cdn/shop/files/frame-'
    const pad = (n) => String(n).padStart(2, '0')

    let current = 1
    let dragging = false
    let startX = 0

    // Preload frames so swaps are instant once the viewer is active.
    const preload = () => {
        for (let i = 1; i <= total; i++) {
            const pre = new Image()
            pre.src = base + pad(i) + '.webp'
        }
    }

    const setFrame = (n) => {
        current = ((n - 1 + total) % total) + 1
        img.src = base + pad(current) + '.webp'
    }

    const onMove = (x) => {
        if (!dragging) return
        const step = Math.round((x - startX) / 8) // pixels per frame
        if (step !== 0) {
            setFrame(current + step)
            startX = x
        }
    }

    el.addEventListener('pointerdown', (e) => {
        dragging = true
        startX = e.clientX
        preload() // load the full set on first interaction, not on page load
    })
    window.addEventListener('pointermove', (e) => onMove(e.clientX))
    window.addEventListener('pointerup', () => (dragging = false))
</script>

Deux détails font que ce viewer fonctionne bien. Les Pointer events couvrent la souris et le tactile dans un seul code. touch-action: pan-y sur le conteneur permet aux acheteurs de continuer à faire défiler la page verticalement tout en faisant glisser la rotation horizontalement, ce qui est important sur mobile.

Le préchargement à la première interaction, plutôt qu’au chargement de la page, garde le lourd ensemble d’images en dehors du chemin critique (critical path). La première image est une image normale dans la galerie ; le reste ne se charge que lorsque l’acheteur interagit avec la rotation.

Les URL des images supposent que vos fichiers gardent leurs noms dans Contenu > Fichiers. Shopify peut renommer un fichier uploadé lorsqu’un fichier du même nom existe déjà, alors vérifiez l’URL de chaque image après l’upload.

Créer cela à la main implique de modifier les fichiers du thème. Si vous préférez décrire le viewer en langage clair et obtenir un code natif Shopify, respectant votre image de marque, c’est ce que fait Fudge via son éditeur de boutique, sous forme de brouillon que vous pouvez tester sur un produit en ligne avant de le publier.

Pour le reste de la page produit, consultez notre guide sur la personnalisation d’une page produit Shopify.

Interaction tactile (drag et touch) sur smartphone

Le smartphone est la zone où un viewer satisfait vraiment ou frustre. On constate deux erreurs de fond.

• Glissement horizontal comparatif avec son mouvement vertical. En ôtant de touch-action: pan-y, toute manipulation horizontale détient une force trop supérieure. Paramétrer ce touch-action donne les règles pour adapter l’effet du viewer de base.
• Tape (clic) contre déplacement de glissements. Son accès normal ne peut annuler cet état par un seul clic. Il modifie ce point à des fins simples avec des déplacements ultra courts ce qui explique le simple tap fait suite à la frame telle qu’elle apparaitra.

Les informations de médias propres de la politique Shopify préconise l’inactivité par défaut sur un affichage sur mobile, permettant la déclinaison d’action des manuels en annulant la détection auto préconstruite d’expérience client complète.⁵ Ajustez l’impact du composant normal lors du codage. En un mot : chargez-le bien lors une simple frame et donnez suite avec son changement exclusif que le l’internaute fera au dernier moment par clic manuel long.

Performance : gardez le spin hors du critical path

Un viewer 360 est l’une des choses les plus lourdes que vous puissiez intégrer à une PDP. Un ensemble de 36 images pleines résolutions pèse 10 à 20 Mo.¹ Mal gérée cela bloque complètement votre site global et les délais afférents. Le format suivant peut modifier son rôle et sa mise en ordre correcte.

1. Compressez chaque image (frame)

Comme dit plus haut ceci représente le meilleur gain possible. Un travail des médias comme du modèle : faites face avec des extensions WebP ou AVIF, étant capables d’exploiter la norme de compression du format de l’ordre d’environ 30 % avec JPEG respectif selon les qualités acquises.⁴ Compter à la ligne à environ une poignée de l’ordre de dizaines en Mo mais non cent en KB globaux.¹

2. Lazy-loader les ensembles de la séquence web

Seuls les premiers accès initiaux des résolutions de chargement valent l’usage complet. Ne charger que leurs déclinaisons interactives liées au lancement interactif utilisateur, au profit notamment ou quand bien même sa zone correspond autour d’un placement visuel (viewport) se pose dans les abords de champ respectif d’interface. À proprement utilisé l’intégration par attribut en standard soit loading="lazy" va permettre ce gain et bloquer l’usage de données inapercues.³ Cette déclinaison fonctionnelle rend un résultat optimisé avant utilisation sur son déclenchement, avec une charge différée au clic ainsi montré sur l’aspect complet détaillé du document avant qu’il ne se lance.

3. Protégez votre image LCP

Ne lazy-loadez pas votre image LCP. web.dev souligne formellement : désactiver ou refuser tout concept d’image lazy load susceptible d’entrer du premier coup avec la vue (viewport) immédiate de chargement, ce format incluant très largement le type dit image LCP.³ Typiquement avec base pour une PDP l’affichage des informations image de galerie d’accueil constitue son objet typique LCP, laissez son ordre normal complet par système instantané (eager load) ; pour cela un bloc de restriction complète en différé s’allie logiquement vers les suppléments tels que la séquence 360 entière. On veillera particulièrement à fixer sur une référence fixe l’assignement de taille de fond concernant ses objets pour s’éclipser : format width puis height via son but sur aucune déclinaison ni le CLS Layout Shift.³

Etant en complément afin de l’accélération d’exécution large en global pour ce travail sur un développement PDP orientez vous vers l’article dédié expliquant les actions et procédés de performances relatives Shopify orienté avec thème tout autant la bonne application comment un différé vidéo de la gestion globale et locale l’optimisation au module Shopify propre, dont se basent au global et tout modèle identique différé ou appelé jusqu’aux exigences requises des médias pesants d’utilisation large.

Apps vs custom code : une comparaison honnête

Aucune des deux méthodes n’est strictement meilleure. Cela dépend de votre équipe.

Une application de rotation 360 est le bon choix si vous voulez que le viewer soit en ligne rapidement, que vous ne voulez pas maintenir le code du thème, et que cela ne vous dérange pas d’ajouter un script d’application supplémentaire à la PDP. L’application gère le changement d’image et le tactile pour vous.

Le code sur mesure est le bon choix si vous voulez le balisage du viewer dans votre propre thème, que vous tenez à contrôler exactement quand les images se chargent, et que vous voulez éviter des frais d’application récurrents et un script tiers supplémentaire. Le coût est le code et son entretien.

L’approche 3D native est à part : elle offre aux acheteurs de la vraie 3D et de l’AR là où c’est pertinent, mais elle nécessite un modèle 3D, pas des photos, ce n’est donc pas un remplacement direct pour une rotation de photos.

Quelle que soit la méthode que vous choisissez, l’ordre de votre galerie reste important pour savoir quelle image se charge en premier. Découvrez comment réorganiser les images de produits dans Shopify pour vous assurer que votre image LCP est celle que les acheteurs voient en premier.

FAQ