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 « online store »

2 Cliquez sur le bouton Action puis Edit HTML / CSS

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 Save 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 4 votes]

Cet article a 17 commentaires

  1. Merci beaucoup! ça marche parfaitement!

  2. Excellent. Merci Geoffrey pour tous ces tutos super interressants 🙂

  3. Merci, ça fonctionne bien !…

  4. Parfait! merci!

  5. 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

  6. 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. 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 😉

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

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

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

  9. 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. 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.

  10. 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. Hello, je vois le principe 🙂 c’est trop complexe pour en faire un tuto mais c’est possible de le faire sur Speedfly 😉

      1. 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. 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 😉

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & 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