SScale Themedocs
EN

Guide pas à pas pour créer une page d'accueil efficace avec Scale Theme. De la première impression au dernier scroll, chaque section a un rôle.

Construire une homepage qui convertit

Votre homepage est la vitrine de votre boutique. C'est la première chose que vos visiteurs voient, et vous avez moins de 3 secondes pour les convaincre de rester. Ce guide vous accompagne étape par étape pour construire une homepage qui transforme les visiteurs en clients.

ℹ️Ce guide suppose que vous avez déjà effectué la configuration initiale (couleurs, typographie, header, footer). Si ce n'est pas fait, commencez par la.

La structure idéale d'une homepage

Une homepage efficace n'est pas un empilement aléatoire de sections. C'est un parcours narratif qui guide le visiteur de la curiosité à l'achat. Voici la structure que nous recommandons :

1. HERO (Banner / Slideshow)         → Premiere impression, proposition de valeur
2. SOCIAL PROOF (Reviews Carousel)   → Creer la confiance immediatement
3. COLLECTIONS (Featured Collection) → Montrer les produits stars
4. STORYTELLING (Image with Text)    → Raconter l'histoire de la marque
5. AVANTAGES (Steps / Grid)          → Expliquer pourquoi vous
6. BEST-SELLERS (Best Sellers)       → Faciliter la decouverte
7. TEMOIGNAGES (Reviews)             → Renforcer la confiance
8. NEWSLETTER (Newsletter / Popup)   → Capturer les emails

Étape 1 : Le Hero -- Première impression

Le hero est LA section la plus importante. C'est ce que le visiteur voit en arrivant, avant même de scroller. Vous avez deux options principales :

Option A : Banner Hero (recommandé pour la plupart)

La section Banner en mode Hero est le choix le plus polyvalent.

Configuration recommandée :

  1. Ouvrez l'éditeur de thème > Homepage
  2. Ajoutez une section Banner
  3. Configurez :
  • Layout : Hero
  • Hauteur : Full screen (pour un impact maximal)
  • Image desktop : Photo lifestyle haute qualité (min 1920x1080)
  • Image mobile : Version portrait de la même scène (750x1000)
  • Overlay : 30-40% (pour que le texte reste lisible)
  • Position du contenu : Center center (ou Bottom left pour un style éditorial)
  • Palette : Palette sombre si l'image est claire, ou palette claire si l'image est sombre
  1. Ajoutez les blocs :
  • Subheading : "NOUVELLE COLLECTION" (ou votre accroche)
  • Heading : Votre message principal en 4-6 mots max
  • Text : Une phrase de description (optionnel)
  • Button : "Découvrir" / "Voir la collection" en Style 1
💡Le titre de votre hero ne doit PAS être le nom de votre boutique. Utilisez-le pour communiquer votre proposition de valeur : "Des soins naturels pour une peau éclatante", "L'essentiel du style décontracté", "La technologie au service de votre confort".

Option B : Slideshow (pour les boutiques avec plusieurs campagnes)

Le Slideshow permet d'afficher plusieurs messages en rotation.

