Comment créer un lien ancre sur Shopify

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 Ressources (Assets) un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise. 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.

Ce tutoriel existe aussi en vidéo

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

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 10 commentaires

  1. fabien

    24 Sep 2020 Répondre

    merci pour ce tuto
    j’aimerai faire une ancre sur la page produit quand on clique sur les étoiles (évaluation) que l’on puisse être envoyé en bas de page ou se trouve les commentaires d’évaluations ( avec l’app review) merci

    1. Dgeo Dev

      25 Sep 2020 Répondre

      Merci pour le com. C’est possible mais cela demande une intervention car un hack ne suffira pas , il faut intervenir dans les fichiers.

  2. Alex

    16 Nov 2020 Répondre

    Bonjour,
    Je me permets de vous écrire car le code pour le smooth ne fonctionne pas sur ma boutique (j’ai bien le même thème que vous)
    J’ai bien suivi ce qu’il était écrit, auriez-vous une autre solution? Merci d’avance 🙂

  3. Emmanuel

    21 Nov 2020 Répondre

    Bonjour,
    C’est dommage de devoir mettre en avant que la boutique a été créée avec Shopify en utilisant ce genre d’ancre :
    #section-shopify-2342324
    N’y a-t-il pas un autre moyen ?

    1. Dgeo Dev

      23 Nov 2020 Répondre

      Tout dépend du thème 🙂 il est possible de le supprimer mais faut s’y connaitre un peu en code 🙂

  4. Hans

    22 Déc 2020 Répondre

    Bonjour,
    Tout d’abord merci pour le travail que vous faîtes !
    Je ne parviens pas à trouver comment insérer ces encres uniquement sur la page d’accueil..
    Une solution s’il vous plaît ?

  5. Stephanie

    22 Fév 2022 Répondre

    Bonjour !
    Merci pour ce tutoriel instructif ! Je cherche à rendre clicable mon image de « produit vedette », pour qu’elle mène directement à sa description. Est-ce que l’une des méthodes ci-dessous s’applique?
    D’avance je vous remercie !

    1. Dgeo Dev

      23 Fév 2022 Répondre

      Hello, en général l’image d’un produit en vedette est à gauche et la description est à droite donc l’ancre ne sert à rien ou alors je n’ai pas compris 🙂 le thème propose une image et une description en dessous bcp plus loin ?

  6. Stéphanie

    23 Fév 2022 Répondre

    Bonjour,
    Merci pour ces super tutoriels ! Je découvre même des possibilités…
    J’aimerais rendre l’image d’un produit vedette clicable, pour que le client accèdent directement à la fiche produit. Je crois que les méthodes de ce tutoriel ne s’appliquent pas dans ce cas. Pourriez-vous m’aider?
    D’avance je vous remercie !

    1. Dgeo Dev

      23 Fév 2022 Répondre

      Bonjour, si c’est un lien simple vers une produit alors il faut englober l’image d’une balise a href – Généralement les thèmes permettent de mettre un lien sur les images en tout cas Speedfly le fait 😉

Laisser un commentaire

Fermer le menu
×
×

Panier