Comment créer un système de navigation par produit sur shopify ?

Nous allons ajouter dans vos fiches produits la possibilité de naviguer d’un produit à l’autre avec une pagination qui ressemblera à ca:

« Produit précédent | Produit suivant »

Voici les étapes du tuto que vous devez suivre

1 Rendez vous sur votre administration et cliquez sur « Boutique en ligne »

2 Cliquez sur le bouton  – Actions – Modifier Code

3 Trouvez le dossier Sections et cliquez dessus, il va se dérouler afin d’afficher les fichiers

4 Trouvez le fichier product-template.liquid ou product.liquid selon le thème et cliquez dessus

5 Copiez/collez le code ci-dessous ou vous le souhaitez

De préférence après une balise {% include ‘breadcrumb’ %} ou avant la balise <h1>titre du produit</h1>

Bref trouvez l’endroit qui vous convient le mieux !

{% if collection %} 
 <div style="display:inline-block;float:right;">
 {% if collection.previous_product %}
 {{ '« Produit précédent' | link_to: collection.previous_product }}
 {% endif %} 
 {% if collection.previous_product and collection.next_product %} | {% endif %}
 {% if collection.next_product %}
 {{ 'Produit suivant »' | link_to: collection.next_product }} 
 {% endif %}
 </div>
 {% endif %}

N’oubliez pas de cliquer sur Enregistrer pour sauvegarder.

Ce système ne fonctionnera que sur une url du type: nomdusite.com/collections/nom-de-la-collection-ou-la-pagination-marchera/titre-du-produit

Si vous vous accéder directement au produit comme ceci : nomdusite.com/products/titre-du-produit les liens ne s’afficheront pas car c’est le lien direct hors collection 😉

Ce tutoriel existe aussi en vidéo

