Paramètres de couleur

Liens en vedette

1. Documentation Shopify sur l’éditeur de thème
2. Documentation de Company XYZ sur les paramètres de couleur

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez ces paramètres pour donner à une zone de thème spécifique son propre traitement de couleur de premier plan dans la documentation Shopify sur l’éditeur de thème. Ils remplacent les couleurs de thème plus larges, ce qui est utile lorsqu’une zone mise en avant, promotionnelle ou riche en contenu a besoin d’un meilleur contraste ou d’un aspect plus adapté.

Pour une référence générale sur le fonctionnement de ces remplacements, consultez la référence des paramètres de couleur.

Remplacements de couleur

Ce groupe contrôle les couleurs utilisées pour les bordures, les icônes, les titres, les sous-titres et le corps du texte. Au lieu de modifier la palette globale de la boutique, vous pouvez ajuster finement la présentation du contenu dans une zone afin qu’elle paraisse plus claire, plus équilibrée ou plus distincte.

Utilisez les remplacements lorsque l’arrière-plan environnant change, lorsqu’une campagne a besoin d’une accentuation de marque, ou lorsque les couleurs par défaut ne vous donnent pas suffisamment de séparation entre les niveaux de contenu. Si une zone se lit déjà bien avec votre palette principale, il est généralement préférable de laisser ces paramètres inchangés.

Ces paramètres remplacent les choix de couleurs de thème plus larges pour la zone où ils sont appliqués. Utilisez-les intentionnellement afin que les zones personnalisées paraissent conçues exprès plutôt que visuellement déconnectées.

Construire une hiérarchie de texte claire

Les couleurs des titres, sous-titres et textes doivent fonctionner ensemble pour guider le regard. Réservez le contraste le plus fort au texte le plus important, utilisez une couleur fiable pour le corps du texte et choisissez un ton d’accompagnement plus doux pour les sous-titres seulement s’il reste facile à lire.

Si toutes les couleurs de texte sont trop similaires, le contenu peut paraître plat. Si elles sont trop différentes, la conception peut sembler dispersée. Visez une hiérarchie simple qui reste cohérente entre des zones de contenu similaires.

Bien utiliser les bordures et les icônes

Les bordures et les icônes fonctionnent généralement mieux comme éléments d’accompagnement. Les bordures peuvent séparer le contenu, encadrer les cartes ou ajouter de la structure, tandis que les couleurs d’icône aident à renforcer de petits repères sans entrer en concurrence avec le message principal.

Si des icônes apparaissent à l’intérieur de formes contourées, assurez-vous que la couleur de l’icône et la couleur de la bordure de l’icône restent coordonnées. Une bordure subtile peut donner un rendu soigné, mais si elle est trop discrète, elle peut disparaître sur l’arrière-plan.

Choisir des combinaisons lisibles

Vérifiez vos choix de couleurs ensemble, et non un paramètre à la fois. Une couleur de titre qui semble forte isolément peut ne pas bien s’associer à un texte de sous-titre plus doux ou à de fines lignes de bordure une fois toute la zone assemblée.

Portez une attention particulière au contraste du texte plus petit, des icônes décoratives et des bordures fines. Ces éléments sont souvent les premiers à devenir difficiles à voir lorsque les couleurs sont trop claires ou trop peu contrastées.

Notes d’utilisation

1. Remplacez avec intention. Utilisez des couleurs personnalisées lorsqu’une zone a réellement besoin d’un traitement de premier plan différent, et pas seulement d’une variation supplémentaire.
2. Protégez la lisibilité. Vérifiez les titres, sous-titres, textes, icônes et bordures par rapport à l’arrière-plan réel utilisé dans cette zone.
3. Passez en revue les deux affichages. Les contrôles sur ordinateur et sur mobile peuvent se comporter différemment, alors confirmez la mise en page, l’alignement, la visibilité et le comportement des médias sur les deux tailles d’écran.
4. Gardez le style de repli à l’esprit. Les valeurs vides, transparentes ou de style par défaut conservent généralement l’apparence globale, tandis que les couleurs explicites, les dégradés ou les remplacements de médias rendent la zone locale plus autonome.
5. Considérez les accents comme secondaires. Utilisez les couleurs des bordures et des icônes pour soutenir la structure et la mise en valeur sans détourner l’attention du contenu.
6. Vérifiez soigneusement les choix de médias. Lorsque les médias sur ordinateur et sur mobile sont configurés séparément, examinez le cadrage, le chargement, le repli et la lisibilité dans les deux versions.