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 le client fait défiler pour faire tourner le produit. Une configuration courante comprend 36 images à des intervalles de 10 degrés.¹
• Shopify intègre nativement des médias 3D et AR dans son système de médias de produits. Cela utilise le model-viewer de Google et nécessite un modèle 3D, pas une séquence de photos.²
• Pour les vues 360° à partir de photos, vous avez le choix entre une application 360 et un viewer JavaScript sur mesure. Les applications sont plus rapides à déployer ; le code sur mesure permet de garder le markup directement 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 mettez jamais votre image LCP en lazy-loading. La première image de la galerie que l’acheteur voit doit être chargée immédiatement.³

La photographie de produit à 360° montre un produit sous tous les angles dans un seul viewer interactif. L’acheteur fait glisser son curseur vers la gauche ou la droite, ou les images tournent automatiquement, et le produit semble pivoter. Sur une page produit Shopify (PDP), cela élimine les devinettes en offrant une vue complète de l’article.

Ce guide explique comment capturer les images, préparer les fichiers et ajouter un spinner sur la page. Il compare les médias 3D natifs de Shopify, les applications dédiées à la vue 360° et les viewers codés sur mesure, tout en considérant la vitesse de chargement comme une priorité absolue.

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 avons créé Fudge - un page builder et éditeur de boutique Shopify basé sur l’IA, noté 4.8 sur l’App Store et doté du badge Built for Shopify. Nous travaillons tous les jours avec les médias de 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 options. Elles varient sur les efforts d’installation, l’emplacement où se trouve le code, et ce dont elles ont besoin en entrée.

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 l’installation du code est nécessaire via son thème direct avec peu d’enclenchement via partie tierce, il suffit de manipuler le système avec un script en interne. En fait la pratique réside au fait de : charger l’ensemble des suites sur votre serveur ; par conséquent vous décidez l’image qui apparait par l’étendue des manières d’action tactiles.

<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="Vue 360 du produit, 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;

  // Précharger les frames pour des rendus immédiats à l'usage sur la plateforme.
  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 par frame
    if (step !== 0) {
      setFrame(current + step);
      startX = x;
    }
  };

  el.addEventListener("pointerdown", (e) => {
    dragging = true;
    startX = e.clientX;
    preload(); // exécute sur premier instant tactile, non pas lors de l'accès site.
  });
  window.addEventListener("pointermove", (e) => onMove(e.clientX));
  window.addEventListener("pointerup", () => (dragging = false));
</script>

Ce format rend un usage optimal de lecture grâce à deux apports. Vos actions globales tactiles Pointer events (par rapport aux clickers de la route avec le même modèle). touch-action: pan-y permet d’afficher et de diriger les clients sans brader tout le fonctionnement de navigation du site au complet lors du drag tactile mobile par ligne.

De la même façon, tout processus sera réalisé comme d’ordinaire dans un préchargement de première exécution, en supprimant ce format lourd lors du moment décisif lors qu’un usager atteint la zone. Ce modèle normal remplit de la façon parfaite dans sa première vue image ; et un déclencheur le complète par le drag au bon moment.

Cette fonction requiert d’installer tout et retoucher à la main. Vous préférez exprimer l’intention, générer ce markup et obtenir la conception d’état de votre boutique tout fait afin d’avoir votre format Shopify par défaut, rendez-vous chez Fudge. Visitez l’explication plus large à suivre l’optimisation par la personnalisation de la page Shopify du produit.

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

Il n’y a pas formellement de choix gagnant complet. Suivant comment sont disposées l’application sur le flux des usages par votre niveau d’équipement.

Cette version via l’usage d’une application est adéquate si les accès immédiats sur mise des diffusions interactifs sans délais sur des ressources comptent énormément de l’urgence, ou moins le travail de type code d’application avec l’intention totale acceptée de rajout code en un outil application d’usage script PDP qui tourne en arrière au site. Le programme assume d’intégrer automatiquement fonction auto comme paramètre.

Du code custom gagne fortement sur son choix si ses attributs font de lui tout ce qui lui offre en code HTML vers un respect avec sa direction complète de l’application thème avec des appels aux chargements optimisés selon votre propre niveau de précision : le format pour limiter d’utiliser et souscrire encore pour ce traitement, qui coûte globalement au forfait application abonnement récurrent plus tierce d’usages en script avec les mises et maintien en suivi direct qui incombe cette option.

Nous ajoutons une alternative dont il sort complètement aux autres qui constitue de nature comme le système en rendu par 3D direct : exceptionnel quand tout s’y prête ; alors oui elle intègre logiquement ce format depuis modèle propre modélisant l’état avec son modèle via la 3D, mais loin en rapport d’effett photo ; il permet sans comparaison sans d’aucune image standard tournante possible dans le cas du choix de l’état pur de type photographique.

Sur quoi il vaut de souligner de choisir, que chaque format garde la règle du placement de ses médias initiaux complets : en son centre même on définit avec l’apparition avec ses usages dont sa vue primaire de démarrage. Apprenez ce système en réarrangement des médias images pour le fond à une gestion sur Shopify de s’assurer ce cadre parfait avec ses acheteurs et client selon son entrée du fameux élément objet visuel image avec LCP vu de premier abord devant.

En résumé

La photographie de produit 360 change de vue et permet ce principe interactif à l’effet de plateau en le constituant statique avant. Saisissez ce processus avec ses prises sur le système d’usages entre 24 ou voire vers au modèle et ses 72 pour un passage fort réduit par la compression de masse : incluez ce traitement et utilisez les sur pages par ses méthodes classiques 3D propres du média, via une extension plugin application et voire au mieux encore sur Javascript intégré sur-mesures (custom code), et ce dont le niveau correspond le mieux d’abord à base pour d’autant de bonne méthode de maintien en vitesse : son rendu est optimisé après diminution compression image. Lazy-loadez l’ensemble du set, sans lazy-loader jamais au LCP image au vue du format image initial première impression LCP.¹³⁴

Vous êtes peu d’appétence avec un besoin manuel touchant du codage ou désirez parler explicitement aux mots d’utilisateur en une écriture d’instruction et ses mots propres : ce Fudge créera directement du contenu de construction sur la norme de standard pour l’app natif sur ses fonctionnalités vers de vos objets au Shopify en direct pour produire les éléments propre aux pages du media directement depuis propre thème.

FAQ