Afficher toutes les Collections d’un produit Shopify

Afficher toutes les Collections d’un produit Shopify
Shopify Lecture 2 minutes • 21 juillet 2023

Besoin de faire apparaître les Collections auxquelles un produit Shopify appartient ? Voici un code simple et efficace à ajouter dans le fichier de votre thème qui gère l'affichage des produits !

Afficher les Collections d'un produit Shopify au format cliquable

<div class="product-collections__display">
 {% for collection in product.collections %}
  {{ collection.title | link_to: collection.url }}
 {% endfor %}
</div>

Le code ci-dessus est à copier et coller tel quel à l'endroit où vous souhaitez voir s'afficher les Collections du produit. Ainsi, une liste cliquable des Collections s'affiche à l'endroit souhaité, chacune dans une balise html <a>.
C'est le choix idéal si la présentation doit se faire sous forme de boutons cliquable.
A vous de jouer pour personnaliser le CSS (fichier theme.css).

Afficher les Collections d'un produit Shopify au format cliquable et séparées par des virgules

<div class="product-collections__display">
 {% for collection in product.collections %}
  {% assign coll = '/collections/' | append: collection.title | replace: " ", "-" %}
  {{ collection.title | capitalize | link_to: coll }}{% unless forloop.last %},{% endunless %}
 {% endfor %}
</div>

Avec ce code, le résultat sera le même que la solution d'avant, mais avec un plus une séparation de chaque Collection par une virgule.
C'est le choix idéal si la présentation doit se faire sous forme de liste.

En conclusion :

L'internaute peut ainsi aller voir plus facilement les Collections liées au produit qui lui tape dans l'oeil. Sa recherche de produits associés est facilitée grâce à l'affichage de vos Collections (même marque, même gamme, même type de produit...).
C'est également un plus pour le SEO de vos fiches produits.

Besoin d'un expert pour améliorer les performances de votre site internet ?

Contactez-moi pour en discuter ensemble !
Recevez un audit et une estimation gratuite des optimisations à apporter à votre site web.

Laisser un commentaire

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