Design du Formulaire d'Achat

Fonctionnalités, Page de Collection, Page Produit

Design du Formulaire d'Achat

Ce tutoriel s'applique à la version la plus récente du Phantom Thème. Veillez à mettre à jour votre thème en suivant le tutoriel vidéo disponible sur votre Espace Client.

Je conseille d'utiliser le paramétrage avec l'option Nombre de jours avant que la Popup ne réapparaisse sur Mode Test afin de vérifier vos modifications.

Master +

Introduction 

Le formulaire d'achat sur la page produit est désormais en 2 style distincts : 

  • Sous forme de liste déroulante
  • Sous forme de boutons

Détaillons ces formats :

  • Liste déroulante :

Permet au client de sélectionner la/les variante(s) désirée(s) du produit en question comme ceci :

  • Boutons :

Permet au client de sélectionner la/les variante(s) désirée(s) du produit en question comme ceci :

Dans cet exemple, les options ne sont pas des couleurs, l'affichage seront donc composés de boutons possédant la valeur de la variante à l'intérieur, le tout définit par option.

Ainsi lorsque le client cliquera sur un bouton (l'ordre des options étant pris en compte), si par exemple ici la variante "36 / FRANCE / €" est disponible mais pas la variante "36 / FRANCE / $", alors une croix apparaîtra sur le dollar, le tout étant réactif au changement de la part du client.

 

Voici un exemple où le produit comporte l'option Couleur et une autre option, ici Taille :

Ici les couleurs sont définit par l'utilisateur du thème (expliqué ci-dessous dans le tuto).

Il est également possible grâce au paramètre "Couleurs utilisées pour les vignettes" d'afficher les images des variantes associées à la place des couleurs.

Définir ses couleurs 

 Les couleurs apparaitront automatiquement si tenté qu'elles soient parmi les 140 couleurs html de base : Couleurs HTML

Les majuscules et espaces ne sont pas pris en compte car chaque couleur définie dans vos variantes sera mise au format minuscule et les espaces seront remplacés.

Ci vous définissez vos variantes de couleurs comme ceci : Noir - Blanc - Bleu, alors vous aurez 3 boutons de couleurs html : Black, White, Blue.

Nous avons définit dans les thème la traduction des 140 couleurs html pour les 5 langues du thème : Anglais, Français, Espagnol, Italien, Allemand. Vous pouvez donc écrire le nom de vos couleurs dans une de ces 5 langues sur votre fiche produit, cela n'empêchera en rien d'afficher la couleur html correspondante en anglais (voir lien Couleurs HTML ci-dessus).

 

Créer ses couleurs

Afin de pouvoir définir ses produits couleurs, il vous faudra réaliser des vignettes vous-même, en format 50x50 pixels et format jpg de préférence.

Une fois réalisé, nommez les en minuscule et remplacer les espaces par des tirets. Chaque vignette doit correspondre à une couleur que vous proposez sur vos produits.

Une fois toute vos couleurs réalisées, il faut désormais les placer dans vos fichiers de votre boutique. Pour cela, rendez-vous dans les paramètres de votre boutique, puis dans "Fichiers", et cliquez ensuite sur "Téléverser des fichiers". Mettez toutes vos couleurs et vous avez terminé ! Les couleurs seront automatiquement appelées lorsque l'utilisateur se trouvera sur un produit contenu les couleurs concernés.

 Remarque : Si un filtre avancé contenant des couleurs est mis en place sur la page de Collection (cf Filtrage Collections), alors les vignettes de couleurs apparaîtront également.