Où se trouvent ces paramètres
L'identité visuelle se configure par marché, et dans un marché elle s’applique à toutes les pages en même temps. Ouvrez le builder, choisissez un marché avec le bouton marchés (drapeau du pays) en haut de la barre latérale gauche, puis ouvrez l’onglet Paramètres (icône d’engrenage). Les paramètres sont organisés en sous-onglets dans cet ordre : Branding, Couleurs, Polices, Mise en page, Animations, Automatisations, Champs, Icônes, Restrictions, Paiement, Formulaire de paiement, Page de maintenance, CSS personnalisé et Javascript personnalisé. Les modifications s’appliquent au marché sélectionné et sont publiées lorsque vous cliquez sur Publier. Changer de marché recharge les couleurs, polices et mise en page propres à ce marché.
Palettes de couleurs
L’onglet Couleurs contient jusqu’à 9 palettes de couleurs. Une fois la limite atteinte, la carte d’ajout devient un badge de compteur désactivé comme 9/9. Chaque section, bloc et composant fait référence à une palette par son numéro, donc modifier les couleurs d’une palette met instantanément à jour toutes les sections qui l’utilisent sur toutes les pages. Faites un clic droit sur une carte de palette pour la dupliquer ou la supprimer.
Rôles de couleur dans chaque palette
Chaque palette définit ces rôles, tous sous forme de valeurs hexadécimales :
- Arrière-plan : fond principal de la section.
- Arrière-plan interne : fond teinté pour les cartes et contenus imbriqués dans une section.
- Titres : couleur du texte des titres.
- Texte : couleur du texte des paragraphes et du corps.
- Texte important : texte mis en valeur comme les prix et valeurs mises en avant.
- Liens et Liens survolés : couleur des liens hypertexte à l’état normal et survolé.
- Bordure : bordures des éléments et lignes de séparation.
- Contour : anneaux de focus et contours d’accentuation qui doivent ressortir plus que les bordures.
- Ombre : couleur de l’ombre portée (généralement semi-transparente).
- Bouton principal : fond, texte et bordure, chacun avec sa couleur de survol distincte (6 valeurs au total).
- Bouton secondaire : fond, texte et bordure, chacun avec sa couleur de survol distincte (6 valeurs au total).
- Fond, texte, bordure et étiquette des champs : style des champs de formulaire.
- Fond de champ survolé : fond du champ lorsqu’un client survole le champ.
Conseils pour des palettes efficaces
- Gardez un Arrière-plan neutre et clair sur la plupart des sections et réservez les couleurs vives pour une palette d’accent sur les sections de type héros ou appel à l’action.
- Assurez-vous que le Fond du bouton principal soit bien distinct de l’Arrière-plan de la section pour que le bouton ressorte.
- Définissez l’Arrière-plan interne comme une légère teinte de l’Arrière-plan principal pour que les cartes se distinguent sans contraste trop fort.
- Visez au moins un contraste de 4,5:1 entre le texte et son fond.
Polices
L’onglet Polices associe quatre rôles à une famille de polices chacun :
- Corps : texte des paragraphes et descriptions.
- Titres : tous les titres de la boutique.
- Sous-titres : titres secondaires et sous-titres de section.
- Accent : police décorative pour les prix, badges et mises en valeur.
Polices disponibles : Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface et Acme. Pour les boutiques avec du contenu en arabe, chaque police est automatiquement associée à une variante arabe correspondante, donc vous n’avez pas à choisir une police arabe séparément.
Largeur de page
L’onglet Mise en page propose un curseur Largeur de page qui définit la largeur maximale de la grille de contenu principal, de 900 à 1400 px par pas de 100 (donc 900, 1000, 1100, 1200, 1300 ou 1400 ; la valeur par défaut est 1200). Les sections réglées sur Page sont limitées à cette largeur ; celles en Plein écran occupent toujours toute la largeur de la fenêtre. Sur les écrans plus étroits que la largeur choisie, les sections s’ajustent pour remplir 100 % de l’écran.
Logo
Le logo se définit à deux endroits : le bloc Logo dans la section En-tête et le bloc À propos dans le pied de page. Cliquez sur le bloc, puis utilisez le sélecteur d’image Logo pour choisir une image dans votre médiathèque ou en importer une nouvelle. Après sélection, définissez la Largeur et la Hauteur d’affichage (entre 20 et 300 px) ; l’autre dimension s’ajuste automatiquement pour conserver le ratio. Le logo de l’en-tête est par défaut de 120 px de large sur 50 px de haut, et vous pouvez définir sa position horizontale (gauche, centre ou droite) et ses marges internes. Par défaut, le logo de l’en-tête renvoie à la page d’accueil ; vous pouvez le rendre purement décoratif en désactivant l’option Le logo redirige vers l’accueil dans le groupe En-tête de l’onglet Restrictions.
Favicon
Définissez le favicon dans l’onglet Branding. Cliquez sur Sélectionner un favicon et choisissez une image PNG, JPEG, WEBP ou ICO (taille recommandée : 32x32 ou 16x16 px). Il s’affiche dans les onglets du navigateur et les favoris.
Image de fond du corps
Toujours dans l’onglet Branding, vous pouvez aussi définir une Image du corps derrière toute la boutique (PNG, JPEG ou WEBP). Une fois l’image sélectionnée, deux options apparaissent : Taille (Couverture remplit la fenêtre, quitte à rogner ; Contenir affiche l’image entière) et Répéter (activé, l’image se répète et défile avec la page ; désactivé, une seule image reste fixe pendant le défilement du contenu). Utilisez une image très compressée pour ne pas ralentir le chargement.
CSS et JavaScript personnalisés
Pour des modifications non possibles via les paramètres standards, les onglets CSS personnalisé et Javascript personnalisé acceptent chacun jusqu’à 1 000 caractères qui seront injectés et exécutés sur chaque page de la boutique. Utilisez-les avec parcimonie. Pour un style limité à une seule section, chaque section possède aussi son propre onglet CSS personnalisé dans son panneau de contrôle, ce qui est plus sûr que le champ global.