Comment optimiser l’affichage des listes d’ingrédients cosmétiques avec les Metafields Shopify

Introduction : L’importance de l’affichage des ingrédients pour les boutiques cosmétiques en ligne

Les ingrédients des cosmétiques peuvent avoir un impact sur la peau ou provoquer des allergies, il est donc essentiel que les consommateurs puissent consulter ces informations avant l’achat. En ligne, l’absence de l’emballage physique rend la présentation précise et accessible des ingrédients sur le site essentielle pour gagner la confiance des clients et améliorer les ventes et la fidélité.

1. Réglementations principales sur l’étiquetage des cosmétiques selon les pays

• États-Unis (FDA) : Les ingrédients doivent figurer sur l’emballage par ordre décroissant de quantité. eCFR
• Union européenne : L’étiquetage complet des ingrédients avec leur nom INCI est obligatoire. Même pour la vente en ligne, chaque pays exige la publication des listes d’ingrédients conformément aux lignes directrices locales.
• Japon : La loi sur les produits pharmaceutiques impose l’affichage de tous les ingrédients. La Japan Cosmetic Industry Association recommande également l’ajout des noms INCI. cosmetic-ingredients.orgbloom-jp.com

2. Qu’est-ce que les Metafields de Shopify ?

Les Metafields de Shopify permettent d’ajouter des données personnalisées aux ressources existantes telles que les produits, les collections ou les clients. Dans une boutique cosmétique, ils sont idéaux pour gérer des informations comme les « listes d’ingrédients » ou les « avertissements d’allergènes » qui ne figurent pas dans les champs standards, et les afficher librement dans le thème. shopify.devShopify Help Center

3. Exemple de configuration d’un Metafield pour une liste d’ingrédients

1. Panneau d’administration Shopify > Paramètres > Données personnalisées > Produits > « Ajouter une définition »
2. Nom : Ingrédients, Espace de noms et clé : custom.ingredients, Type : Texte sur une seule ligne (Liste de valeurs)
3. Configurer les validations si nécessaire (limite de caractères, etc.), puis enregistrer
4. Dans l’écran de chaque fiche produit, entrer la liste des ingrédients dans la section « Champs méta»

4. Affichage dans la boutique

4-A. Utiliser un bloc spécifique au thème

1. Panneau d’administration Shopify > Boutique en ligne > Personnaliser > Produits > Produit par défaut > Ajouter un bloc comme « Rangée réductible » dans les informations produit
2. Titre : Ingrédients
3. Cliquer sur l’icône à droite de « Contenu de la rangée » > Connecter la source dynamique > Modèle « Produit » > Ingrédients
4. Enregistrer

4-B. Utiliser du Liquid personnalisé

1. Panneau d’administration Shopify > Boutique en ligne > Personnaliser > Produits > Produit par défaut > Ajouter un bloc « Liquid personnalisé » dans les informations produit
2. Copier et coller le code suivant :

{% if product.metafields.custom.ingredients != blank %}
  <section class="product-ingredients">
    <h2>Ingrédients</h2>
    <ul>
      {% for ingredient in product.metafields.custom.ingredients.value %}
        <li>{{ ingredient }}</li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

Conseils :

• custom.ingredients correspond à l’espace de noms et à la clé définis précédemment
• Adapter le style avec du CSS si nécessaire
• Ajouter un balisage PropertyValueList de Schema.org pour renforcer le SEO

5. Bonnes pratiques d’interface

• Affichage réductible : Utiliser un accordéon pour les longues listes améliore la lisibilité
• Optimisation mobile : Prévoir une taille de police et des espacements adaptés aux clics tactiles
• Accessibilité : Utiliser correctement les attributs aria-label et textes alternatifs pour les lecteurs d’écran

Conclusion

Afficher les listes d’ingrédients à l’aide des Metafields Shopify permet de respecter les réglementations tout en renforçant la confiance des utilisateurs. En suivant les étapes ci-dessus, vous pouvez intégrer cette fonction à votre thème et optimiser à la fois l’UX et le référencement.