SScale Themedocs

Tout savoir sur la page produit Scale Theme : layout flexible, colonnes configurables, 30+ blocs et barre sticky ATC.

Page Produit

La page produit de Scale Theme est conçue pour maximiser la conversion. Son layout flexible, ses 30+ blocs et sa barre sticky ATC en font l'une des pages produit les plus complètes et personnalisables du marché.

Layout flexible

La page produit propose un système de colonnes entièrement configurable pour s'adapter à tous les types de produits.

2 ou 3 colonnes

LayoutDescriptionIdéal pour
2 colonnesMedia à gauche, informations à droiteProduits classiques, mode, beauté
3 colonnesMedia + infos + sidebar additionnelleProduits techniques, avec beaucoup d'options

Largeur des colonnes

Chaque colonne a une largeur configurable en pourcentage. Vous pouvez ajuster la répartition selon vos besoins :

PresetColonne 1 (Media)Colonne 2 (Infos)Colonne 3 (Extra)
Équilibré50%50%-
Media large60%40%-
3 colonnes40%35%25%
CustomLibreLibreLibre
💡Pour les produits mode ou beauté où les visuels sont essentiels, privilégiez un ratio 60/40 avec la colonne media plus large. Pour les produits techniques avec beaucoup d'options, un 50/50 ou un layout 3 colonnes sera plus adapté.

Colonne sticky

La colonne de droite (informations produit) est sticky par défaut : elle reste visible lorsque l'utilisateur fait défiler la galerie d'images.

SettingDescription
Activer stickyActive/désactive le comportement sticky de la colonne droite
OffsetMarge supérieure quand la colonne est sticky (pour éviter qu'elle touche le header)
ℹ️Le comportement sticky est automatiquement désactivé sur mobile où les colonnes s'empilent verticalement. La galerie apparaît en premier, suivie des informations produit.

30+ blocs disponibles

La page produit dispose de plus de 30 blocs que vous pouvez ajouter, réorganiser et configurer librement. Ils sont organisés par catégorie :

CatégorieBlocsFonction
EssentielsTitle, Price, Description, Variant Option, Quantity Selector, Buy ButtonsLe cœur de la fiche produit
ConversionTimer, Stock, Delivery Estimation, Trust Badges, Social Proof Avatars, CouponAccélérer la décision d'achat
BundlesQuantity, Variant, BOGO, Pack, Mix & MatchAugmenter le panier moyen
AvisStars, Reviews CarouselPreuve sociale
InformationCollapsible Row, Product Tabs, Shipping Info, Size Chart, Info BannerRépondre aux questions
MediaMedia, Video Carousel, DividerEnrichir visuellement
AddonsProduct Addon, Free ProductProduits supplémentaires
AutresText, Share, Icon List, Pickup Availability, Custom Liquid, AppPersonnalisation avancée

Pour un guide détaillé de chaque bloc, consultez la page Blocs produit.

Barre sticky ATC

Une barre d'ajout au panier apparaît automatiquement lorsque l'utilisateur fait défiler la page au-delà du bouton ATC principal. Elle reste fixée en haut ou en bas de l'écran pour faciliter l'achat à tout moment.

SettingOptions
PositionHaut / Bas de l'écran
StyleCompact / Complet
ContenuImage produit, titre, prix, sélecteur de variantes, bouton ATC
💡La barre sticky synchronise automatiquement la variante et la quantité sélectionnées dans le formulaire principal. Si le client change de taille dans le formulaire, la barre sticky reflète ce choix.

Pour une documentation complète, consultez la page Sticky Add to Cart.

Palette de couleurs

Comme toutes les sections du thème, la page produit supporte les palettes de couleurs (color schemes). Vous pouvez appliquer une palette différente à la section produit pour la différencier du reste de la page.

SettingDescription
Palette de couleursSelectionner parmi vos palettes définies dans les réglages du thème
Palette d'arrière-planS'applique à toute la section
ℹ️Les palettes de couleurs sont définies dans Réglages du thème > Couleurs. Vous pouvez créer autant de palettes que nécessaire et les appliquer section par section.

Settings principaux

Layout et affichage

SettingDescriptionOptions
Nombre de colonnesLayout de la page2 ou 3 colonnes
Largeur colonne 1Pourcentage de la première colonne30% a 70%
Largeur colonne 2Pourcentage de la deuxième colonne30% a 70%
Largeur colonne 3Pourcentage si 3 colonnes20% a 40%
Colonne stickyFixer la colonne de droiteOui / Non
Largeur du contenuContainer de la sectionNormal / Large / Plein écran

Galerie media

SettingDescriptionOptions
Position mediaCôté de la galerieGauche / Droite
Style galeriePrésentation des imagesGrille / Slider / Stacked / Thumbnails
Ratio imageProportion des imagesAdapter / Carré / Portrait / Paysage
ZoomActiver le zoom au clic/hoverOui / Non
LightboxOuvrir en plein écranOui / Non

Cas d'utilisation

Produit mode (vêtement)

  • Layout 2 colonnes (60/40)
  • Galerie Thumbnails pour naviguer entre les visuels
  • Blocs : Title, Price, Variant Option (swatches couleur + boutons taille), Size Chart, Buy Buttons, Trust Badges, Reviews Carousel

Produit technique (électronique)

  • Layout 3 colonnes (40/35/25)
  • Galerie Grille pour voir tous les angles
  • Blocs : Title, Price, Description, Variant Option, Product Tabs (specs techniques), Buy Buttons, Shipping Info, Trust Badges

Produit avec bundles

  • Layout 2 colonnes (50/50)
  • Blocs : Title, Price, Bundle Quantity ou Mix & Match, Buy Buttons, Timer, Stock, Trust Badges
⚠️Ne surchargez pas la page produit avec trop de blocs. Priorisez les éléments de conversion essentiels et utilisez les onglets (Product Tabs) ou les lignes pliables (Collapsible Row) pour organiser l'information secondaire.

Prochaines étapes