Comment ajouter des produits à un article Shopify
Comment integrer vos produits shopify dans le contenu d'un article de blog

Comment ajouter des produits à un article Shopify

5
(3)

L’intégration de produits dans vos articles Shopify n’est pas seulement une pratique recommandée ; c’est une stratégie puissante pour captiver l’attention de vos clients et les guider doucement vers l’achat. Imaginons que vous parcourez un article fascinant sur les dernières tendances de la mode d’été sur votre boutique en ligne préférée. Au milieu du texte, vous trouvez des liens vers des produits spécifiques mentionnés, vous permettant d’acheter instantanément ce qui a capté votre intérêt. Cette approche enrichit considérablement l’expérience utilisateur, rendant le parcours d’achat à la fois fluide et engageant.

Pourquoi est-ce crucial ? En mettant en avant des produits pertinents directement dans vos contenus, vous répondez efficacement à l’intention de l’utilisateur tout en augmentant vos chances de conversion. Shopify, malgré sa robustesse en tant que plateforme e-commerce, n’offre pas directement cette fonctionnalité de manière intuitive. Cela crée un vide pour les propriétaires de boutiques désireux d’optimiser leur stratégie de contenu pour le CRO (Conversion Rate Optimization) sans avoir à se plonger dans des complications techniques.

Il existe des applications Shopify capables d’ajouter des produits en bas de page ou en sidebar, mais elles ne permettent pas d’intégrer des produits directement dans le corps du contenu ni de sélectionner précisément quels produits afficher pour chaque article spécifique. C’est dans cette lacune que nous intervenons. En vous armant des connaissances nécessaires pour incorporer des produits dans vos articles via des techniques de backend avec Liquid ou de frontend avec JavaScript, nous vous offrons la possibilité de combler ce manque. Ces approches vous donnent la liberté de personnaliser votre boutique en ligne pour répondre à vos besoins uniques, renforçant ainsi l’engagement des clients et, par conséquent, augmentant vos ventes. L’adoption de ces stratégies transforme vos contenus en leviers de conversion efficaces, alignant parfaitement l’intérêt d’achat avec l’action d’achat elle-même.

Partie 1 : Ajouter des Produits à un Article Shopify en Utilisant Liquid

Introduction à Liquid

Liquid est un moteur de template open-source développé par Shopify et joue un rôle crucial dans la personnalisation des boutiques Shopify. Il sert de pont entre les données stockées dans la base de Shopify et la présentation de ces données dans les pages de la boutique. Liquid permet aux développeurs et aux propriétaires de boutiques de créer des modèles dynamiques qui affichent les données de manière flexible et personnalisée.

Avantages de l’utilisation de Liquid pour l’intégration de produits

L’utilisation de Liquid pour intégrer des produits dans vos articles présente plusieurs avantages significatifs. Premièrement, elle permet la réutilisation de snippets existants, facilitant ainsi l’intégration sans avoir à réinventer la roue pour chaque nouvel article ou produit. Deuxièmement, puisque les données du produit sont tirées directement de votre inventaire Shopify, les informations affichées restent toujours à jour avec les dernières modifications de prix, les descriptions, ou les stocks.

Un autre avantage notable est que, comme les modifications sont effectuées en backend, les liens vers les produits sont insérés de manière permanente dans le code HTML de vos articles. Cela signifie que ces liens sont visibles par Google, ce qui peut aider à transférer du “jus SEO” de vos articles vers vos pages de produits, améliorant ainsi le classement de ces derniers dans les résultats de recherche.

Étapes pour l’Intégration de Produits via Liquid

1. Accéder aux Fichiers de Thème

Pour commencer, connectez-vous à l’interface administrateur de votre boutique Shopify. Allez dans le menu “Boutique en ligne” puis “Thèmes”. Trouvez le thème que vous utilisez actuellement et cliquez sur “Actions” > “Modifier le code”. Vous accédez ainsi à l’ensemble des fichiers de votre thème, où vous pourrez intégrer ou modifier du code Liquid.

2. Identifier le Fichier Concerné

La prochaine étape consiste à identifier le fichier Liquid responsable de l’affichage des articles de blog. Ce fichier est généralement nommé article.liquid ou quelque chose de similaire, situé dans le dossier “Templates” ou “Sections”. L’objectif est de localiser l’endroit précis au sein de ce fichier où vous souhaitez que les informations du produit apparaissent.

3. Intégrer le Code Liquid

Pour intégrer des produits dans un article Shopify, nous utiliserons le code Liquid suivant :

