Configuration complète de la page collection : grille de produits, colonnes, mise en page, tri, pagination, styles de cartes et etat vide.
Page Collection
La page collection est l'une des pages les plus visitees de votre boutique. C'est ici que vos clients parcourent, filtrent et decouvrent vos produits. Scale Theme propose une section Product Grid hautement configurable qui vous permet de controler chaque aspect de l'affichage.
Grille de produits
Colonnes
Le nombre de colonnes déterminé combien de produits s'affichent côté à côté. Vous pouvez configurer des valeurs différentes pour le desktop et le mobile.
| Setting | Options | Défaut |
|---|---|---|
| Colonnes desktop | 1 a 5 | 4 |
| Colonnes mobile | 1 ou 2 | 2 |
Mise en page de la grille
Quatre modes de mise en page sont disponibles pour varier la présentation de vos produits :
| Mode | Description |
|---|---|
| Grid (défaut) | Grille uniforme classique, tous les produits ont la même taille |
| Featured | Le premier produit est mis en avant (occupe 2 colonnes et 2 rangees sur desktop) |
| Alternating | Chaque 5e produit est elargi sur 2 colonnes, créant un rythme visuel |
| List | Affichage en liste horizontale, image à gauche et détails à droite |
Espacement entre les cartes
Controlez l'espace entre chaque carte produit :
| Setting | Options | Défaut |
|---|---|---|
| Espacement grille | Serre / Normal / Large | Normal |
| Option | Espacement | Usage recommande |
|---|---|---|
| Serre | 0.5rem (8px) | Look galerie/moodboard, style tableau |
| Normal | 20px | Polyvalent, convient à la majorité des boutiques |
| Large | 2.5rem (40px) mobile, 3rem (48px) desktop | Espacement genereux, look premium et aere |
Rayon de bordure
| Setting | Options | Défaut |
|---|---|---|
| Rayon de bordure | 0 a 50px (par pas de 2) | 8px |
Ce paramètre contrôle l'arrondi des coins des cartes produit dans la grille.
Bascule Vue Grille / Liste
| Setting | Options | Défaut |
|---|---|---|
| Afficher la bascule de vue | Oui / Non | Non |
Quand active, un toggle apparaît au-dessus de la grille permettant aux visiteurs de basculer entre la vue grille et la vue liste. Le choix du visiteur est sauvegarde dans le navigateur (localStorage) et persiste entre les visites.
Produits par page et pagination
Produits par page
| Setting | Options | Défaut |
|---|---|---|
| Produits par page | 8 a 24 (par pas de 4) | 16 |
Ce nombre déterminé combien de produits sont charges sur chaque page de la collection. Les produits supplémentaires sont accessibles via la pagination.
Pagination numerotee
Quand la collection contient plus de produits que la limité par page, une pagination numerotee s'affiche en bas de la grille. Elle comprend :
- Des numéros de page cliquables
- Des flèches précédent/suivant
- La page courante mise en surbrillance
- Des points de suspension pour les collections tres longues
?page=2, ?page=3...) ce qui est excellent pour le SEO. Chaque page de collection est indexable individuellement par les moteurs de recherche.Styles de cartes produit
Scale Theme propose 7 styles de cartes différents, chacun créant une atmosphere unique pour votre collection.
Les 7 layouts de carte
| Layout | Description |
|---|---|
| Standard | Carte classique avec image, titre, prix et contenu en dessous |
| Lookbook | Style éditorial, l'image domine avec les infos en overlay |
| Minimal | Epure, pas de bordure ni fond, focus sur l'image |
| Tableau | Les cartes se touchent sans espace, effet galerie d'art |
| Overflow | L'image deborde légèrement du cadre, effet dynamique |
| Ranking | Affiche un numéro de classement sur chaque produit (1, 2, 3...) |
| Showcase | Mise en valeur premium avec effets visuels enrichis |
Ratio d'image
| Setting | Options | Défaut |
|---|---|---|
| Ratio d'image | Adapt / Carre / Portrait / Portrait haut / Paysage | Adapt |
| Option | Ratio | Usage |
|---|---|---|
| Adapt | Original | Respecte le ratio natif de chaque image |
| Carre | 1:1 | Uniforme, idéal pour la plupart des produits |
| Portrait | 4:5 | Idéal pour la mode et les vetements |
| Portrait haut | 2:3 | Encore plus vertical, fort impact visuel |
| Paysage | 3:2 | Pour les produits horizontaux (électronique, meubles) |
Image secondaire au survol
| Setting | Options | Défaut |
|---|---|---|
| Afficher image secondaire | Oui / Non | Non |
Quand active, la deuxième image du produit s'affiche au survol de la souris. C'est idéal pour montrer le produit sous un autre angle ou porte.
Contenu de la carte
Personnalisez les informations affichées sur chaque carte :
| Setting | Description | Défaut |
|---|---|---|
| Afficher le fournisseur | Nom de la marque/fournisseur | Non |
| Afficher le prix | Prix du produit | Oui |
| Afficher la description | Description courte du produit | Non |
| Afficher les swatches | Pastilles de couleur des variantes | Oui |
| Afficher le bouton | Bouton d'action sur la carte | Non |
Bouton d'action rapide
Quand le bouton est active, vous choisissez son comportement :
| Setting | Options | Défaut |
|---|---|---|
| Action du bouton | Ajout au panier / Voir le produit / Vue rapide | Ajout au panier |
| Texte du bouton | Texte personnalisé | "Add to cart" |
| Style du bouton | Primaire / Secondaire / Tertiaire | Primaire |
| Action | Comportement |
|---|---|
| Ajout au panier | Ajoute directement le produit au panier (variante par défaut) |
| Voir le produit | Redirige vers la page produit |
| Vue rapide | Ouvre une modale avec les détails du produit sans quitter la page |
Position du titre
| Setting | Options | Défaut |
|---|---|---|
| Position du titre | Sous l'image / En overlay sur l'image | Sous l'image |
Disponible uniquement avec le layout Standard. L'option overlay positionne le titre et le prix directement sur l'image, en bas.
Effets visuels
| Setting | Options | Défaut |
|---|---|---|
| Effet au survol | Aucun / Lift / Glow / Tilt / Reveal | Aucun |
| Effet de fond | Aucun / Gradient Blob / Glow | Aucun |
| Effet survol | Description |
|---|---|
| Lift | La carte se souleve légèrement avec une ombre portee |
| Glow | Un halo lumineux apparaît autour de la carte |
| Tilt | La carte s'incline subtilement en 3D selon la position de la souris |
| Reveal | Un effet de révélation progressive au survol |
Fond de carte et coins
| Setting | Options | Défaut |
|---|---|---|
| Fond de carte | Oui / Non | Oui |
| Rayon des coins | 0 a 30px (par pas de 2) | 6px |
| Coin asymétrique | Oui / Non | Non |
| Rayon asymétrique | 0 a 60px (par pas de 2) | 24px |
| Position coin asymétrique | Bas-droite / Bas-gauche / Haut-droite / Haut-gauche | Bas-droite |
Badges de promotion
Les badges de promotion mettent en evidence les produits en solde :
| Setting | Options | Défaut |
|---|---|---|
| Afficher badge solde | Oui / Non | Oui |
| Texte du badge | Texte personnalisé avec [savings] | "-[savings]%" |
| Couleur du badge | Accent 1 / Accent 2 / Background / Text | Accent 1 |
| Couleur du texte | Background / Text / Accent 1 / Accent 2 | Background |
| Afficher prix compare | Affiche le prix barre à côté du prix actuel | Oui |
[savings] dans le texte du badge pour afficher automatiquement le pourcentage de réduction. Par exemple, -[savings]% affichera "-25%" pour un produit réduit de 25%.Tri des produits
| Setting | Options | Défaut |
|---|---|---|
| Activer le tri | Oui / Non | Oui |
Quand le tri est active, un menu déroulant "Trier par" apparaît, offrant les options de tri configurées dans Shopify :
- Pertinence (défaut)
- Meilleurs ventes
- Alphabetique (A-Z)
- Alphabetique (Z-A)
- Prix croissant
- Prix decroissant
- Date (plus récent)
- Date (plus ancien)
L'emplacement du menu de tri dépend du type de filtre choisi. Voir la page Filtres et facettes pour plus de détails.
Collection vide
Quand une collection ne contient aucun produit (soit parce qu'elle est vide, soit parce que les filtres actifs excluent tous les résultats), un message est affiche :
Le message comprend :
- Un texte indiquant qu'aucun produit ne correspond
- Un lien de reinitialisation pour supprimer les filtres actifs et revenir à la collection complète
Blocs personnalisables
La section Product Grid supporte des blocs injectables a deux positions :
| Position | Description |
|---|---|
| Avant les produits | Le contenu apparaît au-dessus de la grille de produits |
| Après les produits | Le contenu apparaît en dessous de la grille, avant la pagination |
Bloc Custom Liquid
Injectez du code Liquid personnalisé à la position de votre choix. Cela permet d'ajouter des bannières promotionnelles, des textes descriptifs, ou tout autre contenu HTML/Liquid au sein de la page collection.
Bloc App
Integrez des blocs d'applications Shopify tierces directement dans la page collection.
Animations
La grille de produits supporte le système d'animations de Scale Theme. Quand active, les cartes produit apparaissent avec une animation d'entree au scroll (fade, slide, zoom, etc.), avec un effet de cascade (stagger) sur les 12 premiers produits.
| Setting | Description |
|---|---|
| Activer animations | Active les animations d'entree des cartes |
| Type d'animation | Choisir l'animation (fade-up, zoom-in, etc.) |
| Stagger | Effet de cascade avec délai progressif |
Paramètres globaux
Comme toutes les sections Scale Theme, la page collection inclut les paramètres globaux :
| Setting | Description |
|---|---|
| Palette de couleurs | Schema de couleurs de la section |
| Largeur du conteneur | Narrow / Normal / Full / Full padded |
| Marges | Padding haut et bas (mobile et desktop séparément) |
| Séparateurs | Séparateurs SVG en haut et/ou en bas de la section |
| Visibilite | Cacher sur mobile ou desktop |
Bonnes pratiques
- Optimisez vos images : Utilisez des images de produits de taille cohérente pour un rendu uniforme dans la grille.
- Choisissez le bon nombre de colonnes : 4 colonnes pour les grands catalogues, 3 pour les boutiques premium, 2 pour les produits necessitant de grandes images.
- Activez la vue rapide : C'est un accelerateur de conversion qui réduit les frictions.
- Limitez les produits par page : 16 est le nombre optimal. Au-dela, le chargement peut ralentir.
- Testez sur mobile : Vérifiez toujours l'apparence sur telephone, c'est la où la majorité de vos visiteurs navigueront.
Prochaines étapes
- **Filtres et facettes** — Configurez le système de filtrage pour aider vos clients à trouver les bons produits
- **Bannière collection** — Personnalisez l'en-tête visuel de vos pages collection
- **Quick View** — Activez la vue rapide pour un achat sans quitter la collection
- **Cartes produit** — Personnalisez l'apparence des cartes dans la grille