Définir vos couleurs, vos polices et votre mise en page
Utilisez l’onglet Design du site pour définir une seule fois les couleurs, les polices, la taille du texte et l’arrondi des angles de votre boutique, pour toutes les pages à la fois.
Le design du site regroupe les réglages qui donnent à toute votre boutique l’allure d’une seule marque : ses couleurs, ses polices, la taille de son texte et l’arrondi de ses angles. Vous définissez chacun une seule fois, et toutes les pages suivent. Chaque bloc peut tout de même remplacer ces réglages si vous le souhaitez.
Ouvrir le design du site
- Ouvrez l’éditeur. Voir L’éditeur en un coup d’œil.
- Dans le panneau de réglages à droite, cliquez sur l’onglet Design du site.
- Cliquez sur un titre pour l’ouvrir : Identité, Couleurs, Typographie ou Mise en page.
Les modifications s’affichent immédiatement sur la page et sont enregistrées automatiquement. Votre boutique en ligne change lorsque vous publiez.
Couleurs
Ouvrez Couleurs pour voir les sept couleurs à partir desquelles chaque page est construite.
- Accent : la couleur principale de votre boutique. Les boutons et les liens l’utilisent.
- Texte sur l’accent : la couleur des mots placés sur l’accent, comme le texte d’un bouton.
- Fond de page : la couleur située derrière vos pages.
- Surface : la couleur des cartes et des panneaux, comme les cartes produit et les cadres de formulaire.
- Texte : la couleur des titres et des autres textes principaux.
- Texte secondaire : la couleur plus discrète utilisée pour les paragraphes, les descriptions et les mentions en petits caractères.
- Bordures : la couleur des traits fins et des contours.
Choisir une couleur
- Cliquez sur une case de couleur.
- Dans le sélecteur qui s’ouvre, vous pouvez procéder de l’une des manières suivantes :
- Cliquez ou faites glisser dans le grand carré pour régler la luminosité et l’intensité de la couleur, puis faites glisser la bande située en dessous pour changer la couleur elle-même.
- Saisissez ou collez un code hexadécimal, par exemple
#2B2622, dans la zone prévue. - Cliquez sur un échantillon sous Couleurs du thème pour réutiliser une couleur que vous avez déjà, ou sous Récentes pour une couleur choisie dernièrement.
- Cliquez n’importe où en dehors du sélecteur, ou appuyez sur Échap, pour le fermer.
Vérifier que votre texte est lisible
Sous les sept couleurs, Payly vérifie que chaque couleur de texte se lit facilement sur la couleur qui se trouve derrière. Si tout est en ordre, vous voyez Toutes les paires de couleurs se lisent facilement. Si une paire est trop pâle, la liste la nomme, indique son rapport de contraste et celui qui serait nécessaire, et propose un bouton Corriger qui ajuste la couleur du texte à votre place.
Payly ne vous empêche pas de choisir une paire à faible contraste, mais un texte gris clair sur fond clair est difficile à lire, surtout sur un téléphone en plein soleil.
Typographie
Ouvrez Typographie pour choisir vos polices et la taille de votre texte.
- Police du corps de texte : la police des paragraphes, des menus et des boutons.
- Taille de police de base : la taille du texte normal.
- Interligne du corps de texte : l’espace entre les lignes de texte. Plus le nombre est grand, plus il y a d’espace.
- Police des titres : la police des titres. Choisissez Utiliser la police du site pour appliquer aussi la police du corps de texte aux titres.
- Taille des titres : agrandit ou réduit tous les titres, en pourcentage.
- Graisse des titres : l’épaisseur des caractères des titres.
- Interlettrage des titres : resserre ou espace davantage les lettres des titres.
Choisir une police
- Cliquez sur la zone Police du corps de texte ou Police des titres.
- Faites défiler la liste, qui affiche chaque nom dans sa propre police. Le groupe Recommandées en haut contient des polices qui conviennent à la plupart des boutiques.
- Pour trouver une police par son nom, saisissez-le dans Rechercher une police….
- Cliquez sur une police pour l’utiliser.
La liste couvre toute la bibliothèque Google Fonts. Les polices que vous utilisez sont incluses dans votre boutique lorsque vous publiez. Si une police est absente de la liste, saisissez son nom exact dans Google Fonts dans la zone de recherche et choisissez-la sous Utiliser quand même.
Mise en page
Ouvrez Mise en page pour accéder à deux réglages :
- Arrondi des angles définit le degré d’arrondi des angles des boutons, des cartes et des images. Faites glisser jusqu’à 0 pour des angles droits, et vers la droite pour des angles adoucis. Les blocs dont l’arrondi des angles est réglé sur Auto suivent ce réglage.
- Sens du texte est réglé sur De gauche à droite pour la plupart des langues. De droite à gauche inverse toute la mise en page pour l’arabe, l’hébreu, le persan et l’ourdou.
Identité
Ouvrez Identité pour définir votre Icône du navigateur, la petite image affichée sur l’onglet d’un navigateur. Utilisez un symbole simple plutôt que votre logo complet, car elle s’affiche en 16 pixels environ. Cliquez sur Importer une image ou Parcourir les imports, comme décrit dans Ajouter des images et utiliser la médiathèque. Si vous la laissez vide, votre logo est utilisé.
Votre logo ne se trouve pas ici. Il se règle dans votre en-tête, là où il apparaît. Voir Personnaliser votre en-tête et votre pied de page.
Modifier un seul bloc
Chaque bloc de texte, titre et bouton peut remplacer la police, la taille et les couleurs du site. Sélectionnez le bloc et ouvrez son groupe Typographie ou Apparence. Voir Modifier le texte, les titres et les boutons.
Astuce : si vous souhaitez un look entièrement différent, vous pouvez repartir de l’un des designs prêts à l’emploi. Voir Passer à un autre design de site.