Section best-sellers avec 7 styles de cartes produit, 2 modes d'affichage (scroll slider et showcase), badges personnalisables, effet glow et handoff animation.
Pourquoi utiliser la section Best Sellers
La section Best Sellers est un outil de preuve sociale puissant qui met en avant vos 3 meilleurs produits dans un format visuellement impactant. En limitant volontairement l'affichage a 3 produits maximum, elle cree un sentiment d'exclusivite et de selection curee qui pousse le visiteur a les considerer serieusement.
La psychologie derriere le "top 3" est bien documentee : montrer a un visiteur que d'autres clients ont deja choisi ces produits reduit l'incertitude et accelere la decision d'achat. Le classement implicite (premier, deuxieme, troisieme) cree une hierarchie de desirabilite qui guide naturellement le regard vers le produit phare.
La section propose deux modes d'affichage radicalement differents : un scroll slider avec cartes produit (7 styles au choix, du classique au ranking avec numerotation) et un mode showcase qui presente chaque produit en grand format avec image, variantes et bouton d'achat. Elle supporte egalement les badges de vente, les badges personnalises, un effet glow lumineux sur les cartes, et une animation de transition (handoff) entre la section et la page produit.
Guide de configuration
Ajouter la section
Dans l'editeur Shopify, cliquez sur Ajouter une section puis cherchez Best Sellers. La section apparait avec un bloc heading par defaut et des produits placeholder.
Selectionner la collection
Le premier parametre a configurer est la Collection. Selectionnez la collection qui contient vos meilleurs vendeurs. La section affichera automatiquement les 3 premiers produits de cette collection.
Choisir le style de carte
Le parametre Card layout determine l'apparence visuelle de chaque carte produit. Il y a 7 styles disponibles :
| Style | Description | Cas d'usage |
|---|---|---|
| Standard | Carte classique avec image, titre, prix et contenu sous l'image | Usage general, convient a tous les types de produits |
| Lookbook | Image en plein cadre avec informations en overlay | Mode, lifestyle, produits ou l'image est reine |
| Minimal | Carte epuree sans bordure ni fond, contenu brut | Designs minimalistes, sites au style editorial |
| Tableau | Carte en disposition tableau avec image a gauche et infos a droite | Catalogues techniques, produits a description importante |
| Overflow | Image qui deborde legerement du cadre de la carte | Design creatif, produits a fort impact visuel |
| Ranking | Carte avec un grand numero de classement (1, 2, 3) bien visible | Specifiquement concu pour les best-sellers avec classement |
| Showcase | Presentation grand format avec image, variantes et CTA en slider | Mise en avant premium d'un nombre reduit de produits |
Le style Ranking est le choix naturel pour cette section car il affiche un numero de classement qui renforce la notion de popularite. Le style Showcase transforme completement la section en un slider grand format avec une presentation detaillee de chaque produit.
Configurer les badges
La section propose deux types de badges independants :
Badge de vente (sale badge) : S'affiche automatiquement sur les produits en promotion. Le texte est personnalisable avec la variable [savings] qui calcule automatiquement le pourcentage de reduction. Par defaut, il affiche "-[savings]%", par exemple "-30%". La couleur de fond et la couleur du texte sont configurables independamment.
Badge personnalise : Permet d'ajouter un texte libre sur chaque produit (3 champs, un par produit). Par exemple "Top 1", "Coup de coeur", "Nouveaute". Ce badge s'affiche en complement ou a la place du badge de vente. La couleur est egalement personnalisable.
Configurer l'effet glow
L'effet glow ajoute un halo lumineux autour des cartes produit au survol. Quand il est active, un aura coloree apparait derriere la carte, creant un effet "eclairage" premium qui attire le regard.
Le glow est controle par deux parametres :
- Couleur du glow : Choisie parmi les couleurs du theme (accent-1, accent-2, etc.)
- Intensite : Legere, moyenne ou forte
card-glow.js) et un fichier CSS dedie (component-card-glow.css). Il est recommande de ne l'activer que si vous souhaitez reellement cet effet, car chaque ressource supplementaire impacte legerement le temps de chargement.Configurer le handoff
Le handoff est une animation de transition entre la carte produit et la page produit. Quand le visiteur clique sur un produit, au lieu d'un chargement classique, la carte "s'envole" vers la page suivante, creant une transition fluide et immersive.
Le handoff est controle par trois parametres :
- Path : Le type de trajectoire de l'animation (direct par defaut)
- Easing : La courbe d'acceleration (smooth par defaut)
- Shadow : Ajouter une ombre portee pendant la transition
Parametres de la section
Collection et contenu
| Parametre | Type | Description | Defaut |
|---|---|---|---|
collection | collection | Collection source des produits | Vide |
text_alignment | select | Alignement du header sur desktop : left, center, right | center |
Carte produit
| Parametre | Type | Description | Defaut |
|---|---|---|---|
card_layout | select | Style de carte : standard, lookbook, minimal, tableau, overflow, ranking, showcase | standard |
card_image_ratio | select | Ratio d'image : adapt, square, portrait, portrait_tall, landscape | adapt |
show_secondary_image | checkbox | Afficher la 2e image au hover (non disponible en overflow/showcase) | false |
card_corner_radius | range | Arrondi des coins de la carte (0-30px) | 6 |
card_asymmetric_corner | checkbox | Activer un coin asymetrique (standard/minimal uniquement) | false |
card_asymmetric_radius | range | Rayon du coin asymetrique (0-60px) | 24 |
card_asymmetric_position | select | Position du coin asymetrique : bottom_right, bottom_left, top_right, top_left | bottom_right |
Contenu de la carte
| Parametre | Type | Description | Defaut |
|---|---|---|---|
card_show_vendor | checkbox | Afficher le nom du vendeur | false |
card_show_price | checkbox | Afficher le prix | true |
card_show_description | checkbox | Afficher la description produit (sauf en minimal) | false |
card_show_swatches | checkbox | Afficher les swatches de couleur (sauf en minimal) | true |
card_show_button | checkbox | Afficher le bouton d'action (sauf en tableau/showcase) | false |
card_quick_add_type | select | Action du bouton : add_to_cart, view_product, quick_view | add_to_cart |
card_button_text | text | Texte du bouton | "Add to cart" |
card_button_style | select | Style du bouton : primary, secondary, tertiary | primary |
card_title_position | select | Position du titre : below_image, overlay_on_media (standard uniquement) | below_image |
Classement (ranking)
| Parametre | Type | Description | Defaut |
|---|---|---|---|
card_show_ranking | checkbox | Afficher le numero de classement (layout ranking uniquement) | false |
card_ranking_start | range | Numero de depart du classement (1-100) | 1 |
Style et effets
| Parametre | Type | Description | Defaut |
|---|---|---|---|
card_hover_effect | select | Effet au survol : none, lift, glow, tilt, reveal | none |
card_background_effect | select | Effet d'arriere-plan : none, gradient_blob, glow | none |
card_gap | range | Espacement entre les cartes (0-60px) | 20 |
card_background | checkbox | Activer le fond de carte (standard/ranking uniquement) | true |
Badges de vente
| Parametre | Type | Description | Defaut |
|---|---|---|---|
show_sale_badge | checkbox | Afficher le badge de promotion | true |
sale_badge_text | text | Texte du badge (supporte [savings] pour le %) | -[savings]% |
sale_badge_color_scheme | select | Couleur de fond du badge : accent-1, accent-2, background, text | accent-1 |
sale_badge_text_color | select | Couleur du texte du badge | background |
Badges personnalises
| Parametre | Type | Description | Defaut |
|---|---|---|---|
show_custom_badge | checkbox | Afficher les badges personnalises | false |
custom_badge_text_1 | text | Texte du badge pour le produit 1 | Preset par defaut |
custom_badge_text_2 | text | Texte du badge pour le produit 2 | Preset par defaut |
custom_badge_text_3 | text | Texte du badge pour le produit 3 | Preset par defaut |
custom_badge_color_scheme | select | Couleur de fond des badges personnalises | accent-2 |
custom_badge_text_color | select | Couleur du texte des badges personnalises | background |
Parametres globaux
La section inclut les parametres globaux du theme (marges, palette de couleurs, largeur du conteneur, visibilite, separateurs) via {{GLOBAL_SETTINGS}}, ainsi que les animations ({{SECTION_ANIMATIONS}}, {{ANIM_HAS_ITEM}}), l'effet glow ({{CARD_GLOW_SETTINGS}}), et le handoff ({{HANDOFF_SETTINGS}}).
Blocs disponibles
Bloc Heading
Titre principal de la section, affiche au-dessus des produits. Supporte un sous-titre, differents niveaux de heading (H1-H4), un controle de taille et les animations standard. L'alignement suit le parametre text_alignment de la section sur desktop, et centre sur mobile.
Bloc Custom Liquid
Permet d'inserer du code Liquid personnalise dans la section. Utile pour ajouter un compteur, un texte dynamique ou tout element specifique non couvert par les autres blocs.
Bloc App
Bloc generique pour integrer des apps Shopify tierces dans la section.
Les 2 modes d'affichage
Mode Scroll Slider (defaut)
C'est le mode utilise avec tous les styles de carte sauf "showcase". Les 3 produits s'affichent dans un scroll slider horizontal :
- Mobile (< 750px) : 1 produit visible a la fois, avec 15% du produit suivant en apercu (peek), navigation par swipe.
- Tablette (750px - 999px) : 2 produits visibles (45% chacun) avec peek. Si la collection contient 2 produits ou moins, une grille statique remplace le slider.
- Desktop (>= 1000px) : Grille statique a 3 colonnes (ou moins si la collection a moins de 3 produits). Pas de scroll horizontal.
Ce comportement responsive est calcule automatiquement en CSS : le slider horizontal n'est actif que quand l'espace ne permet pas d'afficher tous les produits. Sur desktop, les cartes sont toujours affichees dans une grille statique.
Mode Showcase
Le mode showcase est active en selectionnant le style de carte "showcase". Il transforme completement la section en un slider grand format avec une presentation detaillee de chaque produit :
- Chaque slide occupe toute la largeur et affiche une grille a deux colonnes : grande image a gauche, informations produit a droite (vendeur, titre, description, variantes, prix, bouton CTA).
- Les variantes du produit sont affichees sous forme de valeurs cliquables, la premiere etant selectionnee par defaut.
- La navigation se fait via des fleches precedent/suivant et des dots de pagination.
- Le slider boucle (loop active par defaut).
Ce mode est ideal pour une mise en avant premium de 2-3 produits phares, par exemple en homepage ou en landing page.
Exemples de configuration
Top 3 homepage avec classement
La configuration la plus classique pour une homepage : afficher vos 3 best-sellers avec une numerotation visible qui cree un effet "podium".
- Collection : "Best Sellers" (collection automatique triee par ventes)
- Style de carte : Ranking
- Ranking : Active, depart a 1
- Ratio image : Portrait (ideal pour les vetements) ou Square (usage general)
- Badge de vente : Active, texte "-[savings]%", couleur Accent 1
- Badge personnalise : Active, textes "N1 des ventes", "Coup de coeur", "Tendance"
- Effet hover : Lift
- Espacement : 20px
- Fond de carte : Active
Showcase premium en landing page
Pour une page d'atterrissage ou vous voulez presenter vos produits phares en grand format avec tous les details.
- Collection : Selection manuelle de 3 produits phares
- Style de carte : Showcase
- Vendeur : Affiche
- Description : Affichee (tronquee a 200 caracteres)
- Texte du bouton : "Decouvrir"
- Glow : Active, couleur Accent 1, intensite moyenne
- Alignement header : Centre
Best-sellers categorie avec swatches
Pour une page de collection ou vous mettez en avant les 3 produits les plus vendus de cette categorie.
- Collection : "Top Skincare" (collection specifique)
- Style de carte : Standard
- Ratio image : Square
- Image secondaire : Activee (montre le produit sous un autre angle au hover)
- Swatches : Actives (affiche les variantes de couleur directement sur la carte)
- Bouton : Active, action "Quick View", texte "Apercu rapide"
- Badge de vente : Active
- Badge personnalise : Desactive
- Espacement : 24px
- Coins arrondis : 12px
Produits signature avec effet glow
Pour une mise en avant spectaculaire de vos produits signature, avec un halo lumineux qui attire le regard.
- Collection : "Signature Collection" (3 produits phares)
- Style de carte : Lookbook
- Ratio image : Portrait tall
- Glow : Active, couleur Accent 2, intensite forte
- Hover effect : Glow
- Badge personnalise : Active, textes "Edition limitee", "Best-seller", "Nouveaute"
- Fond de carte : Desactive
- Coins arrondis : 16px
- Handoff : Active, easing smooth, shadow active
Comportement responsive
Mobile (< 750px)
Les cartes s'affichent dans un scroll slider horizontal natif. Chaque carte occupe 85% de la largeur du viewport, laissant 15% pour l'apercu du produit suivant (peek). L'espacement entre les cartes est de 1rem. Le defilement utilise le scroll-snap CSS pour un positionnement precis.
Tablette (750px - 999px)
Si la collection contient 3 produits, le scroll slider affiche 2 produits a 45% de la largeur chacun, avec un espacement de 1.5rem. Si la collection contient 1 ou 2 produits, le slider est remplace par une grille statique.
Desktop (>= 1000px)
Les cartes s'affichent toujours dans une grille statique, sans scroll horizontal. Le nombre de colonnes est egal au nombre de produits (1, 2 ou 3), avec un espacement de 1.5rem. Ce choix de design est delibere : sur desktop, les 3 produits doivent etre visibles simultanement pour creer l'effet "top 3" sans interaction requise.
Bonnes pratiques
Prochaines etapes
- Featured Collection -- Pour afficher plus de produits dans une grille ou un slider classique
- Carousel -- Pour un carousel d'images ou de contenu mixte
- Collection Carousel -- Pour mettre en avant plusieurs collections
- Cartes produit -- Pour comprendre en detail les 7 styles de cartes et leurs parametres