Guide pas à pas pour configurer Scale Theme apres l'installation. Couleurs, typographie, header, footer et layout.
Configuration initiale
Après avoir installé Scale Theme, quelques réglages essentiels transformeront le thème générique en votre boutique. Ce guide vous accompagne étape par étape dans la configuration des fondations visuelles : couleurs, typographie, layout, header et footer.
Accéder aux réglages du thème
Étape 1 : Ouvrir l'éditeur de thème
- Connectez-vous à votre admin Shopify
- Dans le menu latéral, cliquez sur Boutique en ligne > Themes
- Sur Scale Theme, cliquez sur le bouton Personnaliser
Étape 2 : Ouvrir les paramètres du thème
Une fois dans l'éditeur, les réglages globaux sont accessibles en bas à gauche :
- Cliquez sur l'icône engrenage en bas à gauche de l'éditeur
- Le panneau des Paramètres du thème s'ouvre avec toutes les catégories
1. Configurer les couleurs
Les couleurs sont le premier élément a configurer car elles affectent chaque élément de votre boutique. Scale Theme utilise un système de palettes de couleurs (color schemes) que vous pouvez ensuite attribuer section par section.
Comprendre les palettes
Chaque palette contient 6 couleurs qui travaillent ensemble :
| Couleur | Rôle | Exemples d'utilisation |
|---|---|---|
| Text | Couleur principale du texte | Titres, paragraphes, labels |
| Text secondary | Texte secondaire, plus léger | Sous-titres, descriptions, meta-info |
| Background | Fond de la section | Couleur d'arrière-plan principale |
| Background secondary | Fond alternatif | Survols, cartes, champs de formulaire |
| Accent 1 | Couleur d'accent primaire | Boutons principaux, liens, CTA, badges |
| Accent 2 | Couleur d'accent secondaire | Boutons secondaires, accents décoratifs |
Créer vos palettes
Shopify vous permet de créer plusieurs palettes. Chaque section de votre boutique peut ensuite choisir la palette a utiliser.
Gradient de fond
Chaque palette supporte également un gradient de fond optionnel (champ "Background gradient"). Si défini, il remplace la couleur de fond solide par un dégradé.
2. Configurer la typographie
La typographie définit l'identité visuelle de votre boutique. Scale Theme propose deux niveaux indépendants.
Les deux polices
| Police | Utilisation | Défaut |
|---|---|---|
| Heading | Titres H1-H4, noms de sections | Assistant |
| Body | Texte courant, paragraphes, navigation | Assistant |
Choisir sa combinaison
Le choix des polices dépend de l'identité de votre marque :
| Type de boutique | Heading recommande | Body recommande |
|---|---|---|
| Tech / Minimaliste | Inter, DM Sans | Inter, Assistant |
| Mode / Luxe | Playfair Display, Cormorant | Inter, Assistant |
| Lifestyle / Bien-être | Poppins, Nunito | Nunito, Source Sans Pro |
| Pro / B2B | Montserrat, Work Sans | Source Sans Pro, Inter |
Scale (taille)
Chaque police a un scale de 80% a 130% qui ajuste proportionnellement toutes les tailles :
Pour plus de détails, consultez la page Typographie.
3. Configurer le layout
Les réglages de layout controlent la largeur globale du contenu et les marges.
| Réglage | Défaut | Description |
|---|---|---|
| Largeur de page | 1200px | Largeur max du contenu (1000-2000px) |
| Largeur en % | 85% | Pourcentage de l'écran utilise (70-95%) |
| Padding mobile | 24px | Marge latérale sur mobile (0-60px) |
| Padding desktop | 32px | Marge latérale sur desktop (0-120px) |
Pour plus de détails, consultez la page Layout et espacement.
4. Configurer le header
Le header est le premier élément que vos visiteurs voient. Scale Theme propose 5 layouts radicalement différents pour s'adapter à chaque type de boutique.
Réglages communs à tous les layouts
| Réglage | Description |
|---|---|
| Logo | Image de votre logo |
| Taille du logo | Largeur max du logo (50-200px desktop, 40-130px mobile) |
| Sticky header | Reste fixe en haut au scroll |
| Comportement sticky | Always / Scroll up only |
| Header transparent | Fond transparent sur la homepage |
| Palette de couleurs | Color scheme du header |
| Menu principal | Quel menu Shopify utiliser |
| Type de menu desktop | Dropdown / Mega menu |
| Style mega menu | Liste / Grille |
| Icônes | Recherche, Compte, Panier (on/off, style) |
5. Configurer le footer
Le footer est le dernier élément que vos visiteurs voient avant de quitter votre boutique. Scale Theme propose 5 layouts pour adapter le footer à votre contenu.
Blocs disponibles dans le footer
Quel que soit le layout, vous pouvez ajouter jusqu'à 10 blocs parmi :
| Bloc | Description |
|---|---|
| Brand | Logo + texte de description de la marque |
| Menu | Lien vers un menu Shopify (listes de liens) |
| Newsletter | Formulaire d'inscription email |
| Liens sociaux | Icônes vers vos réseaux sociaux |
| Image | Image libre (certifications, badges, etc.) |
| Trust Badges | Badges de confiance (paiement sécurisé, etc.) |
Réglages supplémentaires importants
Après les 5 étapes principales, pensez a configurer ces éléments :
Favicon
Uploadez votre favicon (icône de l'onglet navigateur) dans les paramètres du thème. Format recommande : PNG 32x32px.
Réseaux sociaux
Renseignez les URLs de vos réseaux sociaux dans les paramètres du thème. Elles seront utilisées par les blocs "Liens sociaux" du footer et le partage social.
Panier (Cart)
Configurez le cart drawer (panier latéral) : activez la barre de progression pour la livraison gratuite, le cadeau seuil, et les upsells.
Ordre recommande de configuration
Pour une mise en place efficace, suivez cet ordre :
- Couleurs - Définissez vos palettes (clair + sombre minimum)
- Typographie - Choisissez vos polices et ajustez les scales
- Layout - Définissez la largeur de page et les paddings
- Header - Choisissez le layout, uploadez le logo, configurez le menu
- Footer - Choisissez le layout, ajoutez vos blocs de contenu
- Favicon et réseaux sociaux
- Cart et réglages de conversion
Prochaines étapes
Maintenant que les fondations visuelles sont configurées :
- Découvrez l'éditeur de thème en détail pour apprendre a manipuler les sections et blocs
- Explorez les réglages globaux pour découvrir tous les paramètres avances
- Commencez a construire vos pages avec les sections disponibles
- Consultez les réglages détaillés de typographie, layout et boutons
- Revoyez les étapes d'installation si vous n'avez pas encore installé le thème
- Utilisez la section Custom Liquid pour ajouter du code personnalisé