Tuto créer un système de navigation par produit précédent et suivant sur shopify

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

 

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 😉

 

10 commentaires sur “Tuto créer un système de navigation par produit précédent et suivant sur shopify

  1. Franck Carletto

    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

      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 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*