THÈME SHOPIWEB
  • INTRODUCTION
  • SECTIONS
    • PANIER COULISSANT
      • Comptes à rebours panier
      • Barre d'annonces
      • Bump en 1 clic
      • Image
    • MODÈLE
      • INFORMATIONS PRODUITS
        • Badge personnalisé
        • Texte
        • Texte enrichi
        • Note de produit
        • Séparateur
        • Pop-up
        • Pack de produits
        • État des stocks
        • Estimation de livraison
        • Sniper live
        • Image
        • Rangée réductible
        • Description
        • Offre groupée
        • Liquid personnalisé
        • Champ texte personnalisé
        • Collection personnalisé
      • Barre d'annonces
      • Instagram galerie
      • Parallaxe
      • Marque logo/ texte
      • Articles de blog
      • Bannière avec image
      • Bannière avec vidéo
      • Bordure personnalisée
      • Collage
      • Collection en vedette
      • Contenu personnalisé
      • Contenu réductible
      • Formulaire de contact
      • Image avec texte
      • Inscription à la liste de diffusion
      • Liste des collections
      • Multicolonne
      • Navigation personnalisée
      • Onglets multiples
      • Produit en vedette
      • Suivi commande
      • Texte dynamique
      • Texte défilant
      • Texte enrichi
      • Témoignages
      • Vidéo
      • Vidéo avec texte
      • Diaporama
  • PARAMÈTRES DU THÈME
    • Écosystème du thème
    • CODE PERSONNALISÉ
      • Head
      • CSS
      • JavaScript
    • EFFECTS
      • Effect titre
      • Effect SVG sous-titre
      • Effect paragraphe
      • Effect bouton
      • Effect image
      • Effect block
    • RÉSEAUX SOCIAUX
      • Twitter
      • Facebook
      • Pinterest
      • Instagram
      • Tik Tok
      • Tumblr
      • Snapchat
      • YouTube
      • Vimeo
    • PARAMÈTRES GÉNÉRAUX
      • Image favicon
      • Mise en page
      • Grille
      • Codes de devise
      • Suggestions de produits
      • Carrousel
    • COULEURS
      • Couleurs primaires
      • Couleurs secondaires
      • Boutons de paiement (ATC)
      • Couleurs prix
    • TYPOGRAPHIE
      • Titre
      • Corps
    • BOUTONS
    • CONTENEURS
      • Style de variantes
      • Entrées
      • Cartes
      • Conteneurs de contenu
      • Style d'image et vidéo
      • Menus déroulants et pop-ups
      • Tiroirs
      • Badges
    • APPLICATIONS
      • Protection de boutique
      • Flèche de retour en haut
      • Liste de souhaits
      • Cookies RGPD
      • Chat de messagerie
    • PANIER
    • PASSAGE À LA CAISSE
    • CSS PERSONNALISÉ
    • STYLE DE THÈME
      • Changer le style du thème
  • MISES À JOUR
    • Thème ECOM PRO
  • LAISSEZ UN AVIS
Propulsé par GitBook
Sur cette page
  • Des images à la place de couleurs pour vos variantes shopify
  • Préparez vos visuels de variables avec Canva
  • Insérez les visuels de variantes depuis votre tableau de bord Shopify®
  • Ajoutez les variantes à vos produits
  • En route pour la personnalisation
  • Admirez le résultat !

Cet article vous a-t-il été utile ?

  1. PARAMÈTRES DU THÈME
  2. CONTENEURS

Style de variantes

Personnaliser votre page produit grâce aux variantes shopify

PrécédentCONTENEURSSuivantEntrées

Dernière mise à jour il y a 2 ans

Cet article vous a-t-il été utile ?

Les variantes produits shopify vous offrent la possibilité de vendre un même produit dans différentes couleurs. Grâce à la fonctionnalité avancée du thème français SHOPIWEB, il est maintenant possible de créer des variantes shopify sous forme de textures. C’est l’option idéale lorsque vous vendez des produits de beauté, de cosmétiques ou des produits confectionnés en tissus.

Dans le tutoriel qui suit, vous allez apprendre à configurer les variantes shopify de vos pages produits avec le thème SHOPIWEB. Vous devez donc posséder une licence active et installée sur votre compte Shopify®. Si ce n’est pas encore le cas, vous pouvez la télécharger depuis .

Des images à la place de couleurs pour vos variantes shopify

D’un point de vue marketing, il peut être intéressant de proposer à vos clients des photos de textures de votre produit plus que des couleurs. Le thème SHOPIWEB vous permet de télécharger sur votre boutique des photos de votre produit pour permettre à vos clients de sélectionner le produit de leur choix à partir d’une variante de texture.

Par défaut, ce sont des boutons avec le titre de la variable qui s’affiche sur votre page produit. Dans la suite de ce tutoriel, vous allez apprendre à changer cette configuration.

Préparez vos visuels de variables avec Canva

