Peut-on lier un onglet de barre mobile à une section d'accueil sur Shopify ? (Guide des liens d'ancrage)

La réponse courte : oui, avec un lien d’ancrage

Oui. Attribuez un identifiant à la section d’accueil (par exemple reviews), puis configurez le lien de l’onglet vers /#reviews. Les navigateurs défilent vers l’élément dont l’ID correspond à la valeur suivant #. Utilisez un identifiant personnalisé, car ceux générés par Shopify peuvent changer.

Les ancres HTML permettent aux onglets inférieurs de défiler vers tout élément de la page d’accueil. Le navigateur repère l’ID dans le DOM et l’affiche immédiatement. Selon les standards du web, l’identifiant doit être unique dans le document. Comme Shopify génère des identifiants dynamiques dans les modèles JSON, ces codes peuvent changer. Déclarer un identifiant stable assure la pérennité.

Une barre d’onglets mobile est un menu fixe visible en bas de l’écran. Concevoir une architecture de barre d’onglets mobile performante permet de relier immédiatement les visiteurs aux destinations clés, qu’il s’agisse de collections ou d’avis sur la page d’accueil.

Comment fonctionnent les liens d’ancrage sur une page d’accueil Shopify

Ce que signifie réellement /#reviews

Une destination telle que /#reviews transmet trois ordres : la barre / cible l’accueil, # marque le fragment et reviews indique l’ID HTML. Le navigateur défile pour afficher l’élément selon scrollIntoView(). Utiliser #reviews seul fonctionne sur l’accueil mais échoue sur une page produit. La barre initiale assure le retour préalable à la racine.

Identifiants de section générés automatiquement vs identifiants personnalisés

Chaque section Shopify réside dans un div doté de class="shopify-section" et d’un ID débutant par shopify-section-. Pour les sections Liquid statiques, l’ID est le nom du fichier sans .liquid. Pour les modèles JSON, Shopify génère dynamiquement l’identifiant (d’après Liquid Objects: Section), comme shopify-section-template--123456__reviews. Copier ce code suffit pour un test rapide, mais si la section est recréée, l’identifiant peut changer et casser le lien. Déclarer son propre ID rend le lien indépendant du générateur d’ID de Shopify.

Étape 1 : Attribuer un identifiant stable à la section

Pour paramétrer un saut d’ancre, le navigateur mobile a besoin d’un identifiant précis. Deux méthodes existent : inspecter le code du thème pour un essai immédiat, ou insérer un bloc d’ancrage dédié pour garantir la fiabilité en production.

Pour un test rapide, inspectez le DOM sur votre ordinateur. Les sections sont enveloppées dans un div doté de class="shopify-section" et d’un ID tel que shopify-section-template--123456__reviews (réf. API de rendu de section Shopify). Ce code permet de tester, mais il peut changer et casser le lien.

La solution pérenne consiste à déclarer votre propre identifiant. Si votre thème propose un bloc ou une section Custom Liquid ou HTML personnalisé, insérez-le juste au-dessus de la section ciblée dans l’éditeur de thème avec une balise d’ancrage légère :

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

Nommez votre ancre en minuscules avec des tirets. L’attribut id de MDN Web Docs impose qu’un ID soit unique sur toute la page. Un doublon rend le saut peu fiable. Dupliquez votre thème actif avant toute modification.

Figure 1 : Illustration conceptuelle — Identifiant de section généré automatiquement comparé à un identifiant stable défini via Custom Liquid.

Étape 2 : Insérer le lien d’ancrage dans l’onglet

Barres d’onglets intégrées au thème (blocs de lien personnalisé)

Certains thèmes intègrent une barre inférieure mobile. La documentation du thème Zest précise que son bloc redirige les clients vers la page liée souhaitée. Cette documentation ne mentionne pas les ancres : essayez donc et testez. Dans l’éditeur, accédez à la barre mobile et saisissez /#reviews.

Barres d’onglets issues d’applications spécialisées