<div class="article-body">     <div class="article-content halo-text-format">         {% capture content_with_products %}             {% assign segments = article.content | split: '[PRODUCTS=' %}             {% for segment in segments %}                 {% if forloop.first %}                     {{ segment }}                 {% else %}                     {% assign parts = segment | split: ']' %}                     {% assign product_handles = parts[0] | split: ',' %}                     {% assign text_after = segment | split: '[/PRODUCTS]' | last %}                      {% for product_handle in product_handles %}                         {% assign product = all_products[product_handle] %}                         {% if product %}                             {% render 'product-grid-layout', product_card_product: product, show_list: true, loading: true, topsellers: true %}                         {% endif %}                     {% endfor %}                      {{ text_after }}                 {% endif %}             {% endfor %}         {% endcapture %}          {{ content_with_products | strip_newlines }}     </div> </div> Langage du code : HTML, XML (xml)

Explication du Code

Ce code Liquid décompose le contenu de votre article pour insérer des produits spécifiés par leurs “handles” (identifiants uniques). Voici comment il fonctionne :

  • Diviser le contenu : Le contenu de l’article est divisé en segments à chaque occurrence de [PRODUCTS=. Cela permet de séparer le texte normal des emplacements où des produits doivent être insérés.
  • Boucle sur les segments : Chaque segment est traité individuellement. Si c’est le premier segment (c’est-à-dire avant tout shortcode [PRODUCTS=), il est simplement affiché. Pour les segments suivants, le traitement des produits est initié.
  • Extraction et traitement des identifiants de produit : À l’intérieur d’un segment contenant des produits, les identifiants (ou “handles”) des produits sont extraits et utilisés pour récupérer les informations de produit correspondantes depuis all_products.
  • Rendu du produit : Pour chaque produit trouvé, un rendu personnalisé est effectué en utilisant le snippet product-grid-layout, qui peut être adapté pour afficher les attributs souhaités du produit tels que le nom, le prix, l’image, et un lien vers la page du produit.
  • Insertion des produits dans l’article : Enfin, le contenu modifié (avec les produits intégrés) est réinséré dans l’article, remplaçant le shortcode original.

Ce système permet une intégration dynamique des produits directement dans le contenu des articles, en utilisant le format [PRODUCTS=handle-product][/PRODUCTS] pour définir où et quels produits doivent être affichés.

4. Tester et Valider

Après avoir intégré le code dans votre thème Shopify, il est crucial de procéder à des tests approfondis avant de publier l’article :

  • Prévisualiser les Changements : Utilisez la fonction de prévisualisation de Shopify pour voir comment les produits s’affichent dans l’article. Cela vous donne une première indication de la réussite de l’intégration.
  • Vérifier la Responsivité : Assurez-vous que l’affichage des produits s’adapte correctement à différents formats d’écran, notamment sur mobile.
  • Tester les Liens des Produits : Cliquez sur les liens des produits intégrés pour vérifier qu’ils mènent bien aux pages des produits concernés.
  • Valider le Chargement des Données : Confirmez que les informations du produit (nom, prix, image) sont correctement mises à jour et affichées.

Ces étapes de test et de validation garantissent que l’intégration des produits enrichit effectivement l’expérience utilisateur sans introduire d’erreurs ou de problèmes de mise en page.

Partie 2 : Ajouter des Produits à un Article Shopify en Utilisant JavaScript

Introduction à JavaScript

JavaScript est un langage de programmation essentiel dans le développement web, permettant de créer des interactions dynamiques sur les pages web. Contrairement à des modifications côté serveur, JavaScript opère principalement côté client, après que la page a été chargée par le navigateur. Cela permet de modifier, d’ajouter ou de supprimer des éléments HTML sans nécessiter de recharger la page, offrant une expérience utilisateur plus fluide et réactive.

Avantages de l’Utilisation de JavaScript

L’intégration de produits dans vos articles Shopify à l’aide de JavaScript présente plusieurs avantages clés, notamment en termes de fluidité et de réactivité. En manipulant le DOM (Document Object Model) après le chargement initial de la page, JavaScript permet d’insérer des informations produit dynamiques, telles que les noms, les prix et les images, directement dans le contenu de l’article, sans interruption ni rechargement.

Un autre avantage notable est la gestion plus fine du SEO. Bien que Google puisse indexer le contenu généré par JavaScript, la prise en charge n’est pas aussi directe que pour le contenu statique HTML. Cela signifie que, théoriquement, l’utilisation de JavaScript pour intégrer des produits peut aider à maintenir l’intégrité de votre structure de silo SEO, car les liens ajoutés après le rendu initial par JavaScript sont moins susceptibles d’être suivis par les crawlers, tout en améliorant l’expérience utilisateur.

Toutefois, cet avantage vient avec son lot de défis. L’un des inconvénients majeurs est la nécessité de construire dynamiquement l’encadré HTML pour les produits directement avec JavaScript, ce qui peut demander une compréhension plus approfondie du langage et une attention particulière à la performance et à l’accessibilité.

Intégrer le Code dans les Fichiers de Thème

<script>   // <![CDATA[   const produits = document.querySelectorAll(".blog-product-grid");       produits.forEach(function(produit) {           const productHandle = produit.getAttribute("product-handle");           jQuery.getJSON('/products/' + productHandle + '.js', function(product) {               const aLink = document.createElement("a");               aLink.classList.add("product-card");               aLink.setAttribute("href", "/products/" + productHandle)                const imgDiv = document.createElement("div");               imgDiv.classList.add("product-image");                const image = document.createElement("img");                image.setAttribute("src", product.featured_image);               imgDiv.appendChild(image);                 const titleSpan = document.createElement("h4");               titleSpan.classList.add("product-title");               titleSpan.textContent = product.title;               imgDiv.appendChild(titleSpan);                const divPrice = document.createElement("div");               divPrice.classList.add("price-container");                const priceSpan = document.createElement("span");               priceSpan.classList.add("product-price");               priceSpan.textContent = product.price/100 + "€";               divPrice.appendChild(priceSpan);                divDescription = document.createElement("div");               divDescription.classList.add("description-box");               divDescription.textContent = produit.textContent;               produit.textContent = "";                button = document.createElement("button");               button.classList.add("view-product");               button.textContent = "Voir le Produit";                              aLink.appendChild(imgDiv);               aLink.appendChild(divDescription);                         divPrice.appendChild(button);               aLink.appendChild(divPrice);                produit.appendChild(aLink);           });       });   // ]]> </script>Langage du code : JavaScript (javascript)

Pour intégrer des produits dans vos articles Shopify en utilisant JavaScript, suivez ces étapes pour insérer le code dans les bons fichiers de thème et vous assurer qu’il fonctionne en harmonie avec Liquid.

  1. Choisir le Bon Emplacement : Typiquement, le code JavaScript est préférentiellement ajouté dans le fichier article.liquid ou un fichier JavaScript spécifique qui est inclus dans theme.liquid. Cela permet de s’assurer que le code est chargé uniquement sur les pages concernées (articles de blog) et de ne pas alourdir les autres templates de page inutilement.
  2. Insérer le Code JavaScript : Placez le code JavaScript fourni à la fin du fichier sélectionné.
  3. Marquer les Emplacements des Produits : Utilisez Liquid pour insérer des marqueurs spécifiques dans votre contenu d’article là où vous souhaitez que les produits apparaissent. Par exemple, vous pouvez utiliser des éléments <div> avec une classe spécifique ou un attribut data-* pour indiquer où le script JavaScript doit ajouter les informations sur les produits.

Explication du Code

Ce script JavaScript dynamique récupère les informations sur les produits à partir de leurs identifiants uniques (handles) et construit des éléments HTML pour les afficher dans l’article. Voici comment il fonctionne :

  • Récupération des éléments : Le script commence par sélectionner tous les éléments marqués pour intégrer des informations sur les produits (par exemple, divs avec la classe .blog-product-grid).
  • Récupération des données du produit : Pour chaque élément identifié, le script utilise l’attribut product-handle pour faire une requête AJAX et récupérer les détails du produit depuis l’API Shopify.
  • Construction de l’HTML : Une fois les données du produit obtenues, le script construit dynamiquement la structure HTML pour afficher l’image du produit, le titre, le prix, et un lien vers la page du produit.
  • Insertion dans la page : Le HTML construit est ensuite inséré dans l’élément de départ, remplaçant le contenu original ou le complétant, selon votre configuration.

Tester et Ajuster

Tester rigoureusement est essentiel pour s’assurer que les produits sont correctement affichés et interactifs :

  1. Prévisualisation : Utilisez la fonction de prévisualisation de Shopify pour voir comment les produits apparaissent dans vos articles. Assurez-vous que tous les éléments (images, titres, prix) s’affichent comme prévu.
  2. Tests de Fonctionnalité : Vérifiez que les liens vers les pages des produits fonctionnent correctement, en ouvrant les pages attendues.
  3. Responsivité : Assurez-vous que l’affichage des produits s’adapte correctement aux différents tailles d’écran, notamment sur les appareils mobiles.
  4. Performance : Observez le temps de chargement des pages pour vous assurer que l’ajout de JavaScript n’impacte pas négativement la vitesse du site.
  5. Ajustements : Si nécessaire, ajustez le code pour résoudre les problèmes identifiés lors des tests. Cela peut inclure des modifications du script JavaScript, des ajustements de style CSS pour l’affichage des produits, ou des modifications du marquage Liquid dans vos articles.

L’intégration de ce script offre une méthode flexible et dynamique pour enrichir vos articles Shopify avec des informations produits, améliorant l’engagement utilisateur et potentiellement les conversions, tout en tenant compte de l’importance de l’expérience utilisateur et de la performance du site.

Conclusion

Au fil de cet article, nous avons exploré deux méthodes fondamentales pour enrichir vos articles Shopify avec des produits : l’intégration côté serveur via Liquid et l’intégration côté client à l’aide de JavaScript. Chaque approche offre des avantages uniques et répond à différents besoins, que ce soit en termes de personnalisation, de mise à jour automatique des informations produit, ou d’amélioration de l’expérience utilisateur sans recharger la page.

Il est crucial de sélectionner la méthode la plus adaptée aux spécificités de votre boutique Shopify et à vos objectifs commerciaux. L’intégration via Liquid conviendra parfaitement pour ceux cherchant une solution stable et SEO-friendly, permettant de transmettre du jus SEO aux pages de produits. L’usage de JavaScript, quant à lui, offre une expérience utilisateur plus dynamique et interactive, bien que cela puisse nécessiter une attention particulière quant à la structure du contenu pour maintenir l’efficacité SEO.

Nous vous encourageons vivement à expérimenter avec ces techniques pour découvrir comment elles peuvent améliorer la présentation de vos produits et stimuler l’engagement de vos clients. La mise en œuvre de micro-données structurées, telles que celles définies par Schema.org pour les produits, est également recommandée. Cela améliore la compréhension de vos pages par les moteurs de recherche et peut augmenter la visibilité de vos produits dans les résultats de recherche enrichis.

Ressources Complémentaires

Pour approfondir votre maîtrise de Liquid et de JavaScript dans Shopify, consultez les ressources suivantes :

En tant qu’agence SEO spécialisée dans Shopify, Blackhole Agency est là pour vous accompagner dans l’optimisation de votre boutique en ligne. Que vous ayez besoin de conseils pour intégrer des produits dans vos articles ou d’aide pour améliorer votre présence en ligne, notre équipe d’experts est prête à vous aider à atteindre vos objectifs.

L’expérimentation et l’adaptation continue sont clés dans le paysage en constante évolution du commerce en ligne. N’hésitez pas à nous contacter pour tout besoin d’assistance sur votre chemin vers le succès avec Shopify.

🚀 Plongez dans l'univers du SEO avec Blackhole !​
Ne laissez pas votre site se perdre dans l'immensité du web. Faites-le briller parmi les étoiles avec nos stratégies SEO éprouvées.

Vous avez apprécié cet article ? C’est grâce à des techniques de SXO et de SEO avancées. Imaginez ce que nous pourrions faire pour votre site ! Rejoignez les centaines d’entreprises qui ont vu leur trafic augmenter de manière exponentielle grâce à nos services.

Consultant SEO
Brule Nicolas

Depuis plus de 5ans, j’ai eu la chance de travailler dans le monde fascinant du SEO. Chez Blackhole Agency, j’essaie d’apporter mon humble contribution en aidant les entreprises à naviguer dans le vaste univers du référencement naturel. J’apprends constamment, car le domaine du SEO est en perpétuelle évolution. Lorsque je ne suis pas en train de déchiffrer les subtilités des moteurs de recherche, j’aime me perdre dans un documentaire sur l’astrophysique.

Catégorie populaire
Sommaire
🚀 Restez à la pointe du SEO !
Subscription Form

Vous voulez être le premier à connaître les dernières tendances en matière de référencement, les astuces inédites et les mises à jour cruciales ? Ne cherchez plus, nous avons ce qu’il vous faut !

En rejoignant notre communauté, vous bénéficierez de :

  • 📚 Contenus exclusifs directement dans votre boîte de réception.
  • 🛠 Outils et ressources pour booster votre SEO.
  • 🎟 Invitations à des webinaires et événements spéciaux.
  • 🎁 Offres et réductions exclusives pour nos abonnés.

Ne manquez pas cette opportunité de rester à la pointe du SEO. Rejoignez-nous maintenant !