Ajouter un formulaire de personnalisation aux produits

Vous pouvez collecter des informations sur la personnalisation des produits en utilisant les propriétés des articles. Les propriétés des articles sont des champs de formulaire personnalisés que vous pouvez ajouter à la page du produit, permettant aux clients de faire des choix ou d’ajouter des informations sur un produit. Par exemple, si vous proposez la gravure de produits, vous pouvez utiliser les propriétés d’articles pour permettre aux clients de saisir le texte qu’ils souhaitent voir graver sur le produit.

Utiliser une application pour recueillir des informations sur la personnalisation des produits

Vous pouvez installer une application de personnalisation de produit gratuite ou payante depuis la boutique d’applications Shopify pour ajouter facilement des champs personnalisés à votre page produit.

Modifiez le code de votre thème pour collecter les informations relatives à la personnalisation des produits.

Vous pouvez modifier le code de votre thème en créant un autre modèle de page produit qui inclut des champs de formulaire personnalisés ou des propriétés d’articles. Vous pouvez ensuite appliquer votre nouveau modèle à tout produit pour lequel vous souhaitez recueillir des informations de personnalisation auprès des clients.

Modification du code de votre thème pour ajouter cette fonctionnalité

• Dans le répertoire Template, créez un nouveau modèle nommé product.custom-field.liquid et copiez tout le code de product.liquid dans le même répertoire :
• Dans le répertoire Section, trouvez le fichier product-template.liquid et localisez le bouton Ajouter Au Panier. Le code du bouton addToCart contiendra ce code .

<button type="submit" name="add"

Ajoutez les entrées personnalisées juste au-dessus du bouton d’ajout au panier :

{% if template contains 'custom-field' %}
<div class="custom-fields"  >
<p class="line-item-property__field">
<label for="monogram">Monogram (Short text)</label>
<input required class="required" id="monogram"  type="text" name="properties[Monogram]" placeholder="ABC">
</p>
<p class="line-item-property__field">
<label for="custom-message">Custom message</label>
<textarea required id="custom-message" name="properties[Custom message]"></textarea>
</p>
<div class="line-item-property__field">
<label>Optional features</label>
<p class="option-container">
<input type="checkbox" id="Feature-A" name="properties[Optional-features-Feature-A]"><label class="ep_inline_block" for="Feature-A">Feature A</label></p>
<p class="option-container">
<input type="checkbox" id="Feature-B" name="properties[Optional-features-Feature-B]"><label class="ep_inline_block" for="Feature-B">Feature B</label></p>
<p class="option-container">
<input type="checkbox" id="Feature-C" name="properties[Optional-features-Feature-C]"><label class="ep_inline_block" for="Feature-C">Feature C</label></p>
</div> <div class="line-item-property__field">
<label class="ep_block">Choose an option</label>
<p class="option-container">
<input required type="radio" name="properties[Choose an option]" value="Option 1">
<span>Option 1</span>
</p>
<p class="option-container">
<input required type="radio" name="properties[Choose an option]" value="Option 2">
<span>Option 2</span>
</p>
<p class="option-container">
<input required type="radio" name="properties[Choose an option]" value="Option 3">
<span>Option 3</span>
</p>
</div>
<p class="line-item-property__field">
<label class="ep_block">Choose an option</label>
<select required id="choose-an-option" name="properties[Choose an option]">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</p>
{% comment %} <p class="line-item-property__field">
<label for="custom_photo">Photo (JPG or PNG)</label>
<input required id="custom_photo" type="file" name="properties[Photo]">
</p> {% endcomment %}
</div>
<style>
.custom-fields{
display:block;
}
.option-container{
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 0;
}
.option-container input{
margin-right:10px
}
</style>
{% endif %}

• Dans le code ci-dessus, nous avons commenté le code de téléchargement de fichier parce qu’il ne fonctionne pas avec le panier popup ou le tiroir du panier. Si vous souhaitez utiliser cette fonctionnalité, assurez-vous que vous n’utilisez pas la fonctionnalité de popup ou de tiroir pour le panier.
• Conseils : Vous pouvez trouver ou générer un code d’entrée compatible avec Shopify à partir de shopify ui element generator. Cet outil a été créé par Shopify pour simplifier le processus d’ajout d’éléments d’interface utilisateur personnalisés, tels que des champs de formulaire et des icônes, aux thèmes Shopify
• Dans le répertoire Section, trouvez le fichier cart-template.liquid et localisez le

{{ item.product.title }}

puis ajoutez le code suivant après celui-ci. N’ajoutez pas le code en premier, vérifiez votre panier après avoir ajouté le produit spécifique au panier, si vous ne voyez pas les propriétés que vous avez ajoutées, ajoutez le code suivant à l’endroit spécifique :

{%- assign property_size = item.properties | size -%}
{%- assign properties = 'template ' | split: ' ' -%}
{%- if property_size > 0 -%}
{%- assign properties = item.properties -%}{%- for p in properties -%}
{%- unless p.last == blank -%}
<li class="product-details__item product-details__item--property" data-cart-item-property>
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span> <span data-cart-item-property-value>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</li>
{%- endunless -%}
{%- endfor -%}
{%- endif -%}

• Félicitations, vous avez terminé les parties de codage. Maintenant, allez à un produit aléatoire et définissez le modèle à product.custom-field puis visualisez le produit, vous pourriez voir le formulaire de personnalisation.