Si vous utilisez une application de navigation, vérifiez dans sa documentation si le sélecteur de lien prend en charge les ancres. Certaines applications ont leur propre syntaxe pour défiler vers un élément (par exemple scroll:OnPage dans Navi+, présentée plus bas).

Formatez toujours le lien en /#reviews plutôt qu’en #reviews si votre barre est globale. Depuis une page produit, #reviews cherchera localement sans résultat. La barre oblique / oblige le navigateur à revenir sur l’accueil avant d’atteindre l’ancre.

Pour étudier les structures de navigation mobile dans les thèmes Shopify récents, consultez notre revue du thème Horizon.

Étape 3 : Tester sur smartphone (défilement fluide et décalage d’en-tête fixe)

Tester sur un émulateur ne remplace pas l’ergonomie tactile réelle. Vérifiez l’onglet directement sur un smartphone physique : depuis la page d’accueil, puis depuis une page produit interne.

Par défaut, le saut vers une ancre est instantané. Pour obtenir une transition fluide, appliquez scroll-behavior: smooth; en CSS. Comme l’explique MDN Web Docs CSS scroll-behavior, cette règle régit le défilement lors de la navigation :

html {
  scroll-behavior: smooth;
}

Corrigez le chevauchement par l’en-tête fixe. Le navigateur alignant le haut de l’élément avec l’écran, l’en-tête masque le titre. Sur MDN Web Docs Element: scrollIntoView(), scroll-margin-top est recommandé en présence d’un en-tête fixe :

#reviews {
  scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}

Remarque : La valeur 80px est indicative – mesurez la hauteur réelle de votre en-tête sur mobile et adaptez les pixels. Vérifiez aussi que la barre inférieure ne masque pas les boutons au bas de la section.

Figure 2 : Illustration conceptuelle — Titre masqué sous un en-tête fixe comparé au rendu parfait avec scroll-margin-top.

Quand le lien d’ancrage ne fonctionne pas

Si l’appui sur l’onglet mobile ne produit aucun mouvement ou atterrit au mauvais endroit, examinez ces cinq causes fréquentes :

1. Identifiant régénéré après modification : Si vous avez utilisé un ID généré (shopify-section-...), toute retouche a renouvelé ce code. Adoptez un ID via Custom Liquid.

2. Identifiant dupliqué : Si plusieurs blocs ont le même ID, le navigateur ne visera que le premier trouvé, en contradiction avec le standard HTML. Vérifiez l’unicité de l’ID.

3. Widgets d’applications tierces : Les sections injectées par des applications n’exposent pas toujours d’option d’ID. Placez une balise vide <div id="reviews"></div> juste au-dessus.

4. Décalages dus au chargement différé : Les sections lourdes contenant des images différées peuvent faire varier la hauteur. Tapez une seconde fois sur l’onglet pour vérifier l’alignement.

5. Menu tiroir ouvert : Si un menu tiroir mobile reste ouvert, il masque l’écran. Veillez à ce que vos scripts le ferment automatiquement lors du clic.

Lien d’ancrage ou page/collection dédiée : que choisir ?

Bien que relier un onglet inférieur à une section d’accueil offre un raccourci pratique, cela ne convient pas à tous les contenus. Choisir entre un saut d’ancre et une page dédiée implique d’évaluer l’indexation SEO face à l’ergonomie mobile.

Les ancres excellent pour les contenus appartenant à l’accueil – avis clients, lookbooks ou courtes FAQ. Les visiteurs accèdent immédiatement aux éléments de réassurance sans rechargement de page ni rupture de navigation.

En revanche, pour le référencement naturel, les ancres sont inadaptées. Google n’accepte généralement pas les fragments pour indexer du contenu distinct (d’après les Recommandations sur les URL de Google Search Central). Ne comptez pas sur /#reviews pour apparaître comme page à part dans les résultats de recherche. Pour positionner un répertoire complet d’avis, créez des URL dédiées (comme /pages/reviews ou /collections/all).

