Aujourd’hui, suite des personnalisations de thème relatives aux collections de votre boutique.

Je vais vous parler de trois points : la création de sous-catégories de produits, l’utilisation de tags pour trier les collections, et le choix du nombre de produits pouvant apparaître sur les pages de collections.

 

1/ Créer des sous-catégories de produits

 

Vous pouvez utiliser les tags de produits pour créer des sous-catégories de produits dans Shopify.

Le lien de navigation vers une sous-catégorie a ce format :

/collections/collection-handle/product-tag-handle

Pour créer et afficher vos sous-catégories des produits, vous allez devoir suivre trois étapes.

 

  • Définissez vos catégories et sous-catégories

 

L’exemple que j’utilise ici pour cette personnalisation comporte deux catégories principales de produits (« Hommes » et « Femmes »).

Chacune de ces catégories va contenir les sous-catégories suivantes : « Hauts », « Pantalons », « Chaussures » et « Accessoires ».

À vous de leur faire correspondre vos propres contenus.

    • Créer vos collections pour vos deux catégories « Hommes » et « Femmes » (en mode manuel ou automatique).
    • Entrer dans la page admin de chacun de vos produits pour lui donner un tag correspondant à sa future sous-catégorie (ici, les tags respectifs « hauts », « pantalons », « chaussures » et « accessoires »).

Une fois que vos catégories et sous-catégories sont définies, vous allez décider comment les afficher.

 

  • Définissez vos catégories et sous-catégories

 

Vous disposez de plusieurs méthodes pour afficher vos catégories et sous-catégories.

Les plus populaires sont :

    • Les menus déroulants.

(Attention : tous les thèmes ne supportent pas ce mode d’affichage)

Si le vôtre l’est, procédez comme ceci :

      • Rendez-vous dans la page « Online Store / Navigation ».
      • Cliquez sur « Main Menu ».
      • Dans la zone « Menu items », cliquez sur « Add menu item ».
      • Créez les liens de vos deux collections principales, en suivant l’exemple de l’image donné ci-dessous et en remplaçant « Men » et « Women » par vos propres libellés. Choisissez pour chacune la collection qui lui correspond.
      • Une fois que c’est fait, retournez sur la page de navigation.
      • Cliquez sur « Add menu ».
      • Donnez à ce menu le nom exact de votre première sous-catégorie (par exemple, « Hauts »).
      • Ensuite, remplissez ces menus avec des liens menant aux collections filtrées.

Par exemple, l’image ci-dessous montre ce que donneraient les sous-catégories d’une collection « Women ».

      • Sauvegardez.
      • Vérifiez maintenant votre menu principal dans la boutique.

Les manipulations effectuées dans l’exemple original (en anglais) donnent ceci :

    • Les boutons cliquables (voir la restriction à un seul tag, dans le dernier point de ce tuto, si vous choisissez cet affichage).
      • Rendez-vous sur la page « Online Store / Themes » dans votre thème actif.
      • Ouvrez la page « Actions / Edit HTML/CSS ».
      • Dans la catégorie « Templates », ouvrez le fichier « collection.liquid » dans votre éditeur de code.
      • Repérez le bloc « < !– Collection description –> » dans le code, comme sur l’image qui suit :
      • Au-dessus ou en dessous de ce bloc, collez le code suivant :

<ul class= »subnav clearfix »>

  <li{% unless current_tags %} class= »active »{% endunless %}>

    {% if collection.handle %}

    <a href= »/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %} »>All

    {% elsif collection.current_type %}

    <a href= »{{ collection.current_type | url_for_type | sort_by: collection.sort_by }} »>All</a>

    {% elsif collection.current_vendor %}

    <a href= »{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }} »>All</a>

    {% endif %}

  </li>

  {% for tag in collection.all_tags %}

  {% if current_tags contains tag %}

  <li class= »active »>

    {{ tag | link_to_remove_tag: tag }}

  </li>

  {% else %}

  <li>

    {{ tag | link_to_tag: tag }}

  </li>

  {% endif %}

  {% endfor %}

</ul>

<style>

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before, .clearfix:after { content: «  »; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/* Subnavigation styles */

.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }

.subnav li { display: block; float: left; }

.subnav li a {

  display: block;

  height: 28px;

  line-height: 28px;

  padding: 0 7px;

  -webkit-border-radius: 7px;

  -moz-border-radius: 7px;

  border-radius: 7px;

  background: #eee;

  margin: 0 7px 7px 0;

  color: #666;

}

