Comment créer des collections dans Shopify

 

Aujourd’hui, nous passons à une nouvelle catégorie de focus, toujours relative à la fonction « personnalisation du code des thèmes », dans laquelle je vais évoquer une partie spécifique de la boutique : les collections.

Dans cet article, nous allons voir trois premières manipulations : ajouter un effet sur les images de produits dans les pages de collection, modifier la page du catalogue et changer la page des collections.

 

1/ Ajouter un effet sur les images de produits dans les pages de collection

 

Vous pouvez ajouter un effet, lors du passage de la souris, sur les images de produits lorsqu’on les regarde sur les pages de collection.

Le mouvement du curseur va produire un changement d’image, remplacée par une autre image du produit, un texte personnalisé ou une combinaison des deux.

Cette personnalisation se fait en deux étapes :

  • Ajoutez un code CSS à votre feuille de styles

Pour ajouter un effet au passage de la souris, vous devez :

    • Vous rendre sur la page HTML/CSS de votre thème
    • Dans le dossier « Assets », cliquez sur le fichier « theme.css.liquid » (si votre thème ne contient pas ce fichier, ouvrez « styles.css.liquid » ou tout autre fichier ayant l’extension « .css.liquid ».
    • Tout en bas de ce fichier, collez le code que vous pouvez trouver sur cette page.
    • Sauvegardez.

 

  • Éditez le code de vos images de produits

Pour cela :

    • Dans le dossier « Snippets », cliquez sur le fichier « product-grid-item.liquid » (si votre thème ne contient pas ce fichier, cherchez l’un des fichiers suivants : « product-card.liquid », « product-card-grid.liquid », « product-loop.liquid »).
    • Trouvez la balise HTML « img » pour les images de produits, en cherchant le début de code suivant : <img

Le code complet varie selon les thèmes, mais il commence toujours par <img et se termine toujours par > ou />.

Il doit ressembler à quelque chose comme :

<img src= »{{ featured.featured_image.src | img_url: ‘large’ }} » alt= »{{ featured.featured_image.alt | escape }} »>

    • Sur une nouvelle ligne créée au-dessus de ce code, ajoutez :

<div class= »reveal »>

    • Sur une nouvelle ligne créée en dessous de ce code, ajoutez :

</div>

    • Le résultat doit donc ressembler à ceci :

<div class= »reveal »>

  <img src= »{{ featured.featured_image.src | img_url: ‘large’ }} » alt= »{{ featured.featured_image.alt | escape }} »>

</div>

    • Sur une nouvelle ligne en dessous de la balise img et au-dessus de la balise </div> de fermeture, ajoutez le bloc de code qui vous intéresse, parmi les possibilités ci-dessous (choisissez bien une seule des trois solutions) :

 

  1. Pour montrer une image différente lors du passage de la souris, ajoutez :

<img class= »hidden » src= »{{ product.images.last | img_url: ‘large’ }} » alt= »{{ product.images.last.alt | escape }} » />

Le résultat final doit donc ressembler à ceci :

<div class= »reveal »>

  <img src= »{{ featured.featured_image.src | img_url: ‘large’ }} » alt= »{{ featured.featured_image.alt | escape }} »>

  <img class= »hidden » src= »{{ product.images.last | img_url: ‘large’ }} » alt= »{{ product.images.last.alt | escape }} » />

</div>

  1. Pour montrer un texte personnalisé lors du passage de la souris, ajoutez :

<div class= »hidden »>

  <div class= »caption »>

    <div class= »centered »>

    YOUR TEXT

    </div><!– end of .centered –>

  </div><!– end of .caption –>

</div><!– end of .hidden –>

Remplacez la mention « YOUR TEXT » par le texte de votre choix. Vous pouvez utiliser du code HTML et des balises Liquid pour un affichage dynamique de contenus, ce qui peut donner par exemple :

<div class= »hidden »>

  <div class= »caption »>

    <div class= »centered »>

      <p>{{ product.title }}</p>

      <p>{{ product.price | money }}</p>

    </div><!– end of .centered –>

  </div><!– end of .caption –>

</div><!– end of .hidden –>

Dans cet exemple, le texte personnalisé va afficher le nom et le prix du produit au passage de la souris.

Le résultat final doit donc ressembler à ceci (sans la personnalisation du bloc « YOUR TEXT » prise en compte) :

<div class= »reveal »>

  <img src= »{{ featured.featured_image.src | img_url: ‘large’ }} » alt= »{{ featured.featured_image.alt | escape }} »>

  <div class= »hidden »>

    <div class= »caption »>

      <div class= »centered »>

        YOUR TEXT

      </div><!– end of .centered –>

    </div><!– end of .caption –>

  </div><!– end of .hidden –>

</div><!– end of .reveal –>

  1. Pour montrer une image différente + un texte personnalisé, lors du passage de la souris, ajoutez :

  <div class= »hidden »>

    <img src= »{{ product.images.last | img_url: ‘large’ }} » alt= »{{ product.images.last.alt | escape }} » />

    <div class= »caption »>

      <div class= »centered »>

        YOUR TEXT

      </div><!– end of .centered –>

    </div><!– end of .caption –>

  </div><!– end of .hidden –>

Référez-vous à la proposition 2 pour ce qui concerne la personnalisation de la ligne « YOUR TEXT ».

Le résultat final doit donc ressembler à ceci (sans la personnalisation du bloc « YOUR TEXT » prise en compte) :

<div class= »reveal »>

  <img src= »{{ featured.featured_image.src | img_url: ‘large’ }} » alt= »{{ featured.featured_image.alt | escape }} »>

  <div class= »hidden »>

    <img src= »{{ product.images.last | img_url: ‘large’ }} » alt= »{{ product.images.last.alt | escape }} » />

    <div class= »caption »>

      <div class= »centered »>

        YOUR TEXT

      </div><!– end of .centered –>

    </div><!– end of .caption –>

  </div><!– end of .hidden –>

</div><!– end of .reveal –>

    • Sauvegardez vos changements.

Voilà pour cette première personnalisation.

 

2/ Modifier votre page de catalogue

 

La page que Shopify affiche par défaut à l’adresse /collections/all est considérée comme « la page de catalogue ».

Toute nouvelle boutique inclut un lien dans son menu principal, nommé « Catalog » initialement, qui pointe vers cette page.

Dans cette page, on trouve une collection créée automatiquement par Shopify pour afficher tous les produits disponibles dans votre boutique (soit votre catalogue complet, mis à part les produits cachés ou en rupture de stock).

Il est possible d’apporter plusieurs modifications à cette page de catalogue :

 

  • Réordonner les produits de la page.

 

Pour pouvoir modifier manuellement l’ordre des produits tels que Shopify les propose par défaut, vous devez créer une collection qui utiliser le même permalien que la collection automatique d’origine, afin de la remplacer.

Voici les étapes de cette personnalisation :

    • Dans votre administration, rendez-vous dans la page « Products / Collections »
    • Cliquez sur « Add collection »
    • Donnez-lui le titre « All »
    • Réglez-la sur le mode « Automatically select products based on conditions ».
    • Choisissez la condition « ‘Product price is greater than 0 ».
    • Facultatif : si vous voulez cacher les produits en rupture de stock, comme dans la collection automatique d’origine, vous pouvez ajouter une condition supplémentaire : « ‘Inventory stock is greater than 0 ».
    • Sauvegardez.
    • Dans cette même page de nouvelle collection, descendez jusqu’à la section « Products » et, dans la zone « Sort by collection », sélectionnez le réglage « Manually ».
    • Ensuite, réorganisez les produits en utilisant les poignées de déplacement (vous pouvez aussi utiliser les critères de tri automatique et je vous renvoie à la série de focus sur la fonction « Collections » si vous voulez en savoir plus sur ce point).
    • Pour finir, vous pouvez modifier le titre « All » de cette nouvelle collection, en le remplaçant (l’important est que le permalien « /collections/all », tout en bas de la page, ne soit pas modifié.
    • Sauvegardez.

 

  • Ajouter du texte à votre page de catalogue

 

Maintenant que cette nouvelle collection est prête, vous pouvez lui ajouter une description selon les manipulations habituelles.

 

  • Cacher le titre de cette collection

 

Une fois que vous avez créé votre nouvelle collection de remplacement (et pas avant !), si vous préférez que cette page n’affiche pas de titre, vous disposez de deux méthodes pour obtenir ce résultat :

    • Méthode 1 : éditer le fichier « collection.liquid ».

Pour cela, dans ce fichier :

      • Trouvez le code :

<h1>{{ collection.title }}</h1>

      • Remplacez-le par :

{% unless collection.handle == ‘all’ %}

{{ collection.title }}

{% endunless %}

    • Méthode 2 : ajouter un code HTML au champ de titre.

Pour cela :

      • Changez le titre de la collection en l’appelant : <span class= »hide-this »>All</span>
      • Dans la feuille de styles du thème (voir le début de ce focus pour retrouver son emplacement), ajoutez cette règle :

.hide-this {

   display:none;

}

Voilà pour cette personnalisation.

 

3/ Modifier votre page de collections

 

Toutes les boutiques Shopify ont une page de collections qui se trouve par défaut à l’adresse « your-store.com/collections », où toutes les collections de la boutique sont affichées, par ordre alphabétique.

Avec la personnalisation qui suit, vous allez pouvoir réordonner vos collections sur cette page, tout en choisissant une sélection limitée de collections à montrer.

Si vous utilisez un thème Shopify gratuit, vous disposez d’une section spécifique dans votre « Theme editor » pour modifier l’apparence de cette page de collections.

Pour cela, ouvrez la page lorsque vous êtes en mode « Theme editor » et cliquez sur la section « Collections page qui apparaît » pour y effectuer les réglages déjà vus dans les focus consacrés aux thèmes gratuits.

Par contre, si vous disposez d’un thème autre et plus ancien qui ne comporte pas cette section « Collections page », vous allez devoir en modifier le code pour obtenir le même résultat.

Deux étapes :

 

  • 1- Créez un menu pour contrôler votre page de collections

 

Suivez les manipulations suivantes :

    • Rendez-vous sur la page d’administration « Online Store / Navigation ».
    • Cliquez sur le bouton « Add menu ».
    • Nommez votre menu « All collections » (sans les guillemets).

Il est important de ne pas changer ce nom, car il va ensuite être utilisé dans le thème, afin de déterminer quelles collections seront affichées sur la page des collections, ainsi que leur ordre. Ce nom ne sera pas visible côté internaute.

    • Ajoutez dans ce menu un lien pour chaque collection que vous voulez afficher dans la page, en cliquant sur « Menu items », puis en créant une ligne par collection.

Le résultat doit ressembler à l’image ci-dessous, avec vos propres intitulés de collections.

    • Organisez l’ordre des collections telles que vous voulez qu’elles s’affichent côté internaute, en les déplaçant à l’aide de la poignée située à gauche du nom de chaque collection.
    • Sauvegardez.

Dans le cas de certains thèmes, créer ce menu suffit pour obtenir le résultat désiré.

Afin de vérifier le résultat, rendez-vous, côté boutique, sur la page « your-store.com/collections » pour voir ce que donne la manipulation.

Si la page d’origine s’affiche toujours et que votre création de menu n’a pas donné de résultats concrets, vous devez également effectuer l’étape 2.

 

  • 2- Personnalisez le fichier « list-collections.liquid » (seulement si l’étape 1 n’a pas suffi à modifier l’affichage)

Pour cela :

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Dans la catégorie « Templates », cliquez sur le fichier « list-collections.liquid » pour en ouvrir l’éditeur de code.
  • Trouvez toutes les occurrences du code suivant :

{% for collection in collections %}

  • Remplacez-les par le code suivant :

{% for link in linklists.all-collections.links %}

{% assign collection = link.object %}

  • Sauvegardez vos changements.

Votre page des collections doit maintenant afficher les collections choisies lors de la création du menu, à l’étape 1.

Voilà pour ce focus sur la personnalisation des collections, qui sera complété par un autre article dans lequel je vous proposerai des modifications complémentaires dans ce même domaine, avant de passer à d’autres fonctions d’affichage.

À très bientôt pour la suite !