Comment trouver le sélecteur CSS d'une section d'accueil pour un lien d'onglet (Shopify)

Réponse rapide

Ouvrez votre page d’accueil en direct, faites un clic droit sur la section et choisissez Inspecter. Repérez le conteneur dont l’identifiant commence par shopify-section-, ajoutez un # devant, puis exécutez $$('#cet-id').length dans la Console. Si le résultat renvoie 1, ce sélecteur constitue une cible de défilement exploitable.

Lors de la configuration d’une barre d’onglets inférieure ou d’un menu mobile, les marchands rencontrent fréquemment un champ demandant un « sélecteur CSS ». Les navigateurs effectuant le défilement en recherchant des nœuds correspondants dans le DOM de votre boutique, un sélecteur imprécis ou dupliqué fera défiler l’écran au mauvais endroit ou bloquera toute réaction. Vérifier votre sélecteur à l’aide des outils de développement garantit une navigation fluide avant publication.

Sélecteur, ID de section et ancre : les besoins réels du lien d’onglet

Avant de copier du code dans vos réglages de navigation, il convient de distinguer trois concepts étroitement liés : un sélecteur CSS, un identifiant (ID) HTML de section et un lien d’ancrage. Les applications de menu et les paramètres de thèmes emploient ces termes différemment, et l’insertion d’un format inapproprié brisera votre lien.

Un sélecteur CSS est un motif utilisé par les feuilles de style et les scripts pour identifier un ou plusieurs éléments HTML. Parmi les exemples courants, citons #reviews (qui cible l’élément possédant précisément l’ID reviews) ou .featured-collection (qui cible tout élément portant cette classe). Selon les spécifications de l’attribut id sur MDN Web Docs, un identifiant doit être unique dans l’ensemble du document. La documentation technique de Section Store souligne également ce principe : un ID n’appartient qu’à un seul élément, ce qui lui permet de toujours cibler le bon endroit.

Un lien d’ancrage, en revanche, est une URL complète ou relative contenant un identifiant de fragment, comme /#reviews. Les navigateurs web lisent le symbole dièse # dans la barre d’adresse et font défiler la fenêtre jusqu’à l’élément correspondant à cet ID. Si votre application de navigation propose un champ spécifique pour un « sélecteur CSS », elle attend une expression de sélecteur (telle que #reviews) et non une adresse web entière. Pour les boutiques souhaitant configurer des liens d’ancrage d’URL classiques, consultez notre guide complémentaire sur les ancres de barre d’onglets.

Guider les acheteurs mobiles directement vers les sections clés de la page d’accueil représente une dimension fondamentale de l’architecture de barre d’onglets mobile. Le tableau ci-dessous synthétise les différences pratiques :

Étape 1 : Inspecter la section sur votre boutique en direct

Pour repérer le bon sélecteur, examinez votre boutique telle que la visualisent vos clients plutôt que depuis l’éditeur de thème Shopify. La page en ligne est celle que vos clients chargent réellement : c’est l’endroit le plus sûr pour lire le vrai balisage.

Ouvrez un nouvel onglet, naviguez vers votre page d’accueil en direct et descendez jusqu’à la section ciblée (par exemple des avis clients, une foire aux questions ou une sélection de produits). Faites un clic droit directement sur le titre ou le fond de la section et sélectionnez Inspecter.

Vous pouvez également ouvrir les outils de développement à l’aide de raccourcis clavier :

• macOS : Cmd + Option + C (Chrome DevTools Open)
• Windows : Ctrl + Shift + C (Chrome DevTools Open)

Raccourcis clavier pour ouvrir l'inspecteur d'éléments :
macOS :   Cmd + Option + C
Windows : Ctrl + Shift + C

Identifier le conteneur shopify-section

Lorsque le panneau Éléments apparaît, l’inspecteur met en surbrillance la balise de texte ou d’image sur laquelle vous avez cliqué. Pour créer une cible de défilement fiable, remontez dans la hiérarchie du DOM afin de repérer le conteneur englobant l’intégralité de la section.

