Page collection

La page collection présente le titre d’une collection et ses produits dans une grille, avec des filtres et un tri. Ouvrez le modèle Collections dans l’éditeur de thème pour la configurer. Le modèle compte deux sections : En-tête de collection, qui ouvre la page sur le titre de la collection, et Collection, la grille de produits en dessous.

En-tête de collection

Nom dans l’éditeur

En-tête de collection (EN : Collection header)

Où l’ajouter

Modèle Collections uniquement, au-dessus de la section Collection

Blocs acceptés

Titre de la collectionDescription de la collectionTexteTexte enrichiBouton

L’en-tête ouvre la page sur le titre et la description de la collection, posés sur l’image de la collection quand elle en a une. Son contenu est fait de blocs :

• Titre de la collection : le nom de la collection, comme titre principal de la page (h1).
• Description de la collection : la description définie sur la collection dans ProduitsCollections. Rien ne s’affiche pour une collection qui n’en a pas.
• Texte, Texte enrichi et Bouton : vos propres textes et liens, identiques sur toutes les collections qui utilisent le modèle.

La section est livrée avec le titre et la description. Les blocs Titre de la collection et Description de la collection n’ont pas de réglages : ils affichent le titre et la description propres à la collection.

Image, hauteur et voile

Avec Afficher l’image de la collection, l’en-tête affiche l’image définie sur la collection dans ProduitsCollections sur toute la largeur de la page, le texte posé en bas. L’en-tête n’utilise que l’image de la collection : contrairement aux listes de collections, il ne reprend jamais la photo d’un produit. Une collection sans image affiche son texte seul, comme lorsque Afficher l’image de la collection est désactivé.

Sur une image :

• Hauteur règle la hauteur de la bande : Petite, Moyenne ou Grande.
• Voile sur l’image (de 0 à 90 %, 55 % par défaut) règle l’intensité d’un voile derrière le texte. Le voile garde cette intensité du bas de la bande jusqu’en haut du texte, puis s’estompe au-dessus, pour que le reste de l’image s’affiche tel quel. Il suit le texte : il couvre une description de n’importe quelle longueur. À 0 %, il n’y a pas de voile : vérifiez l’en-tête sur une image claire avant de le laisser ainsi.
• Palette de couleurs sur l’image règle la couleur du texte, et le voile est mélangé à partir de l’arrière-plan de cette palette. Sur une image, la description prend la couleur de texte pleine de la palette, et non sa couleur atténuée.

Palette de couleurs s’applique quand l’en-tête n’affiche pas d’image.

Mise à jour depuis la 1.0.0

Dans Faubourg 1.0.0, l’en-tête faisait partie de la section Collection. Une mise à jour conserve votre propre modèle Collections, qui n’a pas de section En-tête de collection : après la mise à jour, vos pages collection n’affichent plus de titre au-dessus de la grille tant que vous ne l’avez pas ajoutée.

Section Collection

Nom dans l’éditeur

Collection (EN : Collection)

Où l’ajouter

Modèle Collections uniquement (section principale du modèle)

Blocs acceptés

Promotion

Grille

La grille compte de deux à cinq colonnes sur ordinateur (trois au plus sur tablette) et une ou deux sur téléphone. L’espace entre les colonnes suit la gouttière des grilles. Le nombre de produits est affiché au-dessus de la grille et mis à jour quand l’acheteur filtre.

Promotions dans la grille

Ajoutez un bloc Promotion à la section Collection pour placer une promotion parmi les produits : une nouvelle campagne, un service, une page éditoriale. La section en accepte trois au plus.

• Position parmi les produits (de 1 à 24) désigne le produit dont la promotion prend la place ; les produits se décalent. Une position au-delà du dernier produit de la page place la promotion après eux.
• Largeur lui donne la largeur d’un ou de deux produits.
• La promotion prend le cadre des fiches (Forme de l’image ; avec Adapté à l’image, portrait). Sans image, elle affiche une illustration d’attente, y compris sur votre boutique en ligne. Avec des fiches Pleine largeur, son texte se pose sur l’image comme le nom des fiches.
• Elle ne s’affiche que sur la première page, jamais dans une collection vide, et n’est pas comptée dans le nombre de produits. Elle reste en place quand l’acheteur filtre et trie, et fonctionne sans JavaScript.

Filtres et tri

Les filtres (prix, disponibilité, couleur, taille, type, marque…) se créent dans l’application Search & Discovery, pas dans le thème. Voir le guide Filtres de collection pour les mettre en place.

Mise en page des filtres propose trois présentations :

Disposition	Ordinateur	Téléphone
Tiroir (par défaut)	Un lien « Filtrer et trier » ouvre un tiroir latéral	Tiroir
Barre d’outils	Les filtres sont alignés au-dessus de la grille, en menus déroulants (à partir de 750 px)	Tiroir
Barre latérale	Les filtres occupent une colonne à gauche de la grille (à partir de 990 px)	Tiroir

