SScale Themedocs
EN

Guide complet pour configurer la page produit Scale Theme : layout, blocs, bundles, et techniques de conversion.

Optimiser sa page produit pour la conversion

La page produit est la page la plus importante de votre boutique. C'est la où se prend la decision d'achat. Une page produit bien configurée peut doubler votre taux de conversion. Ce guide vous montre comment exploiter chaque option de Scale Theme pour maximiser vos ventes.

La structure optimale

Une page produit qui convertit suit un ordre psychologique précis :

ABOVE THE FOLD (visible sans scroller)
├── Galerie d'images              → Montrer le produit
├── Titre + Prix                  → Identifier le produit
├── Etoiles / Rating              → Creer la confiance
├── Selecteur de variantes        → Choisir
├── Bouton "Ajouter au panier"    → AGIR

BELOW THE FOLD (en scrollant)
├── Trust Badges                  → Rassurer
├── Estimation de livraison       → Reduire l'incertitude
├── Description (onglets)         → Informer
├── Social Proof Avatars          → Confirmer le choix
├── Timer / Stock                 → Creer l'urgence
└── Produits recommandes          → Augmenter le panier

Étape 1 : Le layout

2 colonnes vs 3 colonnes

LayoutQuand l'utiliser
2 colonnes (60/40)Produits visuels : mode, beauté, décoration. La galerie domine.
2 colonnes (50/50)Produits avec bundles/options complexes. Équilibré media/info.
3 colonnes (40/35/25)Produits techniques avec specs détaillées. La 3e colonne = sidebar.

Pour la plupart des boutiques, le 2 colonnes 60/40 est le meilleur choix.

  1. Dans l'éditeur, sélectionnez la page Product
  2. Cliquez sur la section principale du produit
  3. Réglez :
  • Colonnes : 2
  • Largeur colonne 1 : 60%
  • Largeur colonne 2 : 40%
  • Sticky column : Activee (la colonne de droite suit le scroll)
  • Content width : Normal

La galerie

StyleDescriptionRecommande pour
ThumbnailsVignettes en dessous ou à côtéMode, bijoux (navigation précise)
StackedImages empilées verticalementProduits avec peu d'images (2-4)
GridGrille d'imagesProduits avec beaucoup d'images (6+)
SliderSlider horizontalMobile-first, interfaces epurees

Configuration recommandée :

  • Style : Thumbnails (le plus polyvalent)
  • Ratio : Adapt (respecte le ratio original des photos)
  • Zoom : Active (les clients veulent voir les détails)
  • Lightbox : Active (vision plein écran)

Étape 2 : Les blocs essentiels

Les blocs sont dans la colonne de droite (ou la colonne centrale en 3 colonnes). L'ordre dans lequel vous les placez est critique pour la conversion.

Ordre recommande des blocs

Voici l'ordre optimisé que nous recommandons :

1.  Etoiles (Stars)
2.  Titre (Title)
3.  Prix (Price)
4.  Separateur (Divider)
5.  Options de variantes (Variant Option)
6.  Bundle (si applicable)
7.  Selecteur de quantite (Quantity)
8.  Boutons d'achat (Buy Buttons)
9.  Trust Badges
10. Estimation de livraison (Delivery Estimation)
11. Separateur
12. Social Proof Avatars
13. Indicateur de stock (Stock)
14. Separateur
15. Onglets produit (Product Tabs) ou Collapsible Row

Bloc Stars (étoiles)

Placez les étoiles au-dessus du titre. C'est la première chose que le visiteur voit dans la colonne de droite, et ça cree immédiatement de la confiance.

Configuration :

  • Plateforme : Trustpilot ou Google (si vous avez des avis réels)
  • Layout : Compact
  • Note : Votre note réelle
  • Nombre d'avis : Votre nombre réel

Bloc Trust Badges

Placez les trust badges juste en dessous du bouton d'achat. Le visiteur vient de voir le prix et le bouton : rasssurez-le avant qu'il hesite.

Configuration :

  • 3-4 badges : Livraison gratuite, Paiement sécurisé, Satisfait ou rembourse, Support client
  • Style : Avec icônes
  • Layout : Horizontal

Bloc Delivery Estimation

L'estimation de livraison réduit la plus grande source d'incertitude pour l'acheteur en ligne : "Quand vais-je recevoir mon produit ?"

Configuration :

  • Jours de préparation : Votre délai réel
  • Jours de livraison : Le délai de votre transporteur
  • Afficher la date : Oui (ex: "Commandez avant 14h, livre entre le mar. 25 et jeu. 27 fevrier")

Bloc Social Proof Avatars

Ce bloc affiche des avatars empilés avec un message type "Marie et 1,500+ autres adorent ce produit". C'est du social proof puissant qui fonctionne.

Configuration :

  • Nombre d'avatars : 3-4
  • Avatars : Uploadez de vraies photos (ou des illustrations diversifiées)
  • Texte : "Marie et 1,500+ clients adorent ce produit"
  • Badge vérifié : Oui
  • Style : Card

Étape 3 : Créer l'urgence (optionnel)

L'urgence pousse à l'action immediate. Utilisez-la avec parcimonie et honnetete.

Indicateur de stock

Le bloc Stock montre combien d'unites restent en stock. Quand le stock est bas, ça crée un sentiment d'urgence naturel.

Configuration :

  • Seuil d'affichage : Montrer quand < 10 unites
  • Style : Barre visuelle + texte
  • Texte : "Plus que {count} en stock !"

Countdown Timer

Le bloc Timer ajoute un compte à rebours sur la page produit. Idéal pour les ventes flash et les promotions limitées.

