Ajouter un champ personnalisé sur des fiches produits Shopify

Vous vendez des produits qui nécessite une information de la part de votre client comme un prénom à afficher sur un collier ou une image à imprimer sur un mug ?

Par défaut, les fiches produits Shopify ne permettent pas aux clients d'ajouter d'information lorsque qu'un produit est ajouté au panier.

Je vais vous expliquer comment ajouter des champs personnalisés sur votre fiche produit Shopify.

Je vais m'appuyer sur le thème Début pour la suite.

Tout d'abord, nous allons sur l'admin Shopify :

• Cliquez sur Boutique en ligne
• Puis, sur le thème utilisé, cliquez sur Actions puis modifier le code
• Ensuite, ouvrez le fichier product-template.liquid dans Sections

Gérer les images ou documents de votre client

• Recherchez le code commençant par {% form
• Nous ajoutons la propriété enctype: 'multipart/form-data' à notre formulaire. Cela permet de collecter les images ou documents envoyés par votre client.

Nous nous retrouvons avec une ligne ressemblant à ceci :

{% form 'product', product, ..., enctype: 'multipart/form-data' %}

Ajouter un champs personnalisé en fonction du type de produit

Le template product-template.liquid est le meme pour tous les produits. Si nous ajoutons un champs personnalisé, ce champs apparaitra alors pour tous les produits.

Si nous vendons plus d'un produit, il vaut mieux afficher les champs personnalisés sur des produits spécifiques.

Dans notre exemple, nous allons afficher des champs personnalisés en fonction du type de produit.

Admettons que nous avons deux types de produits :

• un type de produit Produit personnalisable avec 1 image pour des mugs où le client peut envoyer une image
• et un type de produit Produit avec texte personnalisable où le client peut écrire un prénom

Nous ajoutons ce code à l'intérieur du formulaire

{% case product.type %}
  {% when "Produit personnalisable avec 1 image" %}
    {% include 'custom-fields-image-personnalisable' %}
  {% when "Produit avec texte personnalisable" %}
    {% include 'custom-fields-texte' %}
{% endcase %}

Ce code ajoutera les champs personnalisés en fonction du type de produit.

Ajout du champ texte personnalisé

Nous ajoutons le fichier custom-fields-texte.liquid dans Snippets. Et nous y ajoutons le code suivant:

<ul>
  <li class="block">
    <label for="custom-name">Prénom</label>
    <input type="text" id="custom-name" name="properties[Name]" required="required">
  </li>
</ul>

Ajout du champs image personnalisée

Nous ajoutons cette fois le fichier custom-fields-image-personnalisable.liquid dans Snippets. Et nous y ajoutons le code suivant:

<ul>
  <li class="block">
    <label for="filename">Image</label>
    <input type="file" id="filename" name="properties[Image]" accept="image/png, image/jpeg" required="required">
  </li>
</ul>

Adaptation

Nous avons utilisé ici le type de produit pour afficher les champs personnalisés. Notez qu'il est possible de les afficher aussi en fonction des tags, collections, etc.

A vous de jouer !