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 😉

 

Cet article a 10 commentaires

  1. Merci beaucoup! ça marche parfaitement!

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

  3. Merci, ça fonctionne bien !…

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

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

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

Laisser un commentaire

Fermer le menu
×
×

Panier