Configuration recommandée :

  1. Ajoutez une section Slideshow
  2. Créez 2-3 slides (pas plus, sinon les visiteurs ne voient jamais les dernières)
  3. Configurez :
  • Hauteur : Large ou Full
  • Autoplay : Oui, 5 secondes
  • Transition : Fade (plus élégant que Slide)
  • Pagination : Barres de progression (créent un sentiment d'urgence)
  1. Pour chaque slide :
  • Une image différente
  • Un message clair
  • Un bouton CTA vers une collection/produit spécifique
⚠️Ne créez pas plus de 3 slides. Les statistiques montrent que les visiteurs voient rarement au-delà de la slide 2. Concentrez-vous sur vos 2-3 messages les plus importants.

Étape 2 : Social Proof instantanée

Immédiatement après le hero, ajoutez une preuve sociale. Le visiteur vient d'être intrigue par votre hero, maintenant il a besoin de confiance.

  1. Ajoutez une section Reviews Carousel
  2. Configurez :
  • Autoplay : 5 secondes
  • Cards visibles : 3
  • Plateforme : Trustpilot ou Google (si vous avez des avis)
  • Style : Minimal
  • Note globale : Activee
  • Palette : Palette secondaire (gris clair) pour se démarquer du hero
  1. Ajoutez 6-8 témoignages avec :
  • Texte court (2-3 phrases max)
  • Mots clés en gras ("qualité exceptionnelle", "livraison rapide")
  • Prenom + avatar
  • 4 ou 5 étoiles
💡Mettez en gras les mots qui comptent dans vos témoignages. Avec le réglage "Bold text style" sur "Accent color", les mots en gras ressortent visuellement et les visiteurs qui scannent la page captent immédiatement les points positifs.

Étape 3 : Montrer les produits

Après l'accroche et la confiance, il est temps de montrer vos produits. C'est ici que la conversion commence vraiment.

  1. Ajoutez une section Featured Collection
  2. Configurez :
  • Collection : Votre collection principale (best-sellers ou nouveautes)
  • Nombre de produits : 4-8
  • Colonnes desktop : 4
  • Style de carte : Le style que vous préférez
  • Palette : Palette claire (fond blanc pour que les produits ressortent)
  1. Ajoutez des blocs de contenu :
  • Heading : "Nos best-sellers" ou "Les plus populaires"
  • Text : Une phrase courte (optionnel)
  • Button : "Voir tout" vers la collection complète

Étape 4 : Raconter votre histoire

Le visiteur a vu vos produits. Maintenant, donnez-lui une raison de vous choisir VOUS plutôt qu'un concurrent. C'est le moment du storytelling.

Image with Text

  1. Ajoutez une section Image with Text
  2. Configurez :
  • Image : Photo lifestyle ou behind-the-scènes
  • Position : Image first (image à gauche)
  • Image width : 50-55%
  • Curved edge : Active, intensité Medium (touche premium)
  • Palette : Palette sombre (pour créer du contraste avec la section précédente)
  1. Ajoutez les blocs :
  • Heading : "Notre histoire" / "Pourquoi [votre marque]"
  • Text : 3-4 phrases sur votre mission/valeurs
  • Button : "En savoir plus" vers votre page A propos
💡Alternez les palettes ! Si votre Featured Collection est sur fond blanc, mettez cette section Image with Text sur fond sombre. Ce contraste guide l'oeil et maintient l'attention du visiteur.

Étape 5 : Vos avantages

Expliquez clairement pourquoi acheter chez vous. Quels sont vos avantages concurrentiels ?

Option A : Section Steps

  1. Ajoutez une section Steps
  2. Configurez :
  • Colonnes desktop : 3 ou 4
  • Numerotation : Non (utilisez des icônes à la place)
  • Style de ligne : Gradient
  • Palette : Palette claire ou accent
  1. Créez 3-4 blocs Step :
  • Icône + titre + texte court
  • Ex : "Livraison gratuite", "Ingredients naturels", "Satisfait ou rembourse", "Support 24/7"

Option B : Grid / Bento

Si vous voulez une mise en page plus visuelle, la section Grid en mode Bento permet de créer des compositions plus créatives avec images et texte.

Étape 6 : Plus de produits

Après les avantages, montrez encore des produits. Le visiteur est maintenant convaincu et a envie d'explorer.

Best-Sellers

  1. Ajoutez une section Best Sellers
  2. Configurez :
  • Source : Best-sellers auto ou collection spécifique
  • Nombre : 6-8 produits
  • Style : Slider (pour économiser l'espace vertical)
  • Palette : Palette secondaire (différente de la Featured Collection)
💡Utilisez deux sections produit différentes (Featured Collection + Best Sellers) avec des collections différentes. Cela donne l'impression d'un catalogue riche et diversifié.

Étape 7 : Témoignages détaillés

Vers la fin de la page, renforcez la confiance avec des témoignages plus détaillés que le carousel du debut.

Reviews Section

  1. Ajoutez une section Reviews
  2. Configurez :
  • Mode : Grid ou Masonry (plus impactant que le carousel)
  • Plateforme : Meme que le carousel
  • Colonnes : 2-3
  • Palette : Palette sombre
  1. Ajoutez 4-6 témoignages avec :
  • Textes plus longs et détaillés
  • Photos produit si possible
  • Badges "Achat vérifié"

Étape 8 : Capturer les emails

Dernière section avant le footer : capturez les emails pour le remarketing.

Newsletter

  1. Ajoutez une section Newsletter
  2. Configurez :
  • Palette : Accent (pour attirer l'attention)
  • Layout : Avec image (plus engageant)
  1. Blocs :
  • Heading : "Rejoignez la communauté" ou "-10% sur votre première commande"
  • Text : "Inscrivez-vous pour recevoir nos offres exclusives"
💡Offrez quelque chose en échange de l'email. Un code de réduction (-10%), un guide gratuit, ou un accès anticipé aux ventes fonctionne beaucoup mieux que "Inscrivez-vous a notre newsletter".

Conseils généraux

Alternez les palettes

L'erreur la plus courante est d'utiliser la même palette partout. Alternez entre vos palettes pour créer du rythme visuel :

Hero       → Palette sombre (impact)
Reviews    → Palette grise (neutre)
Collection → Palette claire (produits ressortent)
Story      → Palette sombre (contraste)
Steps      → Palette claire (lisible)
Best Sell  → Palette grise (variation)
Reviews    → Palette sombre (confiance)
Newsletter → Palette accent (action)

Utilisez les séparateurs SVG

Entre les sections, les séparateurs SVG ajoutent une touche de design professionnel. Une vague entre le hero et les reviews, une courbe entre les produits et le storytelling...

Testez sur mobile

Plus de 70% du trafic e-commerce est mobile. Vérifiez systématiquement chaque section sur mobile dans l'éditeur Shopify (bouton mobile en haut de la preview).

Ne surchargez pas

8-10 sections est un bon maximum. Au-dela, la page devient trop longue et les visiteurs decrochent. Mieux vaut 8 sections excellentes que 15 sections moyennes.

Checklist finale

Avant de publier, vérifiez :

  • [ ] Le hero a un message clair et un CTA visible
  • [ ] Les images sont optimisées (desktop + mobile dédiés)
  • [ ] Les palettes alternent entre les sections
  • [ ] Le contenu est réel (pas de "Lorem ipsum")
  • [ ] La page charge en moins de 3 secondes
  • [ ] Chaque section a un objectif clair
  • [ ] Le CTA principal est visible sans scroller (above the fold)
  • [ ] La page fonctionne aussi bien sur mobile que desktop

Prochaines étapes

PrécédentRéglages globauxSuivantOptimiser la page produit