Comment afficher des articles de blog sur les pages produits Shopify et des produits dans les articles de blog ?

Aperçu

Le contenu éducatif peut améliorer les conversions lorsqu'il apparaît là où l'intention d'achat est la plus forte. Sur Shopify, vous pouvez mettre en avant des articles de blog pertinents sur les pages produits et intégrer des produits avec option « Ajouter au panier » directement dans ces articles. Cela permet de faire le lien entre la recherche et l'achat et de fluidifier le parcours client.

Dans ce tutoriel, vous utiliserez les sections, les métachamps et les sources dynamiques d'Online Store 2.0 pour gérer et automatiser les liens. Vous créerez des métachamps pour stocker les liens entre les produits et les articles, les intégrerez à vos modèles de thème et ajouterez des solutions de repli simples ainsi que des conseils d'optimisation.

Tout ici utilise les fonctionnalités standard du thème. Aucune application personnalisée n'est requise. Vous pouvez toujours l'étendre ultérieurement avec du code Liquid personnalisé ou une application de section si vous avez besoin de plus de contrôle.

Contenu

Prérequis et concepts clés

Vous utiliserez trois fonctionnalités principales : les blogs et les articles, les métadonnées et les sources dynamiques. Les articles sont intégrés à un blog. Les métadonnées vous permettent d’associer des données personnalisées aux produits et aux articles. Les sources dynamiques permettent aux sections et aux blocs de se lier à ces métadonnées sans modifier le code.

  • Les articles et les blogs sont gérés dans votre interface d'administration, sous « Boutique en ligne », puis « Articles de blog ». Chaque article peut comporter une image à la une, des étiquettes et un contenu enrichi.
  • Les métachamps peuvent stocker des références à d'autres ressources, par exemple une liste d'articles sur un produit, ou une liste de produits sur un article.
  • Les sources dynamiques permettent aux paramètres de section d'extraire des valeurs des métachamps, de sorte que les mises à jour de contenu ne nécessitent pas de modification du code du thème.

Ce dont vous avez besoin est activé

  • Thème Boutique en ligne 2.0 avec des modèles JSON et des sections partout.
  • Autorisations de modifier les produits, les articles de blog et les métadonnées dans l'interface d'administration Shopify.
  • Accès à l'éditeur de thème pour ajouter ou configurer des sections sur les modèles de produits et d'articles.

Consultez la documentation officielle concernant les blogs , les métachamps et les sources dynamiques .

Vous allez créer un champ méta produit qui référence les articles, puis afficher ces articles sur le modèle de produit. Cela vous permet de contrôler la curation pour chaque produit, avec un affichage simplifié des articles récents en l'absence de curation.

Étape 1 - Créer un métachamp produit pour les articles

  1. Dans l'interface d'administration Shopify, accédez à Paramètres, puis Données personnalisées et enfin Produits.
  2. Cliquez sur Ajouter une définition et définissez Nom sur Articles connexes et Espace de noms et clé sur custom.related_articles.
  3. Dans le champ Type, choisissez Référence puis Articles, et activez Liste de valeurs pour pouvoir joindre plusieurs articles.
  4. Enregistrez la définition du métachamp.

Étape 2 - Sélectionner des articles sur chaque produit

  1. Ouvrez un produit dans l'interface d'administration et accédez à la section Metafields.
  2. Cliquez sur le champ « Articles associés » et sélectionnez un ou plusieurs articles qui expliquent ou répondent aux questions fréquentes concernant ce produit.
  3. Sauvegarder le produit.

Étape 3 - Générer les articles sur le modèle de produit

  1. Dans la boutique en ligne, puis dans Thèmes, cliquez sur Personnaliser pour ouvrir l'éditeur de thème de votre modèle de produit.
  2. Ajoutez une section prenant en charge le contenu dynamique, par exemple une section Liquid personnalisée ou une section de texte enrichi configurée pour une liste.
  3. Associez le paramètre de section au champ méta produit via des sources dynamiques. Si votre thème ne liste pas nativement les articles, utilisez un bloc Liquid personnalisé et parcourez l'objet `product.metafields.custom.related_articles`.

Conseil : Affichez le titre de l’article, sa date de publication et un court extrait. Limitez la liste à trois ou quatre éléments pour faciliter la lecture en diagonale.

Comment puis-je insérer des produits dans les articles de blog avec des options d'ajout au panier ?

Vous créerez un champ méta d'article faisant référence aux produits, puis vous afficherez des fiches produits ou un formulaire de produit dans le modèle d'article. Cela permettra aux lecteurs d'ajouter des articles à leur panier sans quitter le contenu.

