Shopify vous permet de créer jusqu'à 3 variantes de produit, telles que la taille, la couleur et le matériau pour un produit donné. De plus, Shopify considère que toute combinaison de ces options est une variation. Cela peut facilement poser des problèmes aux marchands qui proposent de nombreuses options de personnalisation, car Shopify a également un nombre maximal de variantes (100). Ainsi, si vous êtes un marchand sur Shopify et que vous cherchez un moyen d'étendre cette limite pour offrir plus d'options à vos clients, et que vous n'êtes pas particulièrement enclin à dépenser 10$-50$+ par mois pour une application, continuez à lire car je vais vous montrer comment le faire vous-même, entièrement gratuitement !
IMPORTANT
Il existe certaines limitations avec les propriétés des articles de ligne. Contrairement aux variantes de produit, vous ne pouvez pas suivre l'inventaire ni modifier le prix du produit avec vos champs personnalisés supplémentaires. Si vous choisissez de créer un pack groupé et de permettre à vos clients de choisir plusieurs produits pour le composer, vous devez être confiant de ne pas faire face à une pénurie de stock, car vous pourriez survendre vos quantités disponibles sans aucune protection de la part de Shopify. Les options sélectionnées par le client n'affecteront en aucun cas le prix.
Vous pouvez utiliser cette solution pour créer des packs groupés, personnaliser un produit et bien plus encore !
Étape 1 : Créer un nouveau modèle de produit
Tout d'abord, vous devrez créer un nouveau modèle de produit pour appliquer ces options uniquement aux produits que vous souhaitez.
Pour créer un nouveau modèle de page produit :
- Depuis votre administration Shopify, accédez à Boutique en ligne > Thèmes
- Trouvez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.
- Dans le répertoire Modèles, cliquez sur Ajouter un nouveau modèle.
- Choisissez « produit » dans le menu déroulant et nommez le modèle comme vous le souhaitez (mais n'oubliez pas que ce sera le nom du modèle que vous appliquerez à vos produits, alors assurez-vous d'utiliser un nom descriptif afin de vous souvenir de la fonction de chaque modèle lorsque vous en aurez davantage à l'avenir). Pour les besoins de ce tutoriel, nous nommerons le nôtre « personnalisable ».
- Cliquez sur « créer le modèle ». Cela crée une copie de votre modèle product.liquid, nommée product.customizable.liquid. Le nouveau fichier s'ouvrira dans l'éditeur de code.
- Deux options s'offrent alors à vous. Vous pouvez décider de créer une section entièrement nouvelle pour votre modèle en copiant le code de votre `product.template` actuel et en y apportant les modifications. Dans ce cas, assurez-vous de remplacer 'product-template' de `{% section 'product-template' %}` par le nom de la section que vous avez créée. L'autre option, plus simple, consiste à utiliser le `product.template` existant et à y ajouter une condition de visibilité. Pour ce tutoriel, nous opterons pour la seconde option, mais gardez à l'esprit qu'il est préférable d'utiliser la première option, car la gestion peut rapidement devenir complexe à mesure que vous créez de plus en plus de modèles. Si vous n'avez qu'un seul produit auquel vous souhaitez ajouter une option de personnalisation, la seconde option suffira.
Étape 2 : Création de vos options de personnalisation
Vous pouvez ajouter autant de champs de formulaire personnalisés que nécessaire à votre page produit. Vous pouvez utiliser l'outil Shopify UI Elements Generator pour générer facilement le code HTML et Liquid de chaque champ de formulaire que vous souhaitez ajouter à votre page de panier. Cet outil a été conçu par Shopify pour simplifier l'intégration d'éléments d'interface utilisateur personnalisés, tels que des champs de formulaire et des icônes, aux thèmes Shopify.
- Accédez à l'outil Shopify UI Elements Generator
- Dans la section Définir votre champ de formulaire, sélectionnez le type d'élément de formulaire que vous souhaitez utiliser dans le menu déroulant Type de champ de formulaire
- Si vous souhaitez que votre thème empêche les clients d'ajouter un produit au panier avant qu'ils n'aient rempli votre champ de formulaire, cochez Obligatoire.
- Vous pouvez visualiser un aperçu de votre champ de formulaire dans la section Aperçu
5. Copiez le code généré depuis la boîte de la section Récupérez votre code :
Vous pouvez modifier le texte entre crochets [] du tableau de propriétés 'properties[Choix #1]'. Le texte à l'intérieur, ici 'Choix #1', sera affiché comme titre pour la personnalisation. Assurez-vous donc qu'il est suffisamment descriptif pour que vous sachiez de quoi il s'agit lorsque vous recevez une commande, et pour que le client s'assure que ses choix ont été correctement enregistrés. Le client verra les articles de ligne dans le panier, lors du paiement et sur le reçu.
Étape 3 : Ajout du code au modèle de produit
Pour ajouter des champs de formulaire personnalisés à votre modèle :
- Depuis votre administration Shopify, accédez à Boutique en ligne > Thèmes.
- Trouvez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.
- Dans le répertoire Sections, cliquez sur product-template.liquid si vous avez choisi l'option n°2 de la section 1.6 ou sur la section de modèle de produit que vous avez créée si vous avez opté pour l'option n°1.
- Hit CTRL + F and search for type="submit". If the search doesn't return anything try looking for something that looks like that: {% form 'product', product, id: "AddToCartForm" %}. This is part of the code for the Add to cart button.
- Pour ceux qui ont choisi l'option n°1 de la section 1.6. Sur une nouvelle ligne, au-dessus du bloc de code contenant le bouton Ajouter au panier, collez les champs de formulaire pour la personnalisation de votre produit que nous avons copiés à l'étape 2 :
- For those who chose option #2 in section 1.6. Do the same thing we did in the last step but add {% if template contains 'customizable' %} before your code and {% endif %} on a new line after your pasted code:
- The line where you place the code determines where the form field will appear on your product page. You can experiment with putting the code in different places in the file between {% form 'product', product, id: "AddToCartForm" %} and type="submit". If you paste it outside of those lines your selector might still show but it will not register the data selected by your customers.
- Cliquez sur Enregistrer
Étape 4 : Appliquer votre nouveau modèle à un produit
Pour appliquer un modèle à un produit :
- Depuis votre administration Shopify, accédez à Produits > Tous les produits.
- Cliquez sur le nom du produit qui utilisera votre nouveau modèle.
- Dans la section Modèles de thème, choisissez le modèle que vous avez créé lors des étapes précédentes dans le menu Modèle de produit.
- Cliquez sur Enregistrer
Étape 5 : Test et vérification
Maintenant que vous avez ajouté des propriétés d'articles de ligne à vos produits, nous devons tester votre site web pour vérifier si les sélections des clients seront correctement enregistrées.
- Accédez à la page produit à laquelle vous avez appliqué votre modèle personnalisé.
- Vérifiez que vos options de personnalisation s'affichent correctement. Vous pouvez ajouter quelques lignes de CSS à vos fichiers CSS de thème pour corriger certains problèmes de style.
- Personnalisez votre produit et ajoutez-le à votre panier.
- Vos personnalisations devraient apparaître dans le panier et lors du paiement.
En conclusion, nous avons vu comment ajouter des options de variantes illimitées grâce aux propriétés d'article de ligne. Ces propriétés peuvent être très utiles pour offrir une touche plus personnalisée à vos produits, créer des offres groupées et bien plus encore ! Elles devraient être considérées avant d'opter pour une application Shopify coûteuse.
Si vous rencontrez des difficultés à l'intégrer à votre boutique ou si vous préférez qu'un professionnel qualifié modifie votre code, n'hésitez pas à nous contacter ; nous serons ravis de vous aider !
Rendez-vous dans le prochain article !