Les barres d’onglets visent d’abord à alterner entre les vues majeures. Multiplier les ancres surcharge l’interface. Limitez les ancres à un ou deux onglets prioritaires. Pour approfondir ces principes, consultez notre guide sur la navigation au-delà du menu hamburger.

Ce que propose Navi+

Si vous déployez votre barre avec Navi+ Tab Bar pour Shopify, le défilement vers une section est pris en charge nativement.

Dans l’interface Navi+, chaque onglet dispose d’un champ Link To. Sur les forfaits Business et Elite, ce champ accepte scroll:OnPage(#reviews) pour lancer un défilement fluide vers ce sélecteur CSS.

Navi+ applique des règles simples : laisser Link To vide pointe vers l’accueil. Les liens internes utilisent des chemins courts sans domaine, par exemple /collections/all. Un dièse # seul est réservé aux éléments parents qui déplient un sous-menu sans redirection – ne le confondez pas avec scroll:OnPage(#reviews).

Même avec la syntaxe de l’application, les bases restent requises : la section doit posséder un ID stable (Étape 1) et l’en-tête doit être compensé avec scroll-margin-top sur mobile (Étape 3). Comme scroll:OnPage défile vers un élément de la page actuelle, testez l’onglet depuis l’accueil et depuis d’autres pages avant de vous y fier.

Si vous utilisez Navi+ Tab Bar, insérez scroll:OnPage(#reviews) dans le champ Link To de l’onglet et testez le résultat sur votre smartphone – la liste complète des formats de liens est accessible dans le centre d’aide Navi+. Consultez la documentation sur les types de liens Navi+ pour tous les détails.

Liste d’actions pratiques

• Choisissez la section d’accueil vers laquelle diriger les acheteurs.
• Insérez un bloc Custom Liquid vide (<div id="reviews"></div>) pour un identifiant stable.
• Définissez le lien de l’onglet sur /#your-id (ou la syntaxe d’application dédiée).
• Ajoutez html { scroll-behavior: smooth; } en CSS pour un défilement fluide.
• Appliquez scroll-margin-top en CSS pour éviter le masquage par l’en-tête fixe.
• Testez sur un vrai smartphone depuis l’accueil et depuis une page produit.
• Notez l’ID en interne pour éviter toute suppression accidentelle lors d’une mise à jour.

Foire aux questions (FAQ)

Où puis-je trouver l’identifiant d’une section Shopify ?

Chaque section est enveloppée dans un div doté d’un ID de type shopify-section-.... Inspectez-le d’un clic droit sur votre ordinateur.

Pourquoi mon lien d’ancrage ne fonctionne-t-il plus ?

Shopify génère des identifiants dynamiques pour les modèles JSON. Si la section est recréée, l’ID change. Un ID personnalisé via Custom Liquid stabilise le lien.

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

Le navigateur aligne le haut de l’élément avec l’écran, masquant le titre sous l’en-tête fixe. Ajouter scroll-margin-top en CSS dégage la vue.

Puis-je réutiliser le même identifiant deux fois sur une même page ?

Non. La spécification HTML impose qu’un attribut id soit unique sur tout le document. Réutiliser un identifiant entraîne des sauts imprévisibles.

Google va-t-il indexer /#reviews comme une page distincte ?

Non. Google n’accepte généralement pas les fragments d’URL pour indexer du contenu distinct. Créez une page ou collection dédiée pour le SEO.

Navi+ permet-il de relier un onglet à une section spécifique ?

Oui. Dans Navi+ Tab Bar, saisissez scroll:OnPage(#section-id) dans le champ Link To pour un défilement fluide par sélecteur CSS (Business et Elite).

Sources

• Shopify Developer Documentation: Liquid Objects: Section
• Shopify Developer Documentation: Section Rendering API
• MDN Web Docs: HTML id attribute
• MDN Web Docs: Element: scrollIntoView() method
• MDN Web Docs: CSS scroll-behavior
• Google Search Central: URL Structure Guidelines
• FoxEcom Zest Theme Documentation: Mobile Navigation Bar
• Navi+ Help Center: Menu Item Link Types