Afin que les textures s’affichent correctement sur votre page produit, vous allez avoir besoin de créer des visuels de chacune des variables shopify. Grâce au logiciel de design gratuit Canva, cette étape est facile et rapide.

  • Depuis Canva, cliquez sur “Créer un design” > “Dimension personnalisée”

  • Entrez les valeurs suivantes :

    • Largeur : 150

    • Hauteur : 150

    • Choisissez comme unité de mesure : px

  • Cliquez ensuite sur “Créer un nouveau design” pour voir une nouvelle fenêtre s’ouvrir

  • Téléchargez les photos de votre produit et faites glisser le premier visuel sur le plan de travail

  • Augmentez la taille de la photo jusqu’à effectuer une sorte de zoom sur la texture du produit (l’objectif est de remplir votre plan de travail)

  • Sous le plan de travail se trouve un bouton “+Ajouter une page” pour voir un nouveau plan de travail vierge apparaître en dessous

  • Recommencer la procédure pour chacune de vos textures

  • Une fois que vous avez terminé de créer tous les visuels, cliquez sur “Partager” > “Télécharger” > sélectionnez le format JPEG à une qualité de 100% puis cliquez sur le bouton “Télécharger”

Insérez les visuels de variantes depuis votre tableau de bord Shopify®

  • Rendez-vous maintenant sur votre tableau de bord Shopify® puis cliquez sur “Paramètres” > “Fichiers”

  • Cliquez ensuite sur “Importer les fichiers” et sélectionnez tous les visuels créés lors de l’étape précédente

  • Une fois que les fichiers sont téléchargés, cliquez sur le menu “Champs méta”

  • Cliquez maintenant sur “Variantes” > “Ajouter une définition”

  • Entrez le nom suivant : image

  • Dans le champ “Espace de nom et clé”, inscrivez : image.swatch

  • Dans le champ “Description”, écrivez par exemple : Pastilles images

  • Dans le dernier champ, cliquez sur le bouton “Sélectionner un type de contenu” et cliquez sur “URL” qui se trouve en bas du menu déroulant

  • Terminez en cliquant sur le bouton “Enregistrer”

Bravo, vous avez à présent créé une variante qui vous permettra d’intégrer les visuels en tant que variantes.

Ajoutez les variantes à vos produits

  • Ouvrez le menu “Paramètres” > “Fichiers” dans une nouvelle fenêtre de votre navigateur

  • Retournez sur le tableau de bord Shopify® puis cliquez sur le menu “Produits”

  • Ouvrez le produit dans lequel vous souhaitez ajouter les variantes de textures

  • Descendez au bas de la page jusqu’à l’option “Variantes”

  • Bien entendu, vous devez au préalable avoir créé des variantes de produits. Si ce n’est pas fait, vous pouvez les créer maintenant

  • Une fois vos variantes en place, cliquez sur le bouton “modifier” de la variante de votre choix

  • Une nouvelle fenêtre s’ouvre, allez tout en bas jusqu’à l’option “Champs méta”

  • Depuis la fenêtre de votre navigateur dans laquelle le menu “Fichiers” est ouvert, cliquez sur le bouton du lien de la photo de la variante que vous souhaitez copier

  • Retournez à présent dans la fenêtre dans laquelle le menu produit est ouvert, pour copier le lien de l’image dans l’option “Champs méta” situé en face de “Image URL” puis cliquez sur “Enregistrer”

  • Recommencez la procédure pour toutes les variantes dans lesquelles vous souhaitez ajouter une photo

En route pour la personnalisation

  • Depuis le tableau de bord Shopify®, cliquez sur “Boutique en ligne” > “Thèmes” > “Personnaliser”

  • Allez sur la page produit dans laquelle vous avez ajouter les variantes

  • Cliquez sur “Sélecteur de variantes” qui se trouve dans “Informations produits”

  • Une fenêtre sur la droite de votre écran s’ouvre dans laquelle vous avez la possibilité d’activer ou non les labels de variante

  • Cliquez sur “Enregistrer” pour que les modifications soient prises en compte

Retrouvez l’intégralité de ces explications dans la vidéo disponible ci-dessous. Xavier vous accompagne clic par clic pour personnaliser votre page produit grâce aux variantes shopify.

Admirez le résultat !

Félicitations ! Vous savez maintenant créer des variantes de produits qui ont de l’allure. Vous pouvez ajouter autant de variantes que vous avez de choix dans les produits que vous vendez sur votre boutique en ligne créée avec Shopify®.

Besoin d’un coup de main ?

Profitez d’un coaching personnalisé avec Xavier LOPES, le créateur du thème SHOPIWEB. Durant cet entretien privilégié, il vous apprend à devenir autonome en création de boutique e-commerce avec Shopify®. Infos et réservations disponibles sur .

cette page
cette page
Lecteur du tuto vidéo SHOPIWEB pour apprendre à personnaliser sa page produit grâce aux variantes Shopify®