Étape 1 - Créer un métachamp d'article pour les produits

  1. Dans l'interface d'administration de Shopify, accédez à Paramètres, puis à Données personnalisées et enfin à Articles de blog.
  2. Cliquez sur Ajouter une définition et définissez le nom sur Produits phares et l'espace de noms et la clé sur custom.featured_products.
  3. Pour le type, choisissez Référence puis Produits, et activez Liste de valeurs.
  4. Enregistrez la définition du métachamp.

Étape 2 - Sélectionner les produits pour chaque article

  1. Ouvrez un article dans l'interface d'administration et accédez à la section Metafields.
  2. Sélectionnez un ou plusieurs produits pertinents par rapport au contenu.
  3. Enregistrer l'article.

Étape 3 - Intégrer les produits dans le modèle d'article

  1. Ouvrez l'éditeur de thème de votre modèle d'article.
  2. Ajoutez une section ou un bloc permettant d'afficher les fiches produits. De nombreux thèmes proposent une section « Recommandations de produits » ou « Produits phares » que vous pouvez lier à des sources dynamiques. Vous pouvez également utiliser un bloc Liquid personnalisé pour afficher chaque produit sélectionné avec son prix, sa disponibilité et un formulaire d'ajout au panier.
  3. Testez avec un brouillon d'article et confirmez que les produits peuvent être ajoutés au panier depuis la page de l'article.

Remarque : placez autant que possible les options d’achat en haut de page. Si les articles sont longs, répétez le bloc produit après les sections principales.

Comment automatiser la mise en correspondance du contenu via les balises ou la recherche ?

Lorsque vous ne pouvez pas gérer chaque page, utilisez des balises ou des mots-clés prévisibles pour les produits et les articles, puis filtrez dynamiquement. Prévoyez un champ méta de remplacement manuel pour pouvoir épingler des éléments spécifiques au besoin.

Étape 1 - Choisir une taxonomie partagée

  • Choisissez un système, par exemple des étiquettes de produit comme « comment faire », « guide » ou « par ingrédient », ou une chaîne de mots clés de métachamp de produit alignée sur les étiquettes d'article.
  • Documentez les règles afin que les auteurs et les vendeurs appliquent les étiquettes de manière cohérente.

Étape 2 - Implémenter une requête de repli dans Liquid

  • Sur les pages produits, si product.metafields.custom.related_articles est vide, afficher la liste des articles récents d'un blog spécifique ou filtrer par une étiquette partagée figurant dans product.tags.
  • Pour les articles, si le champ méta « Produits phares » est vide, affichez une sélection des meilleures ventes ou filtrez les produits par un champ méta « tag » ou « mot-clé » partagé.

Étape 3 - Analyser les performances et la pertinence

  • Limitez les listes automatisées à un petit nombre d'articles afin de réduire les boucles de traitement des listes dans les catalogues volumineux.
  • Analysez les taux de clics et d'ajouts au panier pour chaque section et ajustez la sélection ou les filtres. Vous devrez peut-être configurer un suivi personnalisé dans Google Tag Manager ou utiliser une autre méthode.

Exemples - Extraits de code Liquid pour les modèles

Ces exemples montrent le code Liquid minimal que vous pouvez insérer dans une section Liquid personnalisée ou un petit extrait de thème. Adaptez le balisage aux composants de votre thème.

 
{% if product.metafields.custom.related_articles != blank %}

 {% for article in product.metafields.custom.related_articles %}
  • {{ article.title }} ( {{ article.url }} ) {{ article.published_at | date: "%b %d, %Y" }} {% if article.excerpt != blank %}

    {{ article.excerpt }}

    {% endif %}
    • {% endfor %} {% else %} {%- assign blog_handle = "news" -%}
      {% for a in blogs[blog_handle].articles limit: 3 %}
    • {{ a.title }} ( {{ a.url }} )
      • {% endfor %}
    {% endif %}

    Loop a présenté des produits dans l'article

     
{% if article.metafields.custom.featured_products != blank %}

 {% for product in article.metafields.custom.featured_products %}

    

     {{ product.title }}

    


     {{ product.url }}
    


    
 {% if product.available %}
 {{ product.price | money }} 
{% else %}
 Épuisé
 {% endif %} 

    


    


 


    


    
 {% endfor %}

    Créez de magnifiques bouquets.

    Packs et kits sur Shopify

    Optimisez la valeur moyenne de vos commandes grâce aux ensembles et kits modulables.

     Voir sur l'App Store

    + 7 jours d'essai gratuit