.subnav li a:hover, .subnav li.active a {

  background: #666;

  color: #fff;

}

</style>

      • Côté boutique, vous devez obtenir un résultat qui ressemble à ceci, avec vos propres libellés à la place des exemples utilisés ici.
    • Un élément à sélectionner en tant que sous-menu (voir la restriction à un seul tag, dans le dernier point de ce tuto, si vous choisissez cet affichage).
      • Rendez-vous sur la page « Online Store / Themes » dans votre thème actif.
      • Ouvrez la page « Actions / Edit HTML/CSS ».
      • Dans la catégorie « Templates », ouvrez le fichier « collection.liquid » dans votre éditeur de code.
      • Repérez le bloc « < !– Collection description –> » dans le code, (comme dans la manipulation précédente).
      • Au-dessus ou en dessous de ce bloc, collez le code suivant :

<div class= »clearfix filter »>

  <p>Browse by tag:

 

  <select class= »coll-filter »>

    <option value= » »>All</option>

    {% for tag in collection.all_tags %}

    {% if current_tags contains tag %}

    <option value= »{{ tag | handle }} » selected>{{ tag }}

    {% else %}

    <option value= »{{ tag | handle }} »>{{ tag }}

    {% endif %}

    {% endfor %}

  </select>

</div>

      • Ensuite, allez tout en bas de cette même page de code, collez ce second code :

<script>

/* Product Tag Filters – Good for any number of filters on any type of collection page. */

Shopify.queryParams = {};

if (location.search.length) {

  for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split(‘&’); i < aCouples.length; i++) {

    aKeyValue = aCouples[i].split(‘=’);

    if (aKeyValue.length > 1) {

      Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);

    }

  }

}

var collFilters = jQuery(‘.coll-filter’);

collFilters.change(function() {

  var newTags = [];

  var newURL =  »;

  collFilters.each(function() {

    if (jQuery(this).val()) {

      newTags.push(jQuery(this).val());

    }

  });

 

  if (newTags.length) {

    Shopify.queryParams.constraint = newTags.join(‘+’);

  }

  else {

    delete Shopify.queryParams.constraint;

  }

  location.search = jQuery.param(Shopify.queryParams);

 

});

</script>

      • Sauvegardez vos changements.
      • Côté boutique, vous devez obtenir un résultat qui ressemble à ceci, avec vos propres libellés à la place des exemples utilisés ici.

 

  • Empêchez vos visiteurs de choisir de multiples tags

 

Parfois, un client va filtrer une collection en choisissant plus d’un tag. Si vous n’avez pas de produits rattachés simultanément à ces multiples tags, le tri ne renverra alors aucun résultat.

Pour éviter cela, vous devez modifier votre thème et restreindre le choix de sous-catégorie à un seul tag.

    • Rendez-vous sur la page « Online Store / Themes » dans votre thème actif.
    • Ouvrez la page « Actions / Edit HTML/CSS ».
    • Dans la catégorie « Templates », ouvrez le fichier « collection.liquid » dans votre éditeur de code.
    • Recherchez le code suivant :

{{ tag | link_to_add_tag: tag }}

    • Enlevez la mention « add_ » pour que le code devienne :

{{ tag | link_to_tag: tag }}

    • Sauvegardez vos changements.

Voilà pour cette première personnalisation.

 

2/ Filtrer vos collections avec des tags de produits, dans les pages de collection

 

Si vous voulez rendre le tri des produits (dans les pages de collection) plus simple pour vos clients, vous pouvez ajouter un menu déroulant qui affiche les tags.

Lorsque vos clients sélectionnent un tag de produit, seuls les produits qui sont étiquetés avec ce tag seront affichés.

  • Rendez-vous sur la page « Online Store / Themes » dans votre thème actif.
  • Ouvrez la page « Actions / Edit HTML/CSS ».
  • Dans la catégorie « Templates », ouvrez le fichier « collection.liquid » dans votre éditeur de code.
  • Choisissez l’endroit où vous voulez faire apparaître le menu déroulant (il vous faudra sans doute plusieurs tests pour trouver l’emplacement qui vous convient) et collez le code suivant :

<div class= »clearfix filter »>

  <p>Browse by tag:

 

  <select class= »coll-filter »>

    <option value= » »>All</option>

    {% for tag in collection.all_tags %}

    {% if current_tags contains tag %}

    <option value= »{{ tag | handle }} » selected>{{ tag }}

    {% else %}

    <option value= »{{ tag | handle }} »>{{ tag }}

    {% endif %}

    {% endfor %}

  </select>

