GemPages V7 ne prend pas en charge la division automatique de la description produit en éléments d'accordéon en fonction des balises de titre, contrairement à la version V6. Toutefois, vous pouvez obtenir le même résultat en préparant votre description produit Shopify avec des balises de titre et en ajoutant un extrait de code personnalisé à chaque élément d'accordéon. Ce guide vous accompagne pas à pas dans cette démarche afin que vous puissiez l'implémenter vous-même, sans l'aide de l'équipe technique.
Vue d'ensemble
Cette méthode consiste à diviser votre description de produit en plusieurs sections à l'aide des balises de titre HTML. L'élément Accordéon affichera ensuite chaque section dans l'ordre grâce à un extrait de code personnalisé. Vous pouvez utiliser n'importe quel niveau de titre (H1 à H6). L'extrait de code utilise Ceci n'est qu'un exemple, mais vous pouvez le remplacer par n'importe quelle balise de titre que vous utilisez dans la description de votre produit.
Étape 1 : Préparer la description du produit dans Shopify
- Accédez à Shopify Admin → Produits → ouvrez votre produit.
- Dans le champ Description, divisez votre contenu en sections distinctes.
- Insérez une balise de titre avant chaque section. Vous devez utiliser systématiquement le même type de titre (H1 à H6). Le code détectera automatiquement la balise de titre utilisée.
Exemple de structure :
Matériel
Détails concernant le matériau…
Guide des tailles
Détails des tailles…
Garantie
Informations sur la garantie…
Si vous préférez utiliser H2, H3, H5, etc., remplacez simplement avec la balise de titre de votre choix et ajustez le code ultérieurement.
Étape 2 : Ajouter un élément Accordéon dans GemPages
- Ouvrir l'éditeur GemPages (V7).
- Glissez-déposez l'élément Accordéon sur votre page.
- Créez autant d'éléments Accordion que nécessaire. Chaque élément affichera une section de la description de votre produit.
Étape 3 : Insérer l’extrait de code personnalisé
Vous insérerez le même extrait de code dans chaque élément de l'accordéon. Ensuite, pour chaque onglet, vous modifierez uniquement la valeur de secNum en fonction de la section à afficher.
Comment insérer :
1. Sélectionnez un élément de l'accordéon.
2. Dans la barre latérale gauche, ouvrez Contenu → Code personnalisé.
3. Collez l'extrait de code complet.
|
{% assign secNum = 2 %} {% assign descSec = product.description | split: ' ' %} {% assign gPDCount = 0 %} {% assign chosenDescSec = ” %} {% pour sec dans descSec %} {% assign testDescSec = sec | split: ' ' %} {% if testDescSec[1] %} {% assign testDescSec = testDescSec[1] %} {% autre %} {% assign testDescSec = testDescSec[0] %} {% fin si %}
{% assign checkSec = testDescSec | strip_html %} {% assign checkSec = checkSec | strip %}
{% assign isMediaSec = false %} {% if testDescSec contains 'img' or testDescSec contains 'video' or testDescSec contains 'iframe' %} {% if testDescSec contains 'src' %} {% assign isMediaSec = true %} {% fin si %} {% fin si %}
{% if checkSec != ” or isMediaSec %} {% assign gPDCount = gPDCount | plus: 1 %} {% si gPDCount == secNum %} {% assign chosenDescSec = testDescSec %} {% casser %} {% fin si %} {% fin si %} {% endfor%}
{% si chosenDescSec %} {{ chosenDescSec | strip }} {% autre %} {{ product.description | strip }} {% fin si %} </div> |
Étape 4 : Ajuster la balise d’en-tête
Le code utilise à titre d'exemple, car il s'agit du titre le plus couramment utilisé dans les descriptions de produits.
Si la description de votre produit utilise un titre différent, remplacez-le. avec votre balise de titre à l'intérieur de cette partie :
{% assign descSec = product.description | split: '' %}
Exemples :
Si votre description Shopify utilise , remplacer par :
{% assign descSec = product.description | split: '' %}
Si votre description utilise , remplacer par :
{% assign descSec = product.description | split: '' %}
Étape 5 : Attribuer un numéro de section à chaque élément de l’accordéon
La variable secNum contrôle quelle section apparaît à l'intérieur de chaque élément d'accordéon.
Par exemple :
Onglet Accordéon 1 → secNum = 1
Onglet Accordéon 2 → secNum = 2
Onglet Accordéon 3 → secNum = 3
Pour modifier ce numéro, modifiez cette partie :
{% assign secNum = 1 %}
Modifiez uniquement le numéro de chaque onglet.
Étape 6 : Enregistrer et prévisualiser
- Cliquez sur Enregistrer dans l'éditeur GemPages.
- Prévisualisez votre page produit.
- Vérifiez que chaque élément de l'accordéon affiche la section correcte de votre description de produit.
Merci pour vos commentaires