Guide complet des 30+ blocs disponibles sur la page produit : essentiels, conversion, bundles, avis, information, media, addons et autres.
Blocs de la page produit
La page produit de Scale Theme dispose de plus de 30 blocs que vous pouvez ajouter, réorganiser et configurer librement depuis l'éditeur Shopify. Chaque bloc remplit une fonction précise pour construire une fiche produit optimisée pour la conversion.
Comment composer votre page produit
La page produit est la page la plus importante de votre boutique — c'est là que le visiteur décide d'acheter ou non. L'ordre et le choix des blocs ont un impact direct sur votre taux de conversion.
Le principe
Les blocs s'empilent verticalement dans la colonne d'informations (à droite de la galerie media sur desktop, en dessous sur mobile). Vous les réorganisez par glisser-déposer dans l'éditeur Shopify.
Compositions recommandées par type de boutique
Mode & Vêtements
1. Stars (note)
2. Title
3. Price
4. Variant Option — Couleur (swatches)
5. Variant Option — Taille (boutons)
6. Size Chart (guide des tailles)
7. Quantity Selector
8. Buy Buttons
9. Trust Badges (paiement + retours)
10. Delivery Estimation
11. Collapsible Row — Description
12. Collapsible Row — Matières & Entretien
13. Collapsible Row — Livraison & RetoursCosmétique & Beauté
1. Title
2. Stars (note)
3. Price + Badge promo
4. Social Proof Avatars ("3,200+ clientes satisfaites")
5. Variant Option — Contenance (boutons)
6. Buy Buttons
7. Coupon ("BEAUTY10")
8. Trust Badges (Bio, Vegan, Cruelty-free)
9. Delivery Estimation
10. Product Tabs — Description | Ingrédients | Mode d'emploiTech & Électronique
1. Title
2. Price + Prix barré
3. Timer (offre limitée)
4. Stock Indicator (barre visuelle)
5. Variant Option — Capacité (boutons)
6. Variant Option — Couleur (swatches)
7. Quantity Selector
8. Buy Buttons
9. Trust Badges (garantie + paiement)
10. Delivery Estimation
11. Comparison Table (link)
12. Collapsible Row — Spécifications
13. Collapsible Row — GarantieAlimentaire & Compléments
1. Title
2. Stars
3. Price
4. Variant Option — Saveur (swatches image)
5. Bundle Quantity (Pack de 3 = -15%)
6. Buy Buttons
7. Subscription Toggle (abonnement)
8. Trust Badges (Bio, Sans gluten, Fabriqué en France)
9. Product Tabs — Description | Valeurs nutritionnelles | FAQL'ordre compte
L'emplacement de chaque bloc influence la conversion :
| Position | Rôle | Blocs recommandés |
|---|---|---|
| Tout en haut | Identifier le produit | Stars, Title, Price |
| Zone de décision | Choisir et acheter | Variants, Quantity, Buy Buttons |
| Sous le bouton ATC | Rassurer | Trust Badges, Delivery, Stock |
| En bas | Informer | Tabs, Collapsible Rows, Description |
Essentiels
Ces blocs forment le cœur de votre fiche produit. Ils sont indispensables pour que le client puisse identifier, comprendre et acheter le produit.
Title (Titre)
Affiche le titre du produit tel que défini dans l'admin Shopify. Le niveau de heading HTML est configurable pour le SEO.
| Setting | Description | Options |
|---|---|---|
| Heading tag | Niveau HTML du titre | H1 / H2 / H3 |
| Taille | Taille typographique | Small / Medium / Large / XL |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Price (Prix)
Affiche le prix du produit avec support complet du prix barre (compare at price), du pourcentage de réduction, du badge promo et du prix unitaire.
| Setting | Description | Options |
|---|---|---|
| Afficher le prix compare | Montre l'ancien prix barre | Oui / Non |
| Badge réduction | Affiche le % ou le montant économisé | Pourcentage / Montant / Aucun |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Le prix se met à jour automatiquement quand le client change de variante. Si la variante sélectionnée a un prix différent, l'affichage change instantanément sans rechargement de page.
unit_price_measurement.Description
Affiche la description du produit définie dans l'admin Shopify. Le contenu supporte le format riche (HTML) : gras, italique, listes, liens, tableaux, etc.
| Setting | Description | Options |
|---|---|---|
| Tronquer | Limiter la hauteur avec un bouton "Voir plus" | Oui / Non |
| Hauteur max | Hauteur avant troncature | 100px a 500px |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Variant Option (Options de variante)
Affiche les options de variante du produit (taille, couleur, matériau, etc.) sous forme de boutons, swatches visuels ou menu déroulant. C'est l'un des blocs les plus configurables du thème.
| Setting | Description | Options |
|---|---|---|
| Source de l'option | Comment déterminer quelle option afficher | Auto / Custom (nom spécifique) |
| Nom de l'option | Nom de l'option si source Custom | Texte libre |
| Type de sélecteur | Style d'affichage des valeurs | Bouton / Image (swatch) / Dropdown |
| Taille | Taille des sélecteurs | Small / Medium / Large |
| Direction | Disposition des valeurs | Horizontal / Vertical |
| Items par ligne | Nombre de valeurs par ligne | 1 a 6 |
| Style de sélection | Comment marquer la valeur active | Background / Border |
| Forme circulaire | Swatches en cercle (mode Image) | Oui / Non |
| Masquer le label | Ne pas afficher le nom de l'option | Oui / Non |
| Border radius bouton | Arrondi des boutons | 0 a 50px |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Pour un guide complet sur le système de variantes, consultez la page dédiée Options de variantes.
Quantity Selector (Selecteur de quantité)
Permet au client de choisir la quantité avant d'ajouter au panier. Interface avec boutons +/- et champ numérique éditable.
| Setting | Description | Options |
|---|---|---|
| Affichage auto | N'afficher que si toutes les options de variante sont présentés | Oui / Non |
| Afficher quantité panier | Infobulle montrant combien sont déjà dans le panier | Oui / Non |
| Texte quantité panier | Message personnalisé pour l'infobulle | Texte (supporte $qty) |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Buy Buttons (Boutons d'achat)
Le bloc le plus important de la page produit : le bouton "Ajouter au panier" avec options de paiement dynamique (Shop Pay, Apple Pay, Google Pay), termes de paiement et formulaire de notification de retour en stock.
| Setting | Description | Options |
|---|---|---|
| Texte du bouton | Texte affiché sur le bouton ATC | Texte (supporte [amount] et [percent] pour afficher les économies) |
| Style du bouton | Apparence visuelle | Primary / Secondary / Tertiary |
| Largeur | Largeur du bouton | Full / Half |
| Icône | Icône dans le bouton | Aucune / Panier / Sac / Flèche / Cadenas / etc. |
| Position de l'icône | Placement de l'icône | Gauche / Droite / Cercle à droite |
| Taille police | Taille du texte du bouton | 50% a 200% |
| Padding vertical | Epaisseur du bouton | 0 a 30px |
| Border radius | Arrondi des coins | 0 a 50px |
| Paiement dynamique | Afficher Shop Pay, Apple Pay, etc. | Oui / Non |
| Style paiement dynamique | Apparence du bouton dynamique | Meme style que ATC / Style spécifique |
| Termes de paiement | Afficher "Payez en 4x" etc. | Oui / Non |
| Quantité intégrée | Selecteur +/- intégré sur la même ligne | Oui / Non |
Notification de retour en stock
Quand un produit est épuisé, le bouton ATC peut se transformer en formulaire de notification :
| Setting | Description | Options |
|---|---|---|
| Activer notification | Formulaire quand le produit est épuisé | Oui / Non |
| Mode notification | Comment afficher le formulaire | Bouton (remplace ATC) / Formulaire (toujours visible) |
| Mode de collecte | Informations demandees | Email / Telephone / Les deux |
| Texte du titre | En-tête du formulaire | Texte |
| Texte du bouton | Texte du bouton de soumission | Texte |
| Message de succès | Message après inscription | Texte |
| Consentement SMS | Checkbox de consentement si telephone | Oui / Non |
| Endpoint personnalisé | URL externe pour les notifications | URL |
Conversion
Ces blocs sont concus pour créer l'urgence, etablir la confiance et accelerer la decision d'achat.
Timer (Compte à rebours)
Affiche un compte à rebours pour créer un sentiment d'urgence. Peut utiliser le timer global du thème ou une date personnalisée.
| Setting | Description | Options |
|---|---|---|
| Date de fin | Date et heure de fin du compte à rebours | Date picker |
| Mode | Type de timer | Date fixe / Evergreen / Session |
| Message | Texte accompagnant le timer | Texte libre |
| Style | Apparence visuelle | Compact / Card / Badge |
| Cacher après expiration | Masquer le bloc quand le timer atteint zéro | Oui / Non |
Stock (Indicateur de stock)
Affiche le niveau de stock du produit avec un message personnalisable et une barre de progression visuelle.
| Setting | Description | Options |
|---|---|---|
| Type de stock | Source des données de stock | Shopify (réel) / Manuel (valeur fixe) |
| Stock manuel | Quantité affichée si mode Manuel | Nombre |
| Texte | Message affiché (supporte $quantity pour inserer la valeur) | HTML/Texte |
| Limite | Valeur max pour la barre (100% = cette valeur) | Nombre (défaut 100) |
| Couleur de remplissage | Couleur de la barre | Palette de couleurs |
| Alignement | Position du bloc | Gauche / Centre / Droite |
| Style du texte gras | Mise en valeur des parties en gras | Défaut / Surbrillance / Badge |
| Couleur du gras | Couleur des parties en gras | Accent 1 / Accent 2 / Foreground |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Delivery Estimation (Estimation de livraison)
Affiche une estimation de la date de livraison calculee automatiquement, avec un compte à rebours optionnel jusqu'à l'heure limité de commande du jour.
| Setting | Description | Options |
|---|---|---|
| Format d'affichage | Mode de présentation | Visuel (2 colonnes) / Texte (inline) |
| Style | Apparence du conteneur | Rempli (background) / Bordure (outline) |
| Type de délai | Comment calculer la date | Fixe (X jours) / Plage (X a Y jours) |
| Jours de délai | Nombre de jours (mode fixe) | 1 a 30 |
| Delai min / max | Plage de jours (mode plage) | 1 a 30 chacun |
| Exclure weekends | Ne pas compter samedi et dimanche | Oui / Non |
| Activer heure limité | Afficher le compte à rebours jusqu'à l'heure de coupure | Oui / Non |
| Heure limité | Heure de coupure pour expédition le jour même | 0 a 23h |
| Minute limité | Minutes de l'heure de coupure | 0 a 59 |
| Icône | Icône affichée | Camion / Avion / Horloge / Custom image |
| Border radius | Arrondi des coins | 0 a 30px |
| Palette de couleurs | Schema de couleurs du bloc | Liste des palettes |
| Marges | Marges desktop, tablet et mobile | 0 a 100px |
Trust Badges (Badges de confiance)
Affiche les icônes de méthodes de paiement acceptees, une image personnalisée (certification, garantie) et/ou une note d'evaluation avec étoiles.
| Setting | Description | Options |
|---|---|---|
| Badges de paiement | Afficher les icônes de paiement | Oui / Non |
| Image personnalisée | Votre propre image de badge | Image upload |
| Largeur image | Taille de l'image personnalisée | 50 a 500px |
| Afficher note | Section d'evaluation étoiles | Oui / Non |
| Valeur note | Note sur 5 | 0 a 5 (pas de 0.1) |
| Style étoiles | Apparence des étoiles | Standard / Remplies |
| Texte note | Texte à côté des étoiles | Texte libre |
| Alignement | Position des badges | Gauche / Centre / Droite |
| Espacement | Gap entre les éléments | 0 a 40px |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Social Proof Avatars (Preuve sociale)
Affiche des avatars empilés avec un message de preuve sociale (ex : "142 personnes regardent ce produit en ce moment").
| Setting | Description | Options |
|---|---|---|
| Nombre d'avatars | Combien d'avatars afficher | 1 a 5 |
| Taille avatar | Dimension des avatars circulaires | 20 a 60px (défaut 36) |
| Avatar 1 a 5 | Images des avatars | Image upload par avatar |
| Titre | Message de preuve sociale | Texte (supporte HTML) |
| Icône de vérification | Afficher un check vert | Oui / Non |
| Style | Apparence du bloc | Card (avec fond) / Minimal (sans fond) |
| Alignement | Position du bloc | Gauche / Centre / Droite |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Coupon (Code promo)
Affiche un code promo que le client peut copier en un clic. Support de l'application automatique au panier.
| Setting | Description | Options |
|---|---|---|
| Code promo | Le code a afficher | Texte |
| Label | Texte au-dessus du code | Texte |
| Message copie | Message de confirmation après copie | Texte |
| Style | Apparence du bloc | Dashed / Solid / Filled |
| Taille | Dimension du bloc | Small / Medium / Large |
| Icône | Icône à gauche du code | Etiquette / Ciseaux / Étoile / Custom / Aucune |
| Application auto | Appliquer le code au panier automatiquement | Oui / Non |
| Couleur de fond | Background du bloc | Palette de couleurs |
| Couleur du texte | Couleur du texte | Palette de couleurs |
| Couleur de bordure | Couleur de la bordure | Palette de couleurs |
| Border radius | Arrondi des coins | 0 a 30px |
| Alignement desktop | Position sur desktop | Gauche / Centre / Droite |
| Alignement mobile | Position sur mobile | Gauche / Centre / Droite |
Bundles
Les blocs Bundle permettent d'augmenter significativement le panier moyen en proposant des offres groupees directement sur la page produit. Scale Theme propose 5 types de bundles différents.
Bundle Quantity (Quantité)
Le client achete 2, 3, 4+ du même produit avec des réductions progressives. Idéal pour les consommables, cosmétiques et produits repetes.
| Setting | Description | Options |
|---|---|---|
| Titre | En-tête du bloc | Texte riche |
| Sous-titre | Texte secondaire | Texte |
| Layout | Disposition des tiers | Vertical / Horizontal |
| Style de tier | Apparence des cartes | Default / Cards |
| Style de sélection | Comment marquer l'actif | Background / Checkbox / Border |
| Afficher image | Image du produit dans les tiers | Oui / Non |
| Afficher prix unitaire | Prix par unite après réduction | Oui / Non |
| Afficher économies | Pourcentage de réduction | Oui / Non |
| Badge | Badge sur un tier spécifique | Texte + tier cible (1-4) |
| Tiers 1 a 4 | Quantité, prix/réduction, label par tier | Configurable par tier |
| Enable tier 4 | Ajouter un 4eme palier | Oui / Non |
| Mix & Match | Permettre de choisir les variantes par unite | Oui / Non |
| Cadeaux | Cadeaux débloqués selon le tier | Oui / Non |
| Abonnement | Support des selling plans Shopify | Oui / Non |
Bundle Variant (Variante)
Chaque variante du produit devient un tier de bundle. Idéal quand les variantes représentent des tailles/quantités différentes (ex : 100ml, 200ml, 500ml) avec des prix dégressifs.
| Setting | Description | Options | |
|---|---|---|---|
| Layout | Disposition des tiers | Vertical / Horizontal | |
| Style de sélection | Marquage de l'actif | Background / Radio / Checkbox | |
| Afficher image | Image de la variante | Oui / Non | |
| Descriptions | Description par tier (séparé par `\ | `) | Texte |
| Features | Liste de features par tier (séparé par `\ | , items par ,`) | Texte |
| Barre d'économies | Barre visuelle montrant l'économie | Oui / Non | |
| Badge | Badge sur un tier spécifique | Texte + tier cible | |
| Cadeaux | Cadeaux débloqués selon le tier | Oui / Non | |
| Abonnement | Support des selling plans | Oui / Non |
Bundle Pack (Pack multi-produits)
Composez un pack de 2 a 6 produits différents avec une réduction groupee. Le client peut sélectionner les variantes de chaque produit inclus.
| Setting | Description | Options |
|---|---|---|
| Produits 2 a 6 | Produits du pack | Selecteur de produit Shopify |
| Inclure produit principal | Ajouter le produit de la page au pack | Oui / Non |
| Mode de sélection | Tous les produits obligatoires ou au choix | Tous / Selection libre |
| Selection minimum | Nombre minimum pour la réduction (mode libre) | 2 a 6 |
| Mode de prix | Type de réduction | Pourcentage fixe / Par paliers / Aucune |
| Pourcentage réduction | Réduction appliquée | 0 a 50% |
| Afficher images | Images des produits | Oui / Non |
| Afficher prix individuels | Prix de chaque produit | Oui / Non |
| Icône + | Signe + entre les produits | Oui / Non |
| Selection variantes | Dropdown de variantes par produit | Oui / Non |
| Afficher économies | Montant total économisé | Oui / Non |
| Animation prix | Animer le changement de prix | Oui / Non |
| Bouton d'ajout | Bouton dédié pour le pack | Oui / Non |
| Barre de progression | Progression vers la sélection minimum (mode libre) | Oui / Non |
Buy One Get One - BOGO
Offre "Achetez X, recevez Y gratuit ou a prix réduit". Le type de bundle le plus agressif pour les promotions.
| Setting | Description | Options |
|---|---|---|
| Réduction sur l'offert | Pourcentage de réduction sur le produit offert | 0 a 100% (100% = gratuit) |
| Tiers 1 a 4 | Quantité achetee / quantité offerte par tier | Nombres configurables |
| Labels personnalisés | Texte de chaque tier | Texte par tier |
| Layout | Disposition des tiers | Vertical / Horizontal |
| Style de sélection | Marquage de l'actif | Background / Checkbox |
| Afficher prix unitaire | Prix par unite après réduction | Oui / Non |
| Badge | Badge sur un tier spécifique | Texte + tier cible |
| Cadeaux | Cadeaux supplémentaires | Oui / Non |
| Abonnement | Support des selling plans | Oui / Non |
Bundle Mix & Match (Composition libre)
Le client compose son propre bundle en choisissant parmi une sélection de produits/variantes avec des prix dégressifs selon la quantité.
| Setting | Description | Options |
|---|---|---|
| Produits source | Collection ou liste de produits eligibles | Selecteur |
| Quantité minimum | Nombre minimum de produits | 2 a 10 |
| Quantité maximum | Nombre maximum de produits | 2 a 20 |
| Réduction | Réduction selon la quantité | Degressif configurable par palier |
| Selecteurs de variantes | Type de sélection des variantes | Dropdown / Swatch / Button |
Avis
Stars (Étoiles)
Affiche une note sous forme d'étoiles avec integration optionnelle de Trustpilot, Google ou une plateforme personnalisée (logo, étoiles, note et nombre d'avis).
| Setting | Description | Options |
|---|---|---|
| Plateforme | Source des avis | Generic / Trustpilot / Google / Custom |
| Layout | Disposition des éléments | Inline / Stacked / Compact |
| Note | Valeur sur 5 | 0 a 5 (pas de 0.1) |
| Nombre d'avis | Nombre affiché | Texte libre |
| Label de note | Texte descriptif (ex : "Excellent") | Texte / Auto (calcule depuis la note) |
| Afficher logo | Logo de la plateforme | Oui / Non |
| Logo custom | Votre propre logo (mode Custom) | Image upload |
| Nom plateforme custom | Nom affiché (mode Custom) | Texte |
| Afficher étoiles | Les étoiles visuelles | Oui / Non |
| Afficher valeur | La note numérique (ex : "4.8/5") | Oui / Non |
| Afficher nombre | Le nombre d'avis | Oui / Non |
| Texte avis | Texte à côté du nombre (ex : "reviews on") | Texte |
| Taille étoiles | Echelle des étoiles | 50% a 200% |
| Taille logo | Echelle du logo | 50% a 200% |
| Espacement | Gap entre les éléments | 0 a 30px |
| Lien | URL cliquable (vers la page d'avis) | URL |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Reviews Carousel (Carrousel d'avis)
Un carrousel defilant d'avis clients directement sur la page produit. Jusqu'a 10 avis sur 1 ou 2 rangees avec défilement automatique ou navigation manuelle.
| Setting | Description | Options |
|---|---|---|
| Titre | En-tête du carrousel | Texte riche (supporte le gras stylise) |
| Avis 1 a 10 | Texte de chaque avis | Texte |
| Image 1 a 10 | Avatar de chaque avis | Image upload |
| Rangee 1 a 10 | Affecter chaque avis à la rangée 1 ou 2 | 1 / 2 |
| Nombre de rangees | 1 ou 2 rangees | 1 / 2 |
| Defilement auto | Animation de défilement continu (marquee) | Oui / Non |
| Vitesse desktop | Durée du cycle complet sur desktop | Secondes |
| Vitesse mobile | Durée du cycle complet sur mobile | Secondes |
| Pause au survol | Arreter le défilement au hover | Oui / Non |
| Inverser rangée 2 | Direction opposee pour la rangée 2 | Oui / Non |
| Navigation | Flèches de navigation (mode statique) | Oui / Non |
| Couleurs | Background carte, texte, navigation, anneau | Palettes multiples |
| Taille texte | Taille du texte des avis | Pixels |
| Taille image | Dimension des avatars | Pixels |
| Anneau image | Bordure colorée autour des avatars | Palette + epaisseur |
| Ombre carte | Ombre portee sur les cartes | Oui / Non |
| Border radius carte | Arrondi des cartes | Pixels |
| Padding carte | Espacement interne des cartes | Pixels |
| Gap entre cartes | Espacement entre les cartes | Pixels |
| Gap entre rangees | Espacement entre les 2 rangees | Pixels |
Information
Collapsible Row (Ligne pliable)
Un accordion pliable pour organiser l'information secondaire. Ajoutez plusieurs blocs Collapsible Row pour créer un accordion complet.
| Setting | Description | Options |
|---|---|---|
| Titre | Texte de l'en-tête cliquable | Texte |
| Icône | Icône à gauche du titre | 20+ icônes (camion, cœur, étoile, feuille, etc.) |
| Contenu | Texte riche à l'intérieur | Rich Text |
| Contenu de page | Utiliser le contenu d'une page Shopify | Selecteur de page |
| Ouvert par défaut | Deplier automatiquement au chargement | Oui / Non |
Product Tabs (Onglets produit)
Jusqu'a 3 onglets avec contenu riche, icônes personnalisables et 4 styles d'affichage différents. Permet d'organiser beaucoup d'information dans un espace compact.
| Setting | Description | Options |
|---|---|---|
| Style | Apparence des onglets | Underline / Boxed / Pills / Vertical |
| Animation | Transition entre les onglets | Default / Fade / Slide |
| Onglet 1 a 3 | Titre de chaque onglet | Texte |
| Contenu 1 a 3 | Contenu de chaque onglet | Rich text |
| Utiliser description | Remplir un onglet avec la description produit automatiquement | Oui / Non |
| Icône 1 a 3 | Icône ou image personnalisée par onglet | Icône predefinie / Image upload |
| Layout icônes | Position des icônes dans les labels | Row (à côté du texte) / Column (au-dessus du texte) |
| Alignement desktop | Position des labels sur desktop | Gauche / Centre / Droite |
| Alignement mobile | Position des labels sur mobile | Gauche / Centre / Droite |
| Couleur active | Couleur de l'onglet sélectionné | Couleur |
| Pills pleine largeur | Etirer les pills sur toute la largeur | Oui / Non |
Shipping Info (Informations de livraison)
Affiche une bannière d'expédition et jusqu'à 3 badges de caracteristiques (livraison gratuite, retours, garantie, etc.).
| Setting | Description | Options |
|---|---|---|
| Banniere d'expédition | Activer la bannière en haut | Oui / Non |
| Message bannière | Texte de la bannière | Texte |
| Icône bannière | Icône ou image personnalisée | Icône predefinie / Image upload |
| Badges de feature | Activer les badges en dessous | Oui / Non |
| Badge 1 a 3 | Texte de chaque badge | Texte |
| Icône badge 1 a 3 | Icône de chaque badge | Icône predefinie / Image upload |
| Layout badges | Direction dans les badges | Row (horizontal) / Column (vertical) |
| Layout interne | Direction dans chaque badge | Row (icône à côté) / Column (icône au-dessus) |
| Espacement | Gap entre les éléments | Pixels |
| Border radius | Arrondi des coins | Pixels |
| Palette de couleurs | Schema de couleurs | Liste des palettes |
Size Chart (Guide des tailles)
Un bouton qui ouvre un guide des tailles en popup modal. Supporte le contenu riche et les pages Shopify dédiées.
Pour un guide complet, consultez la page dédiée Guide des tailles.
Info Banner (Banniere d'information)
Un petit badge/bannière avec un message, une icône et des conditions d'affichage intelligentes basees sur le prix ou les tags du produit.
| Setting | Description | Options |
|---|---|---|
| Message | Texte principal de la bannière | Rich text |
| Style | Theme de couleur | Success (vert) / Info (bleu) / Warning (jaune) / Urgency (rouge) / Custom |
| Icône | Icône affichée | 20+ icônes / Image custom / Aucune |
| Condition de prix | N'afficher que si le prix du produit >= X | Oui / Non + montant minimum |
| Message alternatif | Texte si la condition de prix n'est pas remplie | Texte (supporte [remaining] pour le montant manquant) |
| Condition de tag | N'afficher que si le produit a un tag spécifique | Oui / Non + nom du tag |
| Taille police | Echelle du texte | 50% a 150% |
| Max width | Largeur maximale du bloc | Pixels |
| Border radius | Arrondi des coins | Pixels |
| Alignement desktop | Position sur desktop | Gauche / Centre / Droite |
| Alignement mobile | Position sur mobile | Gauche / Centre / Droite |
Media
Media (Galerie produit)
Le bloc Media gère l'affichage de toutes les images, videos et modèles 3D du produit dans la colonne de gauche. Il supporte 3 layouts desktop différents avec de nombreuses options de navigation et de pagination.
| Layout | Description | Idéal pour |
|---|---|---|
| Slider (Classic) | Slider avec navigation, pagination et miniatures optionnelles | La majorité des produits |
| Grid | Grille multi-colonnes, toutes les images visibles | Produits avec peu de medias (2-6) |
| Sidebar | Miniatures à gauche, image principale à droite | Produits avec beaucoup de medias (8+) |
Pour les détails sur les videos et la 3D dans la galerie, consultez la page Video & 3D.
Video Carousel (Carrousel video)
Affiche jusqu'à 8 videos hébergées sur Shopify dans un format carrousel horizontal. Idéal pour les témoignages video TikTok/Reels ou demos produit.
| Setting | Description | Options |
|---|---|---|
| Videos 1 a 8 | Videos hébergées sur Shopify | Video upload |
| Autoplay | Lire automatiquement en muet | Oui / Non |
| Muet | Désactiver le son par défaut | Oui / Non |
| Boucle | Rejouer en boucle | Oui / Non |
| Controles | Afficher les contrôles natifs | Oui / Non |
| Bouton play | Style du bouton play | Circle / Square / Aucun |
| Bordure | Bordure décorative autour des videos | Oui / Non |
| Style bordure | Type de bordure | Solide / Gradient TikTok / Gradient Instagram |
| Couleur bordure | Couleur si solide | Couleur |
| Videos par ligne desktop | Nombre visible sur desktop | 1 / 1.5 / 2 / 3 |
| Videos par ligne mobile | Nombre visible sur mobile | 1 / 1.5 / 2 |
| Gap | Espacement entre les videos | Pixels |
| Border radius | Arrondi des coins des videos | Pixels |
Pour plus de détails, consultez la page Video & 3D.
Divider (Séparateur)
Un séparateur visuel pour organiser les blocs. Supporte 5 styles différents.
| Setting | Description | Options |
|---|---|---|
| Style | Type de ligne | Solid / Dashed / Dotted / Gradient / None (espace seul) |
| Epaisseur | Hauteur de la ligne | 1 a 10px |
| Largeur | Pourcentage de la largeur du conteneur | 10% a 100% |
| Couleur | Couleur de la ligne (modes solid/dashed/dotted) | Couleur |
| Gradient debut / fin | Couleurs si mode Gradient | Couleurs |
| Opacite | Transparence | 0 a 100% |
| Alignement | Position horizontale | Gauche / Centre / Droite |
Image
Affiche une image personnalisée dans la colonne d'informations du produit. Utile pour des badges, certifications ou visuels additionnels.
| Setting | Description | Options |
|---|---|---|
| Image | L'image a afficher | Image upload |
| Largeur | Taille de l'image | Pixels |
| Lien | URL au clic | URL |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Addons
Product Addon (Produit supplémentaire)
Propose jusqu'à 4 produits supplémentaires que le client peut ajouter au panier en même temps que le produit principal. Idéal pour les protections, garanties, accessoires, etc.
| Setting | Description | Options |
|---|---|---|
| Titre | En-tête du bloc (ex : "Completez votre commande") | Texte |
| Produits 1 a 4 | Les produits supplémentaires proposes | Selecteur de produit Shopify |
| Layout | Disposition | Liste / Grille / Slider |
| Colonnes grille | Nombre de colonnes en mode grille | 2 / 3 |
| Mode d'ajout | Comment ajouter au panier | Checkbox / Bouton / Card (clic sur la carte) |
| Style checkbox | Forme de la checkbox | Checkbox carree / Round (cercle) |
| Position du prix | Ou afficher le prix | Dans la checkbox / Dans les infos produit |
| Afficher variantes | Dropdown de variantes pour les produits avec variantes | Oui / Non |
| Lien vers produit | Rendre le titre cliquable vers la page produit | Oui / Non |
| Palette de couleurs | Schema de couleurs du bloc | Liste des palettes |
Free Product (Produit gratuit)
Offre un produit gratuit quand le client atteint un seuil configurable. Trois types de calcul : total du panier, quantité du produit, ou valeur du produit.
| Setting | Description | Options |
|---|---|---|
| Titre | En-tête du bloc | Rich text (supporte gras stylise) |
| Produit gratuit | Le produit a offrir | Selecteur de produit Shopify |
| Type de calcul | Comment mesurer la progression | Total panier / Quantité produit / Valeur produit |
| Seuil montant | Montant à atteindre (si total/valeur) | Nombre en devise |
| Seuil quantité | Quantité à atteindre (si quantité) | Nombre |
| Apercu produit | Montrer l'image et le titre du cadeau | Oui / Non |
| Afficher prix | Montrer le prix barre du cadeau (avec "GRATUIT") | Oui / Non |
| Message de déblocage | Texte quand le seuil est atteint | Texte |
| Couleur barre | Couleur de la barre de progression | Couleur |
| Palette de couleurs | Schema de couleurs du bloc | Liste des palettes |
| Border radius | Arrondi des coins du conteneur | Pixels |
| Marges | Desktop, tablet et mobile | Pixels |
Autres
Text (Texte)
Un bloc de texte libre avec support du format riche. Utile pour ajouter des mentions legales, notes spécifiques ou contenu personnalisé.
| Setting | Description | Options |
|---|---|---|
| Contenu | Texte enrichi | Rich text |
| Taille | Taille du texte | Small / Medium / Large |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Share (Partage social)
Boutons de partage sur les réseaux sociaux : Facebook, Twitter/X, Pinterest, WhatsApp, Email et copie du lien.
| Setting | Description | Options |
|---|---|---|
| Label | Texte au-dessus des boutons | Texte |
| Afficher le bouton Facebook | Oui / Non | |
| Afficher le bouton Twitter/X | Oui / Non | |
| Afficher le bouton Pinterest | Oui / Non | |
| Afficher le bouton WhatsApp | Oui / Non | |
| Afficher le bouton Email | Oui / Non | |
| Copier le lien | Afficher le bouton copier | Oui / Non |
| Style boutons | Apparence des boutons | Configurable |
| Alignement | Position des boutons | Gauche / Centre / Droite |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
Icon List (Liste d'icônes)
Affiche une liste d'éléments avec icône et texte. Utile pour les points forts du produit.
| Setting | Description | Options |
|---|---|---|
| Éléments | Jusqu'a 6 éléments icône + texte | Icône + Texte par élément |
| Layout | Disposition | Vertical / Horizontal / Grille |
| Taille icône | Dimension des icônes | Small / Medium / Large |
Pickup Availability (Disponibilite en magasin)
Affiche la disponibilite du produit dans les points de retrait configurés dans votre admin Shopify. Fonctionnalite native Shopify.
Custom Liquid
Un bloc pour injecter du code Liquid personnalisé directement dans la page produit. Reserve aux utilisateurs avances ou aux developpeurs.
| Setting | Description | Options |
|---|---|---|
| Code Liquid | Votre code Liquid personnalisé | Éditeur de code |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
App Block
Emplacement pour les blocs d'applications tierces Shopify. Chaque application peut fournir son propre bloc que vous inserez ici (avis Judge.me, wishlist, etc.).
Organisation recommandée
Voici un ordre de blocs optimisé pour maximiser la conversion sur une page produit type :
| Position | Bloc | Raison |
|---|---|---|
| 1 | Stars | Preuve sociale immediate en haut |
| 2 | Title | Identification du produit |
| 3 | Price | Information cruciale, toujours visible |
| 4 | Variant Option (x2-3) | Selection des options |
| 5 | Size Chart | Juste après les tailles |
| 6 | Bundle (si applicable) | Augmenter le panier moyen |
| 7 | Quantity Selector | Dernière étape avant l'achat |
| 8 | Buy Buttons | Action principale |
| 9 | Coupon | Incitation supplémentaire |
| 10 | Delivery Estimation | Rassurer sur la livraison |
| 11 | Trust Badges | Confiance après le CTA |
| 12 | Stock | Urgence douce |
| 13 | Info Banner | Message contextuel |
| 14 | Product Tabs ou Collapsible Rows | Information détaillée |
| 15 | Reviews Carousel | Preuve sociale de cloture |
Prochaines étapes
- **Options de variantes** — Configurez les swatches, boutons et dropdowns pour vos options de produit
- **Sticky Add to Cart** — Gardez le bouton d'achat toujours visible au scroll
- **Guide des tailles** — Ajoutez un guide des tailles en popup pour vos produits
- **Vue d'ensemble des bundles** — Découvrez les 6 types de bundles disponibles pour augmenter le panier moyen