Utiliser deux descriptions produit dans Shopify
Rappel sur l'intérêt de la description produit sur un site e-commerce
Avant de rentrer dans le tutoriel technique, il est important de rappeler l'intérêt de bien travailler la description des produits dans une boutique en ligne Shopify ou autre d'ailleurs.
Comme nous l'évoquions dans notre checklist SEO pour shopify, la description d'un produit a deux rôles majeurs :
- Convertir le client, que ce soit par la précision des informations produit ou encore par la réassurance lié à celui-ci ou à votre marque.
- Attirer des visiteurs grâce à un SEO efficace.
Ce double objectif est facile à atteindre dès lors que l'on peut séparer notre texte en deux parties en terme d'UX design. Malheureusement dans les template classique de Shopify, il faut souvent se content d'un champ de description monobloc, ce qui peut laisser un grand vide dans le template.
Pas de panique, dans ce tutoriel, nous allons vous montrer comment segmenter ce champ en deux parties, pour afficher les informations produits et de réassurance essentielles en haut de page et avoir la liberté de développer en détail en bas de page.
Si vous n'êtes pas à l'aise avec le seo technique ou code du thème, vous pouvez faire appel à nos services d'agence SEO experte sur Shopify.
Les modifications à réaliser dans le code :
Pour séparer vos descriptions en deux parties, il va y avoir 2 actions à réaliser :
- Editer le fichier source du thème Shopify
- Ajouter un shortcode dans vos descriptions produit
L'édition du fichier du thème Shopify
- Cliquez dans le menu de gauche sur boutique en ligne
- Cliquez sur Thèmes
- Sous le thème à droite, cliquez sur les 3 points du menu puis sur "modifier le code"
- cliquer sur le fichier du thème de la fiche produit
//remplacer le code suivant<div class="description">{{ product.description }}</div>//Par celui-ci pour la description courte{% if product.description != blank %}{% if product.description contains "<!-- split -->" %}<div class="description-short">{{ product.description | split: '<!-- split -->' | first }}</div>{% endif %}{% endif %}// et celui-ci dans la zone de description longue (donc plus loin dans le fichier){% if product.description != blank %}{% if product.description contains "<!-- split -->" %}<div class="description-bottom">{{ product.description | split: '<!-- split -->' | last }}</div>{% endif %}{% endif %}
L'édition des descriptions produits
Il ne vous reste plus qu'à cliquer dans chacune de vos descriptions produits sur le bouton code "</>" en haut à droite pour de la barre d'outils CMS pour accèder au code HTML de la description et de venir y ajouter le terme <!-- split --> à l'endroit désiré de la séparation.
Nos derniers articles
Tout comprendre aux UTM : comment bien les utiliser ?
La bonne utilisation des UTM est parfois un peu mystique pour certains... On vous apprend à mieux les comprendre et utiliser en quelques minutes.
Algorithme google
Dans le cadre du procès antitrust, la justice a fait sortir des brevets et des détails sur les algorithmes utilisées par Google : analysons cela ensemble.
Webinar du 07/12 - Stratégie digitale : leviers de financement et valorisation
Rendez-vous le jeudi 07 décembre à 14h00 pour notre webinar avec Kardynal sur le financement de votre stratégie digitale !
Gardons contact !
Découvrez les best practices en SEO
Téléchargez notre livre blanc SEO !