Configuration :

  • Date cible : La fin de votre promo
  • Style : Cards ou Minimal (selon l'espace disponible)
  • Afficher les secondes : Oui (renforce l'urgence)
⚠️N'utilisez PAS de faux timer evergreen sur la page produit si votre client peut revenir et voir le timer recommencer. Reservez l'evergreen aux popups et aux sections homepage. Sur la page produit, utilisez une vraie date de fin de promo.

Étape 4 : Les bundles

Les bundles sont l'arme secrete pour augmenter le panier moyen. Si votre produit s'y prête, ajoutez un bloc bundle.

Quel bundle choisir ?

Type de produitBundle recommandeExemple
Consommable (creme, supplement)Quantity"Achetez 2, -10% / 3, -15%"
Avec tailles (S/M/L/XL)VariantChaque taille = un tier
Gamme complémentairePack"La routine complète"
Gamme largeMix & Match"Composez votre box"
Lancement / PromoBOGO"Achetez 1, recevez 1 gratuit"

Configuration rapide d'un bundle Quantity :

  1. Cliquez sur Ajouter un bloc dans la section produit
  2. Sélectionnez Bundle Quantity
  3. Configurez les tiers :
  • Tier 1 : 1 unite, prix normal
  • Tier 2 : 2 unites, -10% (badge "Populaire")
  • Tier 3 : 3 unites, -15% (badge "Meilleur rapport")
  1. Placez le bloc entre les variantes et le bouton d'achat
ℹ️N'oubliez pas la réduction Shopify ! Les bundles Scale Theme affichent les prix réduits dans l'interface, mais la réduction doit aussi être configurée dans Shopify Admin > Réductions pour qu'elle s'applique au checkout. Consultez le guide des bundles pour les détails.

Étape 5 : Les informations secondaires

En dessous des éléments de conversion, placez les informations détaillées que les clients consultent avant d'acheter.

Product Tabs (onglets)

Les onglets organisent les informations sans encombrer la page.

Configuration recommandée :

  • Onglet 1 : Description (rempli automatiquement depuis le produit)
  • Onglet 2 : Ingredients / Specifications
  • Onglet 3 : Livraison & Retours
  • Onglet 4 : Guide des tailles (si applicable)

Collapsible Rows (accordeons)

Alternative aux onglets, les accordeons prennent moins de place et fonctionnent bien quand vous avez beaucoup de questions/reponses.

Étape 6 : Le Sticky Add to Cart

La barre sticky ATC apparaît quand le visiteur scrolle au-delà du bouton d'achat principal. Elle reste fixee en haut ou en bas de l'écran.

Configuration :

  • Position : Bottom (plus accessible sur mobile)
  • Style : Compact
  • Contenu : Image + Titre + Prix + Bouton
💡La barre sticky ATC est synchronisee avec le formulaire principal. Si le client change la variante ou la quantité dans le formulaire, la barre sticky reflette le changement.

Configurations par type de boutique

Mode / Fashion

Blocs recommandes :
1. Stars (Trustpilot, compact)
2. Title
3. Price
4. Variant Option (color swatches + size buttons)
5. Size Chart
6. Buy Buttons
7. Trust Badges (livraison, retours)
8. Delivery Estimation
9. Divider
10. Social Proof Avatars
11. Product Tabs (Description | Entretien | Guide des tailles)
  • Layout : 2 colonnes 60/40
  • Galerie : Thumbnails avec zoom
  • Sticky ATC : Active, bottom

Cosmetiques / Beaute

Blocs recommandes :
1. Stars (Trustpilot, inline)
2. Title
3. Price
4. Bundle Quantity (1, 2, 3 unites)
5. Variant Option (si variantes)
6. Buy Buttons
7. Trust Badges (ingredients naturels, non teste)
8. Delivery Estimation
9. Social Proof Avatars
10. Divider
11. Product Tabs (Description | Ingredients | Utilisation | Avis)
12. Collapsible Row (FAQ)
  • Layout : 2 colonnes 50/50
  • Galerie : Grid (montrer texture, avant/après)

Électronique / Tech

Blocs recommandes :
1. Stars (Google)
2. Title
3. Price
4. Variant Option (capacite, couleur)
5. Buy Buttons
6. Trust Badges (garantie 2 ans, SAV)
7. Delivery Estimation
8. Divider
9. Product Tabs (Description | Specs | Contenu | FAQ)
  • Layout : 3 colonnes (sidebar = specs rapides)
  • Galerie : Grid (montrer tous les angles)

Alimentaire / Supplements

Blocs recommandes :
1. Stars
2. Title
3. Price
4. Bundle Quantity (cure 1 mois, 3 mois, 6 mois)
5. Buy Buttons
6. Trust Badges (bio, certification)
7. Delivery Estimation
8. Social Proof Avatars ("Marie et 3000+ clients")
9. Divider
10. Product Tabs (Description | Ingredients | Valeurs nutritionnelles | FAQ)
  • Layout : 2 colonnes 50/50
  • Bundles : Quantity avec badges "Cure 3 mois - le plus populaire"

Checklist page produit

  • [ ] Le titre et le prix sont visibles above the fold
  • [ ] Le bouton "Ajouter au panier" est visible sans scroller (desktop)
  • [ ] Les trust badges sont places juste sous le bouton d'achat
  • [ ] L'estimation de livraison est renseignee avec des délais réels
  • [ ] Les images sont de haute qualité (min 1000x1000)
  • [ ] Les images mobiles sont testees (pas de recadrage problematique)
  • [ ] Les variantes sont faciles a sélectionner (swatches pour les couleurs)
  • [ ] La description est organisée en onglets ou accordeons
  • [ ] Le sticky ATC est active
  • [ ] Le panier s'ouvre automatiquement après ajout

Prochaines étapes

PrécédentConstruire sa homepageSuivantCréer une vente flash