• Dans le tiroir, l’acheteur coche ses filtres puis valide avec le bouton « Voir N produits », dont le nombre se met à jour à chaque choix. « Tout effacer » retire tous les filtres.
• Dans la barre d’outils et la barre latérale, chaque choix s’applique immédiatement, sans recharger la page. L’adresse de la page est mise à jour : l’acheteur peut partager une sélection filtrée et utiliser le bouton Retour.
• Les filtres actifs s’affichent sous forme d’étiquettes que l’on peut retirer une à une.
• Une valeur qui ne donnerait aucun résultat est désactivée.
• Les filtres de couleur s’affichent en pastilles quand Search & Discovery fournit des échantillons.

Le tri utilise les options standard de Shopify (en vedette, meilleures ventes, alphabétique, prix, date).

Le lien « Filtrer et trier » est présent dès l’affichage de la page : rien ne bouge sur la page quand le tiroir est prêt. Sans JavaScript, les filtres restent utilisables : le lien ouvre le même panneau, et un bouton Appliquer valide le choix. Dans la barre d’outils et la barre latérale, les filtres s’affichent dans la page avec un bouton Appliquer.

Pagination

Type	Comportement
Numéros de page (par défaut)	Des flèches et des numéros de page sous la grille.
Bouton « Charger plus »	Un bouton « Afficher plus de produits » ajoute la page suivante sous la grille.
Défilement infini	La page suivante se charge automatiquement quand l’acheteur approche de la fin de la grille.

« Afficher plus » et le défilement infini reviennent aux numéros de page si JavaScript est indisponible.

Fiches produit

Toutes les grilles du thème (collection, recherche, collection en vedette, recommandations) partagent les mêmes réglages de Fiche produit, à régler séparément dans chaque section.

Disposition

• Standard : le nom et le prix empilés sous l’image.
• Compact : le nom et le prix sur une même ligne, le prix aligné à droite (quand la fiche est assez large).
• Pleine largeur : le nom, le prix et les pastilles posés en bas de la photo, sur un dégradé mélangé à partir du fond de la fiche.

Forme de l’image

Portrait, carré, paysage, ou Adapté à l’image pour que chaque fiche prenne la forme de sa propre photo. Pour une grille régulière, choisissez une forme fixe et des photos cadrées de la même façon. L’option Adapté à l’image n’est pas proposée dans la recherche, où produits, articles et pages se mélangent.

Ce qu’affiche une fiche

• Badges : « Épuisé » quand aucune variante n’est disponible, sinon « Promotion » quand au moins une variante a un prix barré. Il n’existe pas de badge « Nouveau ».
• Pastilles de couleur : jusqu’à trois pastilles de la première option qui a des échantillons, puis « +N » ; survoler une pastille montre la photo de la variante, cliquer mène à cette variante.
• Deuxième image au survol : la deuxième photo du produit remplace la première au survol, sur les appareils équipés d’une souris.
• Fournisseur : le nom du fournisseur (marque), au-dessus du nom.
• Prix : « À partir de … » quand les variantes ont des prix différents ; prix barré en cas de solde.
• Note : cinq étoiles remplies selon la note du produit, la note et le nombre d’avis, sous le prix. La note vient de la note produit de Shopify, que remplit une application d’avis ; un produit sans note n’affiche rien. Contrairement aux réglages ci-dessus, propres à chaque section, Afficher les notes sur les fiches produit se trouve dans Paramètres du thème > Produit et s’applique à toutes les fiches de la boutique. Il est activé par défaut.
• Un produit dont les médias sont uniquement des vidéos affiche l’image d’aperçu de sa première vidéo.

Ajout rapide

Avec Afficher l’ajout rapide, un bouton « + » apparaît sur la fiche :

• un produit à variante unique est ajouté directement au panier ;
• un produit à options ouvre un tiroir Ajout rapide avec les médias du produit, le prix, le sélecteur de variante, le plan de vente, les boutons d’achat et un lien « Voir tous les détails ».

La mention des taxes et de la livraison, le sélecteur de quantité et les boutons de paiement dynamique du tiroir suivent Paramètres du thème > Produit, comme sur la page produit.

Le tiroir montre tous les médias du produit, vidéos comprises, un à la fois, dans un carrousel avec des flèches et une barre de progression. Il passe à l’image de la variante quand l’acheteur choisit une variante. Le tiroir ne propose pas de zoom.

L’ajout rapide n’est pas proposé pour un produit épuisé. Les cartes-cadeaux ouvrent toujours le tiroir. Le contenu du tiroir d’ajout rapide n’est pas personnalisable dans l’éditeur.

Collection vide

Une collection sans produit affiche « Il n’y a pas encore de produit dans cette collection. », sans filtres. Une combinaison de filtres sans résultat affiche « Aucun produit ne correspond aux filtres choisis. ». Un numéro de page au-delà de la dernière page (depuis un ancien lien, par exemple) affiche « Il n’y a rien sur cette page. » et un bouton « Retour à la première page ».