Où se trouvent ces paramètres
Ces paramètres se configurent par marché, et au sein d'un marché ils affectent toutes les pages à la fois. Ouvrez le constructeur, choisissez un marché à l'aide de l'onglet des marchés (icône du drapeau du pays) dans la barre latérale gauche, puis cliquez sur l'onglet Paramètres (icône d'engrenage). Les modifications s'appliquent au marché que vous avez sélectionné et sont mises en ligne lorsque vous cliquez sur Publier. Pour la liste complète de chaque paramètre, consultez la référence des paramètres du constructeur.
Jeux de couleurs
Storeep utilise une palette pouvant compter jusqu'à 9 jeux de couleurs. Chaque section, bloc et composant de votre boutique fait référence à l'un de ces jeux par son numéro (1 à 9). Modifier les couleurs d'un jeu met instantanément à jour chaque section qui l'utilise, sur toutes les pages.
Rôles de couleur dans chaque jeu
Chaque jeu définit les rôles de couleur suivants, tous indiqués sous forme de valeurs hexadécimales :
- Arrière-plan : la couleur principale de l'arrière-plan de la section.
- Arrière-plan intérieur : un arrière-plan légèrement teinté utilisé pour les cartes et les zones de contenu imbriquées au sein de la section.
- Couleur des titres : la couleur du texte des titres.
- Couleur du texte courant : la couleur du texte des paragraphes.
- Couleur du texte mis en évidence : une couleur de texte accentuée utilisée pour les prix, les badges d'économies et les valeurs des comptes à rebours. Il s'agit généralement de la teinte la plus sombre ou la plus marquée de la palette.
- Couleur des liens : la couleur par défaut des hyperliens.
- Couleur des liens au survol : la couleur des hyperliens lorsqu'un client passe la souris dessus.
- Couleur des bordures : la couleur des bordures d'éléments et des lignes de séparation.
- Couleur de contour : la couleur des anneaux de focus, des surbrillances de sélection au clavier et des contours d'accentuation qui doivent ressortir davantage que les bordures ordinaires.
- Couleur des ombres : la couleur des ombres portées (généralement avec une certaine transparence).
- Arrière-plan du bouton principal : la couleur de remplissage des boutons principaux.
- Texte du bouton principal : la couleur du libellé sur les boutons principaux.
- Bordure du bouton principal : la couleur de la bordure des boutons principaux.
- Arrière-plan du bouton principal au survol : la couleur de remplissage du bouton principal lors du survol.
- Texte du bouton principal au survol : la couleur du libellé du bouton principal lors du survol.
- Bordure du bouton principal au survol : la couleur de la bordure du bouton principal lors du survol.
- Arrière-plan du bouton secondaire : la couleur de remplissage des boutons secondaires.
- Texte du bouton secondaire : la couleur du libellé sur les boutons secondaires.
- Bordure du bouton secondaire : la couleur de la bordure des boutons secondaires.
- Arrière-plan du bouton secondaire au survol : la couleur de remplissage du bouton secondaire lors du survol.
- Texte du bouton secondaire au survol : la couleur du libellé du bouton secondaire lors du survol.
- Bordure du bouton secondaire au survol : la couleur de la bordure du bouton secondaire lors du survol.
- Arrière-plan des champs : la couleur d'arrière-plan des champs de saisie des formulaires.
- Couleur du texte des champs : la couleur du texte à l'intérieur des champs de saisie des formulaires.
- Couleur des bordures des champs : la couleur de la bordure des champs de saisie des formulaires.
- Couleur des libellés des champs : la couleur du texte des libellés au-dessus des champs de formulaire.
- Arrière-plan des champs au focus : la couleur d'arrière-plan du champ lorsqu'un client le sélectionne ou le survole.
Conseils pour des jeux de couleurs réussis
- Utilisez une couleur claire et neutre pour l'Arrière-plan de la plupart des sections et réservez les couleurs vives à un seul jeu d'accentuation employé sur les sections héros et d'appel à l'action.
- Faites en sorte que votre Arrière-plan du bouton principal se distingue visuellement de l'Arrière-plan de la section, car le bouton doit clairement ressortir.
- Gardez l'Arrière-plan intérieur comme une très légère teinte de l'Arrière-plan principal afin que les arrière-plans des cartes soient distinguables sans être agressifs.
- Visez un contraste d'au moins 4,5:1 entre la Couleur du texte courant et l'Arrière-plan, ainsi qu'entre le Texte du bouton principal et l'Arrière-plan du bouton principal.
Typographie
Quatre rôles de police contrôlent la typographie sur chaque page. Chaque rôle est associé à une famille de polices issue de la bibliothèque disponible.
- Corps : la police principale du texte des paragraphes et des descriptions.
- Titre : la police de tous les titres de l'ensemble de la boutique.
- Sous-titre : la police des titres secondaires et des sous-titres de section, faisant le lien entre les styles de titre et de corps.
- Accent : une police stylistique pour les prix, les badges et les mises en valeur décoratives.
Les polices disponibles incluent : 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 au contenu en arabe, les polices sont automatiquement associées à des équivalents arabes correspondants : par exemple, Inter est associée à Cairo, et Poppins à Tajawal. Vous n'avez pas besoin de sélectionner la police arabe séparément.
Largeur de la page
Le paramètre global Largeur de la page contrôle la largeur maximale de la grille de contenu principale, en pixels. Les sections réglées sur la largeur Page sont limitées à cette valeur ; les sections réglées sur Pleine largeur s'étendent toujours sur toute la zone d'affichage, quoi qu'il arrive. Valeurs disponibles : 900, 1000, 1100, 1200 (par défaut), 1300 et 1400 px. Sur les zones d'affichage plus étroites que la largeur sélectionnée, les sections se réduisent automatiquement pour remplir 100 % de l'écran.
Logo
Le logo se définit à l'intérieur du bloc logo de la section En-tête et à l'intérieur du bloc À propos dans le pied de page. Cliquez sur le bloc logo dans le panneau de contrôle, puis cliquez sur + Ajouter un média ou + Ajouter une image pour téléverser votre logo depuis votre appareil ou le choisir dans votre bibliothèque de médias. Après le téléversement, définissez la largeur d'affichage (20 à 300 px) et la hauteur (20 à 300 px) ; l'autre dimension s'ajuste automatiquement pour conserver le rapport hauteur/largeur.
Favicon
Le favicon se définit dans Paramètres → Image de marque dans le constructeur. Cliquez sur le champ du favicon et téléversez une image (recommandé : une image carrée). Le favicon apparaît dans les onglets et les favoris du navigateur.
Image d'arrière-plan du corps
Toujours dans Paramètres → Image de marque : vous pouvez éventuellement définir une image d'arrière-plan pour l'ensemble de la page. Configurez sa mise à l'échelle (Couvrir remplit toute la zone d'affichage, Contenir ajuste l'image à l'intérieur) et indiquez si elle se répète (en mosaïque) ou reste une image unique derrière le contenu qui défile.
CSS et JavaScript personnalisés globaux
Pour les personnalisations avancées que les paramètres standards ne peuvent pas réaliser, Paramètres propose un champ CSS global (jusqu'à 1 000 caractères) et un champ JS global (jusqu'à 1 000 caractères). Le CSS saisi ici est injecté dans chaque page de la boutique ; le JS saisi ici s'exécute sur chaque page. Utilisez-les avec parcimonie, et privilégiez la section Code personnalisé pour les personnalisations propres à une page.