Réussi
Paramètres de couleur
Définissez la palette de couleurs globale du thème pour les arrière-plans, le texte, les boutons, les bannières, les cartes et les échantillons.
La couleur contrôle la palette partagée utilisée dans l’ensemble du thème. Comme ces choix peuvent affecter plusieurs modèles, zones de contenu, cartes, formulaires et états interactifs à la fois, il est utile de les définir comme un système coordonné plutôt que d’ajuster les couleurs zone par zone. Pour un contexte de configuration plus large, consultez documentation Shopify sur la personnalisation des thèmes
Commencez par choisir vos surfaces principales et les couleurs du texte, puis construisez autour d’elles les styles des boutons, des bannières et des cartes. Pour des conseils sur l’accessibilité, consultez documentation Company XYZ sur les conseils d’accessibilité des paramètres de couleur.
Arrière-plans
Section intitulée « Arrière-plans »Les couleurs d’arrière-plan établissent les surfaces de base du thème. L’arrière-plan du corps définit l’ambiance générale de la page, tandis que l’arrière-plan alternatif aide à séparer les zones de contenu sans avoir besoin de bordures plus marquées ni d’effets visuels plus forts.
Les dégradés peuvent apporter de la profondeur, mais ils ne doivent pas rendre le texte plus difficile à lire. Vérifiez les titres, le texte des paragraphes et les cartes là où le dégradé peut apparaître afin que toute la plage de couleurs reste exploitable.
Les changements d’arrière-plan sont globaux. Une couleur qui paraît raffinée dans une zone peut réduire le contraste du texte dans d’autres modèles ou sections de contenu.
Les paramètres de texte façonnent l’expérience de lecture principale dans tout le thème. Utilisez des couleurs de texte pour les titres et le corps de texte qui se ressemblent tout en restant clairement distinctes, puis choisissez des couleurs de lien faciles à identifier comme interactives.
Les couleurs au survol doivent créer une réponse claire sans faire disparaître les liens dans le texte environnant. Si les états par défaut et au survol sont trop similaires, les clients peuvent ne pas remarquer qu’un lien peut être cliqué.
Boutons principaux
Section intitulée « Boutons principaux »Les couleurs des boutons principaux doivent mettre en avant l’action principale dans l’interface. Ce sont généralement les styles d’action les plus marqués du thème, donc l’arrière-plan, la bordure et le texte doivent fonctionner ensemble pour rester visibles sur chaque surface où ils apparaissent.
Les styles au survol doivent donner une impression d’état interactif clair, et non d’un style de bouton complètement différent. De petits changements intentionnels paraissent généralement plus soignés que des modifications spectaculaires.
Boutons secondaires
Section intitulée « Boutons secondaires »Les boutons secondaires accompagnent les actions moins prioritaires et doivent paraître clairement moins mis en avant que les boutons principaux. Ils doivent néanmoins rester intentionnels et utilisables, surtout lorsqu’ils apparaissent à côté d’appels à l’action plus forts.
Un bon style secondaire apporte de la hiérarchie sans donner l’impression d’être désactivé. Vérifiez les endroits où les deux types de boutons apparaissent ensemble afin de vous assurer que l’action principale reste évidente.
Bannières
Section intitulée « Bannières »Les paramètres de bannière contrôlent les grandes zones de contenu promotionnel et illustré, y compris leur arrière-plan, leur bordure, leur titre, leur icône, leur texte et leur traitement de superposition. Ces choix ont un fort impact visuel, car les bannières associent souvent du texte à des médias et apparaissent dans des emplacements visibles.
Le texte de la bannière peut reprendre la couleur du texte de la bannière lorsque des couleurs de texte plus spécifiques ne sont pas définies, il vaut donc la peine de vérifier les bannières avec différentes combinaisons de contenu. La couleur, le dégradé et l’opacité de la superposition aident à maintenir la lisibilité sur les images tout en laissant apparaître les médias.
Définissez les superpositions de bannière en fonction des images que vous utilisez réellement. Une superposition qui fonctionne bien sur une image sombre peut être trop faible sur une image lumineuse ou chargée.
Les paramètres de carte définissent des surfaces de contenu plus petites utilisées dans les grilles et les zones de contenu d’accompagnement. Servez-vous-en pour séparer le contenu groupé de l’arrière-plan de la page tout en gardant une palette globale cohérente.
Si les cartes apparaissent sur des arrière-plans alternatifs, assurez-vous que l’arrière-plan et la bordure de la carte créent toujours une séparation visuelle suffisante. Les couleurs du titre et du texte des cartes doivent rester faciles à parcourir dans les mises en page denses.
Les couleurs des icônes influencent les petits repères d’interface dans la navigation, les actions et l’interface utilisateur d’accompagnement. Les états au survol et inactifs aident à communiquer l’interaction et la hiérarchie sans s’appuyer uniquement sur les libellés textuels.
Conservez des icônes inactives discrètes tout en restant repérables. Si elles sont trop faibles, des commandes utiles peuvent sembler indisponibles ou passer complètement inaperçues.
Les couleurs des champs façonnent l’apparence des formulaires dans les zones de recherche et les formulaires destinés aux clients. Le texte de remplacement doit être plus doux que le texte saisi, mais rester suffisamment lisible pour guider les personnes avant qu’elles ne commencent à saisir du texte.
Les arrière-plans et bordures des champs doivent rendre les champs faciles à repérer sur la page. S’ils se fondent dans la mise en page environnante, les formulaires peuvent sembler plus difficiles à utiliser.
Ces contrôles couvrent des détails d’interface partagés qui apparaissent à de nombreux endroits. La couleur de bordure aide à définir la structure, la couleur de superposition de page affecte les états de superposition pleine page comme les vues de menu actif, de recherche ou de mini-panier, et la couleur du prix soldé met en valeur les prix réduits.
Faites preuve de retenue ici. Les bordures doivent organiser le contenu sans ajouter de bruit visuel, les superpositions doivent assombrir la page sans nuire à la lisibilité du premier plan, et les prix soldés doivent ressortir sans entrer en conflit avec vos couleurs d’action.
Échantillons
Section intitulée « Échantillons »Les échantillons personnalisés vous permettent d’associer des noms d’options à des valeurs de couleur spécifiques afin que les échantillons de variantes apparaissent de manière plus précise et plus cohérente. C’est particulièrement utile lorsque les noms d’options standard ne produisent pas la couleur d’échantillon souhaitée.
Saisissez les définitions d’échantillon dans le format attendu, séparé par des virgules, afin que les valeurs d’option puissent être reconnues correctement. Pour des conseils de formatage et des détails liés aux variantes, consultez documentation Company XYZ sur les variantes de produits.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Définissez d’abord les surfaces. Choisissez les arrière-plans du corps et les arrière-plans alternatifs avant d’ajuster le texte, les boutons et les cartes afin que les décisions de contraste restent cohérentes.
- Vérifiez le contraste partout. Examinez le texte, les liens, les boutons et les champs de formulaire sur chaque arrière-plan principal pour repérer rapidement les problèmes de lisibilité.
- Gardez la hiérarchie des boutons claire. Faites en sorte que les boutons principaux soient nettement plus marqués que les boutons secondaires afin que l’action principale soit toujours facile à identifier.
- Testez les bannières avec des médias réels. Revérifiez le texte de la bannière et l’opacité de la superposition sur les images réelles que vous prévoyez d’utiliser, et non sur des visuels de substitution.
- Examinez les effets globaux. Après avoir modifié des couleurs partagées comme les bordures, les superpositions ou les icônes, parcourez les modèles clés pour vérifier que la mise à jour fonctionne toujours dans tout le thème.
- Vérifiez les deux tailles d’affichage. Les contrôles de couleur sur ordinateur et sur mobile peuvent affecter différemment la mise en page, l’alignement, la visibilité et le traitement des médias ; vérifiez donc les deux tailles après vos modifications.
- Utilisez les overrides avec discernement. Les valeurs vides ou de style par défaut conservent généralement le style de repli, tandis que des couleurs, dégradés ou choix de médias explicites rendent la section plus autonome.
- Revérifiez les zones riches en médias. Lorsque les médias sur ordinateur et sur mobile sont configurés séparément, confirmez le recadrage, le chargement, l’apparence de repli et la lisibilité du texte pour chaque version.