</div>

 

<script>

  /* Product Tag Filters – Good for any number of filters on any type of collection pages */

  var collFilters = jQuery(‘.coll-filter’);

  collFilters.change(function() {

    var newTags = [];

    collFilters.each(function() {

      if (jQuery(this).val()) {

        newTags.push(jQuery(this).val());

      }

    });

    if (newTags.length) {

      var query = newTags.join(‘+’);

      window.location.href = jQuery(‘{{ ‘tag’ | link_to_tag: ‘tag’ }}’).attr(‘href’).replace(‘tag’, query);

    }

    else {

      {% if collection.handle %}

      window.location.href = ‘/collections/{{ collection.handle }}’;

      {% elsif collection.products.first.type == collection.title %}

      window.location.href = ‘{{ collection.title | url_for_type }}’;

      {% elsif collection.products.first.vendor == collection.title %}

      window.location.href = ‘{{ collection.title | url_for_vendor }}’;

      {% endif %}

    }

  });

</script>

  • Sauvegardez vos changements.

Voilà pour cette deuxième personnalisation.

 

3/ Changer le nombre de produits affichés sur les pages de collection

 

Notez d’abord que la limite fixée par Shopify, dans tous les cas, est de 50 produits affichés par page.

Vous pouvez modifier le nombre, dans la limite de 50, en passant par votre « Theme editor » (ouvrez bien une page de collection pour voir le paramétrage accessible dans l’onglet « Collection pages ») si votre thème vous donne accès à ce réglage.

Si ce n’est pas le cas (ou si les réglages accessibles sont insuffisants), vous pouvez aussi éditer le code de votre thème.

Selon que votre thème fonctionne avec ou sans sections, le fichier modifié va être différent (cf les premiers focus de cette série relative aux thèmes pour en savoir plus).

 

  • Personnalisation pour les thèmes avec sections

 

  • Rendez-vous sur la page « Online Store / Themes » dans votre thème actif.
  • Ouvrez la page « Actions / Edit HTML/CSS ».
  • Dans la catégorie « Sections », ouvrez le fichier « collection-template.liquid » dans votre éditeur de code.
  • Trouvez la ligne de code suivante :

{% paginate collection.products by 9 %}

Remplacez le chiffre dans cette ligne (pour cet exemple, il s’agit de « 9 ») par le nombre de votre choix, sans dépasser 50.

    • Si le thème que vous utilisez se sert de la variable « limit » à la place d’un chiffre, vous allez trouver cette ligne, à la place de la précédente :

{% paginate collection.products by limit %}

Remplacez le mot « limit » par le nombre de votre choix, sans dépasser 50.

Attention ! Remplacer ce type de variable par un nombre désactive la possibilité d’effectuer des modifications sur la pagination des pages de collection, au sein du « Theme editor ». Ne l’utilisez que si vous n’avez pas d’autre possibilité pour obtenir le nombre de produits par page que vous désirez.

    • Sauvegardez vos changements.

 

  • Personnalisation pour les thèmes sans sections

 

  • Rendez-vous sur la page « Online Store / Themes » dans votre thème actif.
  • Ouvrez la page « Actions / Edit HTML/CSS ».
  • Dans la catégorie « Sections », ouvrez le fichier « collection.liquid » dans votre éditeur de code.
  • Trouvez la ligne de code suivante :

{% paginate collection.products by 9 %}

Remplacez le chiffre dans cette ligne (pour cet exemple, il s’agit de « 9 ») par le nombre de votre choix, sans dépasser 50.

    • Si le thème que vous utilisez se sert de la variable « limit » à la place d’un chiffre, vous allez trouver cette ligne, à la place de la précédente :

{% paginate collection.products by limit %}

Remplacez le mot « limit » par le nombre de votre choix, sans dépasser 50.

Attention ! Remplacer ce type de variable par un nombre désactive la possibilité d’effectuer des modifications sur la pagination des pages de collection, au sein du « Theme editor ». Ne l’utilisez que si vous n’avez pas d’autre possibilité pour obtenir le nombre de produits par page que vous désirez.

    • Sauvegardez vos changements.

Les personnalisations relatives aux collections sont terminées et, dans le prochain focus, nous passerons aux modifications de code qui concernent les images, les couleurs et les vidéos.

À très bientôt pour la suite !