1. Dans le panneau Éléments, déplacez votre curseur vers le haut dans l’arborescence des balises parentes.
2. Recherchez un conteneur externe—généralement une balise <div>—qui enveloppe toute la section.
3. Repérez son attribut id. Sur les boutiques Shopify, cet identifiant commence le plus souvent par shopify-section-.

Comme l’indique la documentation officielle Shopify sur l’objet Section, les identifiants des sections incluses via des modèles JSON sont générés dynamiquement par Shopify. Un identifiant peut ressembler à shopify-section-template--18492048593__featured_collection, mais le vôtre sera différent : copiez-le depuis votre propre page.

<!-- Exemple de conteneur de section Shopify -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
  <!-- Le contenu de la section est affiché ici -->
</div>

Transformer la ligne en sélecteur (# pour l’ID, . pour la classe)

Dès que vous avez localisé la ligne du conteneur, convertissez l’attribut HTML en syntaxe CSS valide :

• Pour utiliser la valeur de l’id, ajoutez un dièse # devant : #shopify-section-template--18492048593__reviews
• Pour utiliser la valeur d’une class, ajoutez un point . devant : .featured-reviews-grid
• Si un élément possède plusieurs classes séparées par des espaces, reliez-les par des points : div.shopify-section.reviews-container

Chrome DevTools propose également un raccourci très pratique. Faites un clic droit sur le nœud du conteneur mis en surbrillance, sélectionnez Copy, puis cliquez sur Copy JS Path (Chrome DevTools DOM). Chrome dépose dans votre presse-papiers une expression :

document.querySelector("#shopify-section-template--18492048593__reviews")

Extrayez la chaîne située entre les guillemets. Elle constitue votre sélecteur candidat. Avant de la coller dans votre menu, vous devez impérativement vérifier qu’elle cible uniquement cette section.

Étape 2 : Vérifier que le sélecteur cible exactement un seul élément

Une erreur fréquente chez les marchands consiste à supposer que tout sélecteur copié depuis les outils de développement fonctionnera automatiquement. Cependant, si votre sélecteur correspond à plusieurs sections ou à zéro élément sur écran mobile, votre barre d’onglets dysfonctionnera.

Les recommandations techniques d’UpCharge insistent sur la nécessité de rechercher des classes ou des identifiants uniques lors du ciblage d’éléments. Vérifier l’unicité avec les outils de développement intégrés est rapide.

Rechercher dans le panneau Éléments (Ctrl/Cmd+F)

Le contrôle initial le plus rapide s’effectue directement dans l’arborescence du DOM. Comme le précise la documentation Chrome DevTools DOM, vous pouvez effectuer des recherches dans l’arbre DOM par chaîne de caractères, sélecteur CSS ou expression XPath.

1. Cliquez dans le panneau Éléments.
2. Appuyez sur Ctrl + F (Windows) ou Cmd + F (macOS) pour afficher la barre de recherche en bas du panneau.
3. Collez votre sélecteur candidat, dièse compris (par exemple #shopify-section-template--18492048593__reviews).
4. Observez le compteur de correspondances à droite du champ (par exemple 1 of 1).

Recherche dans le panneau Éléments :
Expression : #shopify-section-template--18492048593__reviews
Résultat attendu : 1 of 1

Si le compteur indique 1 of 1, votre sélecteur renvoie vers un nœud unique dans tout le document.

Compter les correspondances dans la Console

Pour une vérification sans équivoque du point de vue des scripts, passez sur l’onglet Console des outils de développement.

Selon l’API Console Utilities de Chrome DevTools, la fonction utilitaire $$(selector) renvoie un tableau contenant tous les éléments correspondant au sélecteur CSS fourni. Vous pouvez également utiliser la méthode standard document.querySelectorAll(selector) (MDN querySelectorAll).

Saisissez l’une des commandes suivantes dans la console et appuyez sur Entrée :

$$('#shopify-section-template--18492048593__reviews').length

document.querySelectorAll('#shopify-section-template--18492048593__reviews').length

Analysez le chiffre retourné par la console :

Répétez toujours ce comptage en mode d’émulation mobile. Cliquez sur l’icône Toggle device toolbar dans les DevTools. Certains thèmes Shopify chargent des sections distinctes pour mobile et ordinateur, ce qui peut faire varier la présence ou la duplication des sélecteurs sur smartphone.

Illustration de concept : Contrôle du nombre de correspondances dans la console pour garantir que le sélecteur cible un élément unique.

Étape 3 : Choisir un sélecteur qui résiste aux modifications du thème

Bien qu’un identifiant généré automatiquement commençant par shopify-section- convienne pour un test rapide, s’y fier durablement présente d’importants risques d’interruption.

Dans l’architecture Online Store de Shopify, les identifiants des sections incluses via des modèles JSON sont générés dynamiquement par Shopify (Shopify Section Object). Le développeur de thèmes Fluorescent souligne formellement ce point : “Shopify dynamically generates ids for sections but these ids are not stable.” (Shopify génère dynamiquement des identifiants pour les sections, mais ces identifiants ne sont pas stables). Ces identifiants n’étant pas stables, un lien d’onglet qui en dépend peut cesser de fonctionner après une modification de la mise en page : revérifiez-le après chaque changement.

Évitez également les sélecteurs complexes multi-niveaux du genre div:nth-child(4) > div.grid > div:first-child. La moindre retouche de mise en page peut briser ces chaînes.

La méthode pérenne : ajouter un bloc d’ID personnalisé avec Custom Liquid

Pour créer un sélecteur qui ne changera jamais lors des révisions du thème, définissez votre propre identifiant permanent directement dans l’éditeur :

1. Dans votre interface d’administration Shopify, allez dans Boutique en ligne > Thèmes.
2. Dupliquez votre thème actif pour disposer d’une sauvegarde avant modification.
3. Cliquez sur Personnaliser sur votre thème de travail.
4. Sur la mise en page d’accueil, cliquez sur Ajouter une section ou Ajouter un bloc immédiatement au-dessus de la section visée.
5. Choisissez Custom Liquid (ou HTML personnalisé selon votre thème).
6. Insérez une balise d’ancrage HTML simple dotée de l’ID de votre choix :

<div id="reviews"></div>

Nommez cet ID en minuscules et avec des tirets (par exemple avis-clients, faq-boutique ou meilleures-ventes). Selon la référence de l’attribut id de MDN, cet attribut doit être unique dans l’ensemble de la page.

Le tutoriel vidéo ci-dessous proposé par EcomGraduates montre concrètement comment inspecter les sections Shopify et mettre en place des identifiants d’ancrage personnalisés dans un thème :

Cas complexes : absence d’ID clair, sections imbriquées, caractères spéciaux

Certaines configurations de boutiques peuvent complexifier l’identification des sélecteurs. Suivre une approche méthodique permet de parer à toute anomalie.

Section sans identifiant visible

Certaines sections sur mesure ou créées avec des applications de mise en page n’exportent aucun identifiant standard sur leur conteneur externe. Plutôt que de juxtaposer une série fragile de noms de classes—très sensibles aux mises à jour CSS—, mettez en œuvre l’approche Custom Liquid décrite à l’Étape 3. Insérer <div id="votre-id"></div> juste au-dessus de la section vous procure un sélecteur infaillible sans modifier les fichiers de modèles du thème.

Sections imbriquées et blocs d’applications

Lorsque vous souhaitez atteindre un bloc d’application situé à l’intérieur d’une section native (par exemple un widget d’avis inséré dans une grille de produits), cibler directement le conteneur interne de l’application peut mener à un endroit inattendu, testez-le donc toujours. Privilégiez le ciblage du conteneur parent shopify-section ou placez votre ancre directement au-dessus de la section.

Sections spécifiques au mobile ou à l’ordinateur

De nombreux marchands déploient des bannières différentes selon le type d’appareil. Si la section pour ordinateur possède un ID mais que la version mobile utilise un bloc distinct, votre onglet échouera sur smartphone. Inspectez toujours votre boutique dans le mode appareil des DevTools et ciblez le conteneur effectivement présent sur mobile.

Caractères inhabituels et règles d’échappement CSS

D’après la documentation MDN sur querySelector, si une valeur d’identifiant ou de classe n’est pas un identifiant CSS valide (par exemple un ID débutant par un chiffre ou contenant des deux-points, des points ou des points d’interrogation), elle doit être échappée avec CSS.escape(). Un ID comme 123-reviews nécessite ainsi un échappement syntaxique.

Pour éviter toute complication dans les champs de saisie de votre application de navigation, bannissez les caractères spéciaux. Limitez vos identifiants à des lettres minuscules, des chiffres et des tirets, et n’employez ni guillemets ni parenthèses dans les champs de lien.

Utiliser le sélecteur comme cible de défilement pour l’onglet

Dès lors que vous avez vérifié que votre sélecteur renvoie précisément à un élément unique, vous pouvez l’intégrer à la configuration de votre barre d’onglets mobile.

Consultez d’abord la documentation de votre application de menu ou de votre thème. Vérifiez si le champ de lien requiert une URL complète avec fragment d’ancre (comme /#reviews) ou directement une expression de sélecteur CSS (comme #reviews).

Si votre application fournit un champ de sélecteur dédié :

1. Collez le sélecteur validé à l’Étape 2 (par exemple #reviews ou #shopify-section-template--custom).
2. Assurez-vous que la syntaxe respecte les indications de l’application.
3. Enregistrez les modifications du menu.

Rappelez-vous que les fonctions de défilement s’exécutent sur le document actif. Si un visiteur clique sur un onglet configuré avec un sélecteur interne alors qu’il se trouve sur une fiche produit ou une collection, la requête de sélecteur renverra null (MDN querySelector) et aucun défilement ne s’opérera. Testez toujours le comportement directement depuis votre page d’accueil.

Conservez une trace de vos identifiants personnalisés dans les notes techniques de votre boutique afin qu’aucun collaborateur ne supprime par inadvertance le bloc Custom Liquid lors d’un nettoyage de mise en page.

Dépannage : l’onglet ne défile pas, passe sous l’en-tête ou vise la mauvaise zone

Si le défilement de l’onglet ne se déroule pas correctement sur mobile, passez en revue les vérifications suivantes :

L’onglet ne déclenche aucun défilement

Ouvrez la console sur votre page d’accueil en direct et réexécutez $$('#votre-selecteur').length. Si la valeur est 0, l’élément n’existe pas sur la page, l’ID a changé suite à une mise à jour du thème ou le sélecteur contient une coquille. Selon MDN, un sélecteur sans correspondance renvoie null, empêchant l’exécution (MDN querySelector).

L’onglet défile vers une mauvaise zone

Si l’activation de l’onglet fait sauter la page tout en haut ou tout en bas au lieu de la section souhaitée, votre sélecteur correspond à plusieurs éléments. Dans cette situation, querySelector retient toujours la première occurrence du DOM (MDN querySelector). Utilisez la console pour déceler les doublons et remplacez-les par un ID sur mesure unique.

Le titre de la section est masqué par l’en-tête fixe

Par défaut, les navigateurs calent le bord supérieur de l’élément cible au ras du sommet de l’écran. Si votre boutique dispose d’un en-tête fixe ou collant (sticky), celui-ci vient recouvrir le titre de la section.

D’après la documentation MDN sur scrollIntoView, il est possible de définir un dégagement grâce à la propriété CSS scroll-margin-top : “To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.” (Pour définir un espacement personnalisé, utilisez scroll-margin-top ou scroll-margin-bottom. Cela est souvent utile lorsqu’il y a un en-tête fixe sur la page).

Mesurez la hauteur de votre en-tête dans les DevTools, puis appliquez une marge de défilement correspondante dans le CSS personnalisé de votre thème :

/* Créer un dégagement sous l'en-tête fixe mobile */
#reviews {
  /* Replace 80px with your own header height */
  scroll-margin-top: 80px;
}

Un panneau de menu latéral (drawer) obstrue l’écran

Si votre barre d’onglets cohabite avec un menu latéral coulissant, toucher un onglet alors que le panneau est ouvert peut générer des conflits d’affichage. Appliquer les bonnes pratiques d’un menu tiroir mobile (drawer) garantit la fermeture automatique des volets superposés dès qu’un lien externe est enclenché.

Le chargement différé (lazy-load) décale la position finale

Si votre page d’accueil intègre de volumineuses images au-dessus de la section ciblée, les scripts de chargement différé peuvent modifier la hauteur de page après la fin du défilement, décalant légèrement la zone d’atterrissage. Testez l’action de l’onglet une fois que l’ensemble des éléments multimédias a fini de charger.

Illustration de concept : Compensation de l’en-tête fixe masquant le titre d’une section grâce à la propriété CSS scroll-margin-top.

Compromis : quand le ciblage par sélecteur n’est pas la bonne solution

Bien que le défilement vers une section interne procure une navigation fluide sur une page d’accueil, ce n’est pas toujours le choix le plus judicieux pour une boutique en ligne.

Contenus volumineux qui méritent leur propre page

Si le contenu vers lequel vous redirigez est un catalogue produit étendu, des politiques détaillées ou des réponses de support approfondies, le condenser dans une seule section de la page d’accueil le rend plus difficile à trouver et à partager. Des pages de collection ou de politique distinctes ont chacune leur propre URL, vers laquelle un onglet peut pointer directement au lieu de dépendre d’un défilement sur la page.

Surcharge visuelle de la barre d’onglets

Une barre d’onglets mobile est conçue pour passer rapidement d’une zone principale de la boutique à une autre. Dédier plusieurs onglets inférieurs à de simples sections de la page d’accueil encombre la barre et désoriente les utilisateurs qui naviguent au cœur du catalogue. Comme nous l’expliquons dans notre guide sur la navigation au-delà du menu hamburger, les onglets doivent rester réservés aux destinations prioritaires.

Dépendance envers le thème et maintenance

Tout sélecteur lié au code automatique du thème nécessite une révision lors d’un changement ou d’une mise à jour de template. Lorsque les personnalisations de menu atteignent un niveau difficile à maintenir, les marchands ont intérêt à évaluer les limites des menus de thèmes pour déterminer si une solution dédiée offre une réponse plus pérenne.

La place de Navi+

Navi+ fournit aux marchands Shopify des outils de navigation avancés à travers ses composants Tab Bar et Mobile Menu. Chaque élément de menu comprend un champ Link To dédié, capable d’accueillir aussi bien des adresses web classiques que des commandes d’interaction fonctionnelles.

Pour les boutiques recherchant un défilement fluide vers une section spécifique, Navi+ prend en charge la syntaxe scroll:OnPage(#section-id), répertoriée dans le centre d’aide officiel sous l’intitulé « Scroll to a section by CSS selector » (types de liens dans Navi+). Cette fonctionnalité est accessible sur les forfaits Business et Elite.

Lors de la configuration, saisissez précisément le sélecteur unique que vous avez vérifié à l’Étape 2. Le mécanisme de défilement opérant directement sur le DOM du document actif, la section ciblée doit nécessairement être présente sur la page consultée par l’internaute. Testez toujours votre installation depuis un smartphone physique en partant de la page d’accueil.

Si vous utilisez Navi+ Tab Bar, collez le sélecteur que vous venez de tester dans le champ Link To de l’onglet sous la forme scroll:OnPage(#votre-id), puis touchez-le sur votre téléphone depuis la page d’accueil. La liste complète des types de liens est disponible dans le centre d’aide Navi+.

Liste de contrôle d’action

Suivez cette liste de contrôle en 7 points pour installer et vérifier votre sélecteur de section :

• Ouvrez votre page d’accueil en direct dans un navigateur sur ordinateur (hors éditeur de thème).
• Faites un clic droit sur la section visée, choisissez Inspecter et identifiez le conteneur externe dont l’identifiant commence par shopify-section-.
• Notez l’ID du conteneur et convertissez-le en sélecteur avec un # au début.
• Exécutez $$('#votre-selecteur').length dans la console des DevTools pour vous assurer que le résultat est strictement égal à 1.
• Basculez en mode appareil dans les DevTools pour valider la présence et l’unicité du sélecteur sur écran mobile.
• Si vous visez une stabilité durable, ajoutez un bloc Custom Liquid contenant <div id="votre-id"></div> au-dessus de la section.
• Insérez le sélecteur validé dans la configuration de votre barre d’onglets, ajoutez scroll-margin-top si l’en-tête fixe masque le titre, puis testez sur un smartphone physique.

Foire aux questions (FAQ)

Où trouver l’identifiant d’une section sur Shopify ?

Les identifiants de section ne sont pas affichés dans l’interface d’administration Shopify standard. Pour repérer l’ID d’une section, ouvrez votre boutique en direct dans un navigateur, faites un clic droit sur la section, choisissez Inspecter et lisez la valeur de l’attribut id sur le conteneur externe shopify-section (Shopify Section Object, MDN querySelectorAll).

Pourquoi le sélecteur de ma section a-t-il cessé de fonctionner ?

Shopify génère dynamiquement les identifiants des sections incluses via des modèles JSON, et ceux-ci peuvent changer lors de modifications de mise en page ou de recréation de sections (Shopify Section Object, Fluorescent). L’insertion d’un bloc Custom Liquid comportant un ID fixe apporte une stabilité durable.

Comment s’assurer que mon sélecteur ne cible qu’un seul élément ?

Ouvrez l’onglet Console des outils de développement et saisissez $$(selector).length ou document.querySelectorAll(selector).length (Chrome DevTools Console Utilities, Chrome DevTools DOM). Une valeur renvoyée de 1 confirme que le sélecteur ne correspond qu’à un seul élément dans le document actif.

Faut-il utiliser la fonction « Copy selector » des outils DevTools ?

Vous pouvez utiliser la fonction « Copy selector » ou « Copy JS Path » de Chrome comme base de travail, mais ces longues chaînes multi-niveaux restent fragiles et cassent facilement lors des évolutions du thème. Il est beaucoup plus sûr de simplifier l’expression en ne conservant que l’identifiant unique de la section.

Que se passe-t-il si le sélecteur correspond à plusieurs sections ?

Lorsqu’un sélecteur correspond à plusieurs éléments, les fonctions JavaScript telles que querySelector retiennent uniquement le premier élément rencontré dans l’ordre du DOM (MDN querySelector). L’onglet peut alors faire défiler l’écran vers une section inattendue située plus haut.

Pourquoi le titre de la section est-il masqué sous l’en-tête après le défilement ?

Les navigateurs calent naturellement le haut de l’élément cible au niveau du bord supérieur de l’écran. Si votre boutique utilise un en-tête fixe ou collant, celui-ci vient recouvrir le titre. Définir la propriété CSS scroll-margin-top sur la section cible crée le dégagement indispensable pour rendre le titre visible (MDN scrollIntoView).

Sources

• Shopify Developer Documentation : Section Liquid Object — Détails sur la génération dynamique des identifiants de section dans les modèles JSON.
• Fluorescent Documentation : Custom Liquid Developer Guide — Explications techniques sur l’instabilité des identifiants et la mise en place d’ancres d’identifiant personnalisées.
• MDN Web Docs : HTML id global attribute — Spécifications formelles imposant l’unicité de l’identifiant dans tout le document.
• MDN Web Docs : Document.querySelector() — Comportement de sélection du premier élément, valeurs nulles et règles d’échappement de sélecteurs.
• MDN Web Docs : Document.querySelectorAll() — Évaluation des listes de nœuds statiques lors du contrôle de sélecteurs.
• MDN Web Docs : Element.scrollIntoView() — Alignement de la fenêtre et spécifications de décalage avec scroll-margin-top.
• Chrome for Developers : Chrome DevTools DOM Inspection — Recherche dans l’arborescence DOM et copie d’expressions de nœuds.
• Chrome for Developers : Console Utilities API — Documentation de la fonction d’aide à la sélection $$(selector).
• Chrome for Developers : Open Chrome DevTools — Raccourcis clavier d’ouverture des outils de développement.
• Section Store Help : Custom Placement: Finding a CSS Selector — Conseils d’éditeurs sur l’unicité des identifiants.
• UpCharge Help Center : Selector Settings Guide — Guide pratique d’identification de classes et d’identifiants uniques.
• Navi+ Help Center : Navigation Item Link Types — Spécifications officielles de la syntaxe scroll:OnPage(#section-id) sur les forfaits Business et Elite.