Astuce Shopify : Ajout de contenus automatiques dans les produits

Outils et techniques

[Astuce mise à jour le 15/06/2019] Comment ajouter automatiquement du contenu dans les produits d’un site e-commerce basé sur le langage Liquid, comme les boutiques Shopify ?

Objectif : ne plus avoir à ajouter manuellement des mentions qui doivent figurer dans tous les produits d’un certain type. Il faut créer une page par type (gratuit, payant, service, promotion, etc.), puis modifier le code de la fiche produit pour qu’il affiche cette page automatiquement.

Ces mentions peuvent être les conditions de livraison, des garanties, des icônes de réassurance, un tableau explicatif (tailles de vêtements, …), une promotion spéciale, etc.

L’avantage, c’est que l’on n’a plus à se préoccuper de faire un copier-coller… ni d’aller modifier tous les produits 1 par 1 si jamais on veut, par exemple, allonger les délais de livraison à l’approche du Nouvel An chinois.

(L’une des clés du business est d’automatiser au maximum. Quand on a beaucoup de produits, plus d’oublis ni de questions à se poser lorsque la mention est automatique…)

Nous prenons ci-après l’exemple de mentions différentes ajoutée en dessous de la description de l’article selon qu’il est « gratuit » (moins d’1 €, pour une stratégie free + shipping) ou « payant ».

Tout est montré en détails dans cette vidéo de 30 minutes :
https://www.loom.com/share/73f7b9ad9c3f471b9750b3c27694ad32

A. Créer les pages contenant les textes voulus

Créer des pages nous permet de bénéficier de toutes les fonctionnalités de gestion de contenu de Shopify, sans avoir à écrire du code pour gérer nos mentions.

  1. Cliquer sur le menu « Boutique en ligne » (« Online Store »), puis « Pages« .
  2. Cliquer sur le bouton « Ajouter une page » (« Add Page ») en haut à droite.
  3. Nommer la page contenu-produit-gratuit, puis rédiger le contenu voulu.
  4. Cliquer sur le bouton « Enregistrer » (« Save ») en haut à droite.
  5. Cliquer de nouveau sur « Ajouter une page« .
  6. Nommer la page contenu-produit-payant, puis rédiger le contenu voulu.
  7. Cliquer sur le bouton « Enregistrer« .

B. Modifier le code de la fiche produit

Pour insérer ces pages, il va falloir utiliser cette syntaxe du langage Liquid :

  • {{ pages.NOM-DE-LA-PAGE.content }}

Pour appliquer des conditions d’insertion, il faudra utiliser l’instruction « if / elsif / else / endif » avec l’une de ces 3 syntaxes (de la plus simple à la plus complexe) :

  • {% if CONDITION %} CONTENU-SI-VRAI {% endif %}
  • {% if CONDITION %} CONTENU-SI-VRAI {% else %} CONTENU-SI-FAUX {% endif %}
  • {% if CONDITION-1 %} SI-CONDITION-1-VRAIE {% elsif CONDITION-2 %} SI-CONDITION-2-VRAIE {% else %} SI-TOUTES-FAUSSES {% endif %}

Procédure :

  1. Cliquer sur le menu « Boutique en ligne » (« Online Store »), puis sur « Thèmes » (« Themes »).
  2. Cliquer sur le bouton « Actions« , puis choisir « Modifier le code » (« Edit code »).
  3. Dans la section « Templates« , cliquer sur le fichier product.liquid.
  4. Appuyer sur les touches [CTRL-F] pour ouvrir la zone de recherche, taper « product.description » (sans les guillemets !), puis appuyer sur la touche [ENTRÉE].
  5. Vous devez trouver une ligne contenant le code {{ product.description }} : selon qu’on veut ajouter le texte avant ou après la description du produit, insérer ces 5 lignes juste avant ou juste après la ligne contenant {{ product.description }} : 
    {% if product.price <= 100 %}
    {{ pages.contenu-produit-gratuit.content }}
{% else %}
    {{ pages.contenu-produit-payant.content }}
{% endif %}
  6. Cliquer sur le bouton « Enregistrer » (« Save ») en haut à droite.

C. Exemple gérant de multiples conditions

{% if product.price <= 100 %}
    {% comment %}PRODUIT DE PRIX INFÉRIEUR A 1 EUR{% endcomment %}
    {{ pages.contenu-produit-gratuit-debut.content }}
    {{ product.description }}
    {{ pages.contenu-produit-gratuit-fin.content }}
{% elsif product.title contains "Service" %}
    {% comment %}PRODUIT DONT LE TITRE CONTIENT "SERVICE"{% endcomment %}
    {{ product.description }}
    {{ pages.contenu-produit-service.content }}
{% elsif product.tags contains "Promotion" %}
    {% comment %}PRODUIT CONTENANT UNE BALISE "PROMOTION"{% endcomment %}
    {{ pages.contenu-produit-promo.content }}
    {{ product.description }}
{% else %}
    {% comment %}PRODUIT "NORMAL"{% endcomment %}
    {{ product.description }}
    {{ pages.contenu-produit-normal.content }}
{% endif %}

Conclusion

Voilà, vous pouvez commencer à automatiser une partie de votre boutique et améliorer le service apporté à vos visiteurs.

Et là où cette technique est surpuissante, c’est que vous pouvez également l’appliquer aux notifications ! C’est-à-dire insérer automatiquement des mentions conditionnelles dans les e-mails envoyés à vos clients, tels que le panier abandonné, la confirmation de commande, la confirmation d’expédition, etc.

Vous voulez aller plus loin ? Apprenez à coder en Liquid. Voici plusieurs ressources utiles (gratuites) :

Amusez-vous bien !

Recevez toutes nos astuces + nos 4 outils gratuits pour votre boutique :
https://beyondthecode.fr/nos-outils-ecommerce-gratuits-pour-votre-boutique-shopify/

Laisser un commentaire