Page collection

La page collection présente les produits d’une collection dans une grille, avec des filtres et un tri. Ouvrez le modèle Collections dans l’éditeur de thème pour la configurer.

Nom dans l’éditeur

Collection (EN : Collection)

Où l’ajouter

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

Réglages

En-tête de collection

L’en-tête affiche le titre de la collection, sa description et son image (définies dans ProduitsCollections).

• L’image utilisée est uniquement celle de la collection : contrairement aux listes de collections, l’en-tête ne reprend jamais la photo d’un produit. Sans image, l’en-tête affiche le titre seul.
• Le texte se pose sur l’image, dans les couleurs de la Palette de couleurs de l’en-tête ; un voile mélangé à partir de l’arrière-plan de cette palette garde le texte lisible.
• Masqué avec Afficher l’en-tête de collection, le titre reste annoncé aux lecteurs d’écran.

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.

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

Sans JavaScript, les filtres restent utilisables 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.
• Compacte : 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 « Solde » 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.

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 la photo, le prix, le sélecteur de variante, le plan de vente, les boutons d’achat et un lien « Voir tous les détails ».

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