Bon tuto à tous 🙂

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.8 sur 6 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 28 commentaires

  1. Margot

    22 Fév 2018 Répondre

    Merci beaucoup! ça marche parfaitement!

  3. Patrick

    24 Fév 2018 Répondre

    Excellent. Merci Geoffrey pour tous ces tutos super interressants 🙂

  4. Manu

    17 Mar 2018 Répondre

    Merci, ça fonctionne bien !…

  5. CECILIA

    28 Mai 2018 Répondre

    Parfait! merci!

  6. VERLINDEN PASCALE

    6 Juil 2018 Répondre

    Ca fonctionne très bien mais maintenant le lien vers collection page ne fonctionne plus
    J’ai juste modifier float:right par float:inline-start
    Ps .. suis une vieille dame qui n’y connait pas grand chose
    Merci

  7. Franck Carletto

    30 Juil 2018 Répondre

    Salut Geoffrey, merci encore pour cet excellent tuto, ça marche nickel ! Encore du travail de qualité..
    Geoffrey, sur le thème Supply j’aimerais mettre en place un système de navigation par flèches entre les différentes photos sur une page produit, au lieu de devoir retourner dessus à chaque fois. Shopify me répond que cette modification est trop complexe pour être prise en charge, tu en penses quoi personnellement ?
    Quand les moyens me le permettront, je passerai sur un thème bien optimisé comme Speedfly, plus de souci de ce genre après !
    Merci et bonne journée à toi

    1. Dgeo Dev

      18 Sep 2018 Répondre

      Hello Franck, alors oui ils sont raison c’est une des fonctionnalités les plus compliquée à mettre en place sur un thème qui ne le prévoit pas nativement. Merci pour le message 😉

  8. doni

    18 Sep 2018 Répondre

    Tous ses tutos de page produit sont compatible avec gempages ??

    1. Dgeo Dev

      18 Sep 2018 Répondre

      Bonsoir, étant donné que gempage modifie le code natif de shopify je ne pourrais le confirmer, testez mais sans grande conviction 😉

  9. JO

    24 Jan 2020 Répondre

    Malheureusement pour moi sur le thème Debut en affichage smartphone c’est un peu buggé.

  10. red

    29 Mar 2020 Répondre

    salut Dgeo dev, je voulais te dire que tes tuto sont trais enrichissent. Tu nous donnes vraiment du contenu.
    Mais sur ce code navigation par produit , je crois qu’il rentre en conflit avec celui de économie gagné et pourcentage .
    Pourrais -tu m’aidé svp

    1. Dgeo Dev

      29 Mar 2020 Répondre

      Hello, merci c’est sympa 🙂 alors là cela reste abstrait. Il faudrait me linker l’url en question afin de voir si y a une erreur dans la console.

  11. Quentin MAGNAC

    18 Mai 2020 Répondre

    Bonjour Dgeo Dev,

    Je souhaiterais savoir s’il est possible de créer une collection « parent » et la lier à des sous-collections « enfants » ?

    Je m’explique.
    Si l’on clique sur une collection « parent », mon but est de tomber sur une page qui présentera toutes les sous-collections « enfants » liées à cette collection « parent ».
    Je possède un catalogue assez conséquent. Je ne peux pas laisser mes clients tomber directement sur une page qui répertorie tous les produits de ces sous-collections « enfants ».
    J’ai donc besoin d’une page intermédiaire qui présente les sous-collections. Ensuite, le client pourra cliquer sur l’une d’entre-elles et ainsi choisir le ou les produits qu’il désire.

    Je dois avouer que mon niveau de programmation est nul.
    Je sais qu’il faut passer par la création d’un template qu s’appelle « collection.sub-collections.liquid »
    Mais après, on me parle de « Link List » et je ne comprends plus trop …
    Sans compter le code dans le template que l’on doit sans doute modifier. Hors, je ne sais pas quoi toucher.

    Est-ce que vous auriez une petite idée ? 🙂

    Merci d’avance pour votre retour.
    Cordialement
    Quentin MAGNAC

    1. Dgeo Dev

      19 Mai 2020 Répondre

      Hello, je vois le principe 🙂 c’est trop complexe pour en faire un tuto mais c’est possible de le faire sur Speedfly 😉

      1. Quentin MAGNAC

        19 Mai 2020 Répondre

        Bonjour Dgeo Dev,

        Merci beaucoup pour votre retour rapide.

        Donc, si j’achète le thème « Speedfly », le template « collection.sub-collections.liquid » sera déjà installé ?
        Du coup, je n’ai pas besoin de modifier le code pour faire apparaître mes sous-collections dans ma collection ?
        J’aurai juste à changer le modèle de collection et ensuite ajouter mes sous-collections à ma collection ?

        Merci d’avance pour votre aide et votre retour.
        Cordialement
        Quentin MAGNAC

        1. Dgeo Dev

          19 Mai 2020 Répondre

          Avec speedfly pas besoin de bidouiller oui, tout est faire gabari de templates afin d’associer les collections que vous voulez afin de créer un système de hiérarchie de collections qui n’existe pas sur Shopify 😉

  12. Hamidou sow

    17 Sep 2020 Répondre

    bonjour et merci pour les tutos
    jai une bare de defilement qui saffiche sur mes collection et je voudrais le retirer je sais pas comment faire

    1. Dgeo Dev

      17 Sep 2020 Répondre

      Hello, c’est top léger comme demande il faudrait connaitre le contexte. Quelle barre ? celui de mon tuto si oui c’est n’est pas le bon article. Si c’est le tuto défilement il s’affiche partout c’est normal.

  13. Shirley Dulmaine

    26 Fév 2021 Répondre

    Merci ça fonctionne super !!!!

  14. dams

    19 Juil 2021 Répondre

    Rhoo je suis deçu! mes produits s’affichent direct dans une URL products/nom-du-produit. Comment faire pour éviter ça? Et encore une fois.. merci Dev :p

    1. Dgeo Dev

      19 Juil 2021 Répondre

      Ah ca dépend du thème, il faut qu’il puisse proposer les urls avec collections pour que ce système fonctionne. Speedfly le propose nativement 😉

      1. Dams

        21 Juil 2021 Répondre

        Je suis sur Brooklyn

  15. Felix pidie

    21 Juil 2021 Répondre

    Bonjour,
    Merci pour tes vidéos, elle sont très utile, je veux me lancer en drop shipping mais c’est avec du seo que je veux commencer, je chercher a augmenter la population de mon site a google

  16. Le Fur

    28 Mar 2023 Répondre

    Ceci ne fonctionne plus depuis que shopify « force » l’URL simplifiée lorsque l’on va sur une pages de produit, même venant d’une collection. « Ce type de structure des liens a été ajusté sur tout les nouvelles versions des thèmes en mars 2021 pour rester conforme avec les bonnes pratiques de référencement de Google. Le but est de s’assurer de ne pas avoir de duplicata de contenu, puisque ceci pourrait grandement affecter votre référencement avec Google. C’est pour cette raison que maintenant vous allez voir l’URL simplicité pour tous vos produits » Auriez vous une nouvelle solution ? Merci d’avance.

  17. Kawaye

    25 Août 2023 Répondre

    Bonjour, j’ai essayé d’appliquer le tuto sur  » Product-template.liquid » mais le fichier n’est pas disponible dans mon thème et j’ai voulu chercher la balise, mais rien ne s’affiche !

    1. Dgeo Dev

      27 Août 2023 Répondre

      Hello, essayez de trouver un main-product.liquid ou un fichier avec le terme product

Laisser un commentaire

Fermer le menu
×
×

Panier