En-tete visuel des pages collection : 4 variantes de style, image de fond, overlay, titre, description, compteur de produits et personnalisation par collection.
Banniere de Collection
La bannière de collection est la section d'en-tête qui accueille vos visiteurs en haut de chaque page collection. Elle affiche le titre de la collection, sa description optionnelle, et peut inclure une image d'arrière-plan pour créer un impact visuel. Scale Theme propose 4 variantes de bannière, chacune avec une identité visuelle distincte.
Les 4 variantes
Hero
La variante la plus immersive. L'image de fond occupe tout l'espace de la bannière, avec un overlay gradient pour assurer la lisibilité du texte superpose.
L'overlay est un dégradé vertical : plus opaque en bas (pour le texte) et plus léger en haut (pour conserver la visibilité de l'image). L'intensité est réglable.
Quand l'utiliser : Pour les collections phares, les pages d'arrivee et les collections saisonnieres ou une image forte raconte une histoire. C'est la variante avec le plus grand impact visuel.
Split
L'écran est divise en deux : le texte d'un côté, l'image de l'autre. Sur mobile, l'image passe au-dessus du texte.
La variante Split inclut un effet de decoupe (clip-path) sur l'image :
- Sur desktop : une decoupe verticale en biais à gauche de l'image
- Sur mobile : une decoupe diagonale en bas de l'image
Un subtil effet de zoom s'active au survol de l'image.
Quand l'utiliser : Quand vous avez une description de collection plus longue a afficher, ou quand vous voulez un équilibré entre texte et visuel.
Minimal
La variante la plus épurée. Pas d'image, juste le titre avec une ligne animée d'accentuation en dessous, suivie de la description et du compteur de produits.
Caracteristiques uniques de la variante Minimal :
- Ligne animée : Une barre colorée (couleur d'accent) apparaît sous le titre avec une animation de scale horizontale
- Meta inline : La description et le compteur de produits s'affichent sur la même ligne, séparés par un point
- Animation respectueuse : L'animation est désactivée si
prefers-reduced-motionest active
Quand l'utiliser : Pour les boutiques au design épuré, ou quand vous ne disposez pas d'images de collection. C'est la variante par défaut.
Overlapping
Le titre se superpose partiellement à l'image en dessous, créant un effet de chevauchement dynamique et moderne.
Caracteristiques uniques de la variante Overlapping :
- Titre XXL : Taille de police réglable de 2rem a 4rem (responsive via clamp), poids 800
- Chevauchement : L'image remonte de -1.5rem (mobile) a -2.5rem (desktop) pour créer l'effet
- Zoom au survol : Un léger zoom (1.03x) s'active au survol de l'image
Quand l'utiliser : Pour un look éditorial et moderne. Le chevauchement crée une hiérarchie visuelle forte entre le nom de la collection et son image.
Configuration de l'image
Sources d'image
L'image de la bannière peut provenir de 3 sources, par ordre de priorite :
| Priorite | Source | Description |
|---|---|---|
| 1 | Image personnalisée | Image uploadee dans les settings de la section |
| 2 | Image de la collection | Image définie dans l'admin Shopify pour la collection |
| 3 | Aucune image | La bannière s'affiche sans image (variante Minimal recommandée) |
| Setting | Description | Défaut |
|---|---|---|
| Afficher l'image de collection | Utilise l'image définie dans l'admin Shopify | Non |
| Image personnalisée | Upload d'une image spécifique (surcharge l'image de collection) | - |
| Image mobile personnalisée | Image spécifique pour mobile (surcharge l'image desktop) | - |
Image desktop vs mobile
Vous pouvez définir une image différente pour le desktop et le mobile. C'est fortement recommande car :
- Les images desktop sont en format paysage (larges)
- Les écrans mobiles sont en format portrait (etroits)
- Le recadrage automatique peut couper des éléments importants
Tailles d'image recommandées
| Variante | Desktop | Mobile |
|---|---|---|
| Hero | 1920 x 800px | 750 x 800px |
| Split | 1500 x 1000px | 750 x 600px |
| Overlapping | 1920 x 600px | 750 x 500px |
| Minimal | Pas d'image | Pas d'image |
Texte et contenu
Titre
Le titre de la collection est automatiquement récupère depuis Shopify. Il s'affiche en tant que balise <h1> avec un visually-hidden "Collection :" devant pour l'accessibilité.
Le style du titre varie selon la variante :
| Variante | Style du titre |
|---|---|
| Hero | clamp(1.75rem, 4vw, 3.5rem), avec ombre de texte |
| Split | Taille standard de heading |
| Minimal | Taille standard + ligne d'accent animée |
| Overlapping | clamp(2rem, 5vw, 4rem), poids 800, tracking serre |
Description
| Setting | Options | Défaut |
|---|---|---|
| Afficher la description | Oui / Non | Oui |
La description de la collection (définie dans Shopify Admin) est rendue en HTML riche (balise .rte) ce qui supporte le gras, l'italique, les liens, etc.
La description est stylee en gris secondaire avec une taille de 1.1rem et un interligne de 1.6 pour une lisibilité optimale.
Compteur de produits
| Setting | Options | Défaut |
|---|---|---|
| Afficher le compteur | Oui / Non | Non |
Affiche le nombre total de produits dans la collection. Le nombre est mis en valeur avec la couleur d'accent et un poids gras.
Overlay (variante Hero)
L'overlay est un voile semi-transparent qui s'affiche par-dessus l'image de fond dans la variante Hero. Il assure la lisibilité du texte sur n'importe quelle image.
| Setting | Options | Défaut |
|---|---|---|
| Intensité de l'overlay | 0% a 100% (par pas de 5) | 50% |
L'overlay est un dégradé vertical (gradient), pas une couleur unie :
- En bas : opacité à la valeur configurée (pour le texte)
- En haut : opacité a 60% de la valeur configurée (pour voir l'image)
Alignement du texte
| Setting | Options | Défaut |
|---|---|---|
| Alignement du texte | Gauche / Centre / Droite | Gauche |
L'alignement affecte le titre, la description, le compteur de produits, et la ligne d'accent (variante Minimal).
| Alignement | Effet sur la ligne d'accent (Minimal) |
|---|---|
| Gauche | L'animation de la ligne part de la gauche |
| Centre | L'animation de la ligne part du centre |
| Droite | L'animation de la ligne part de la droite |
Personnalisation par collection
La bannière de collection est une section unique partagee par toutes les collections. Cependant, vous pouvez personnaliser l'apparence pour chaque collection individuellement :
Image par collection
- Dans Shopify Admin > Produits > Collections, ajoutez une image à chaque collection
- Dans les settings de la bannière, activez "Afficher l'image de collection"
- Chaque collection affichera sa propre image
Image personnalisée globale vs par collection
| Scenario | Comportement |
|---|---|
| Image personnalisée uploadee | Utilisee pour TOUTES les collections |
| "Afficher image collection" active | Chaque collection utilise sa propre image |
| Les deux | L'image personnalisée à la priorite |
| Aucun | Banniere sans image |
Description par collection
La description est toujours propre à chaque collection (définie dans Shopify Admin). Aucune configuration supplémentaire n'est nécessaire. Assurez-vous simplement que "Afficher la description" est active dans les settings de la section.
Animations
La bannière de collection supporte le système d'animation de Scale Theme. Les animations varient selon la variante :
| Variante | Éléments animés |
|---|---|
| Hero | Image (entree hero), overlay (entree overlay), titre (entree heading) |
| Split | Contenu (entree content), titre (entree heading), image (entree image) |
| Minimal | Contenu (entree overlay), titre (entree heading), ligne d'accent (animation CSS) |
| Overlapping | Contenu (entree overlay), titre (entree heading), image (entree image) |
La variante Minimal à une animation speciale : la ligne d'accent sous le titre s'anime via un IntersectionObserver. Elle apparaît avec un scale horizontal progressif quand elle entre dans le viewport.
prefers-reduced-motion. Si l'utilisateur a active la réduction des mouvements, les animations sont désactivées ou instantanees.Decorations et effets
Parallaxe (variante Hero)
Si le système de parallaxe du thème est active, l'image de fond de la variante Hero peut avoir un léger effet de parallaxe au défilement.
Décoration media (variantes Split et Overlapping)
Les variantes Split et Overlapping supportent les décorations de media du thème (formes décoratives autour de l'image).
Decoupe CSS (variante Split)
La variante Split inclut un effet de decoupe (clip-path) sur l'image de collection :
- Desktop : Decoupe verticale à gauche de l'image, créant un bord en biais
- Mobile : Decoupe diagonale en bas de l'image, créant une transition fluide vers le texte
Effet de survol image
Les variantes Split et Overlapping incluent un léger zoom (1.03x) au survol de l'image. Cet effet est désactivé si prefers-reduced-motion est active.
Paramètres globaux
| Setting | Description |
|---|---|
| Palette de couleurs | Schema de couleurs de la bannière |
| Largeur du conteneur | Narrow / Normal / Full / Full padded |
| Marges | Padding haut et bas (mobile et desktop) |
| Séparateurs | Séparateurs SVG en haut et/ou en bas |
| Animations | Type et paramètres d'animation |
Blocs
La bannière de collection supporte les blocs suivants :
| Bloc | Description |
|---|---|
| App | Integration d'applications Shopify tierces |
| Custom Liquid | Code Liquid personnalisé |
Exemples de configuration
Collection mode premium
- Variante : Hero
- Image : Photo lifestyle de la collection
- Overlay : 45%
- Alignement : Centre
- Description : Activee
- Compteur : Non
Catalogue technique
- Variante : Minimal
- Image : Aucune
- Alignement : Gauche
- Description : Activee
- Compteur : Active
Collection saisonniere
- Variante : Split
- Image : Photo produit saisonniere
- Alignement : Gauche
- Description : Activee (texte promotionnel)
- Compteur : Active
Collection editoriale
- Variante : Overlapping
- Image : Image artistique de la collection
- Alignement : Gauche
- Description : Activee (courte)
- Compteur : Non
Bonnes pratiques
- Choisissez la variante selon votre contenu : Hero si vous avez de belles images, Minimal si vous n'en avez pas, Split pour du storytelling, Overlapping pour un look éditorial.
- Preparez des images mobile : Pour Hero et Split, uploadez toujours une image mobile dédiée au format portrait.
- Gardez les descriptions courtes : 1-2 lignes maximum dans la bannière. Le contenu long pousse la grille de produits vers le bas.
- Utilisez le compteur intelligemment : Le compteur est utile pour les grandes collections (100+ produits) ou il aide a donner une idee de l'etendue du catalogue. Pour les petites collections, il est superflu.
- Testez l'overlay : Commencez a 50% et ajustez. Chaque image reagit différemment à l'overlay.
- Coherence entre collections : Utilisez la même variante pour toutes vos collections afin de créer une expérience cohérente. Le contenu (image, description) sera différent, mais le cadre reste le même.
Prochaines étapes
- Page collection — Configuration complète de la page collection
- Filtres — Ajoutez des filtres pour affiner les résultats
- Banner — Section bannière pour d'autres pages
- Carrousel de collections — Affichez plusieurs collections en slider