Nous allons voir dans ce tutoriel shopify comment créer un lien ancre menant à un endroit précis en restant sur la même page. Ce type de système est très pratique pour les boutiques mono-produit. Il permet de cliquer sur un bouton ou une flèche afin d’arriver à une section dans le contenu plus bas.

1. Comment faire un lien ancre dans un contenu ?

Idéal si vous avez un contenu éditorial très long et que vous voulez créer un lien vers une section en bas.

Rendez-vous dans un de vos contenus, pages, produits ou collections et dans votre éditeur, l’endroit ou vous écrivez vos textes,  cliquez en haut à droite sur le mode code: <>

Code du lien

Mettez le lien code ci-dessous à l’endroit que vous souhaitez en début de texte.

<a href="#section-1">Lien vers la section</a>

Code de la section

C’est la zone de destination au clic sur le lien. Mettez ce code à l’endroit ou vous voulez que le lien mène.

<div id="section-1"></div>

2. Comment faire un lien ancre dans un menu ?

Très pratique pour les boutiques mono-produit ou tout est présent sur une seule page. Vous cliquez sur un lien et vous arrivez à une zone bien spécifique. On voit ce genre de système sur les sites one-page.

Code de la section

Vous allez devoir trouver l’identifiant de la section voulue grâce aux outils de développement proposé par votre navigateur. Sur chrome c’est dans: Afficher -> Options pour les développeurs -> Outils de développement. Une fenêtre va s’ouvrir en bas et vous allez cliquer sur une sorte de carré avec une flèche à l’intérieur comme ceci:

A ce stade sélectionnez une section de votre thème qui va se mettre en sur-brillance. Maintenant trouvez une section avec un code de ce type: id="section-shopify-2342324" ou truc du genre 🙂 et copiez ce qu’il y entre les doubles guillemets le section-shopify-2342324 et copiez/collez l’url de votre boutique du style: https://dgeodev.myshopify.com/ et faite un mix en rajoutant un # !

Ça va donner ceci: https://dgeodev.myshopify.com/#section-shopify-2342324

Légende pour les humains 😀 -> Lien va mener vers le site ayant pour identifiant (#) celui de cette section.

Code du lien

Pour cette partie vous allez vous rendre dans votre boutique shopify côté admin et cliquer sur Navigation. Dans votre menu cliquez sur Ajoutez un élément de menu et collez dans le champ lien le code complet que nous avons vu dans la partie: « Code de la section »

3. Comment faire un bouton ancre  ?

Faite la même chose que le point 2 mais vous allez en plus pouvoir mettre un bouton à la place d’un lien de menu. C’est donc le même principe sauf que vous allez devoir mettre un bouton HTML à l’endroit que vous souhaitez. Je vous invite à regarder la vidéo pour plus de précision.

Code du bouton

Copiez/collez ce code à l’endroit ou vous souhaitez que le bouton apparaisse.

<a class="btn btn-scroll" href="#section-shopify-2342324">En savoir plus</a>

Code de la section

Voir le point 2 car c’est le même principe !

4. Bonus

Faire un effet de scroll animé progressif

Au clic vous trouvez que ca arrive trop vite et vous souhaitez avoir un effet de transition de type smooth sympa ? alors suivez les étapes suivantes 😉

Rendez-vous dans Boutique en ligne -> Actions -> Modifier le code, Trouvez dans le dossier Assets un fichier xxx.scss.liquid, généralement theme.scss.liquid, style.scss.liquid, timber.scss.liquid ou autres (demandez au développeur de votre thème en cas de doute…). Mettez-vous tout en bas du fichier et collez ce bout de code:

html { scroll-behavior: smooth; }

Styliser le bouton

Restez dans ce même fichier et copiez/collez le code ci-dessous:

body .btn,  body .btn-scroll { 
background:#ff9900 !important;
color:#fff !important;
border:none !important;
box-shadows:none !important;
padding:10px 15px !important;
}

La couleur du bouton sera orange et le texte blanc, pour avoir plus de possibilités vous pouvez visionner la vidéo ou vous renseigner sur les couleurs hexadécimales.

La vidéo arrive bientôt 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 0 sur 0 votes]

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine