Palettes de couleurs Dawn

Vous avez la possibilité de sélectionner un schéma de couleurs pour l'appliquer à différentes sections du thème (p. ex. au texte enrichi, à la bannière d'image ou encore à la liste de collections) à partir des couleurs que vous avez définies dans les paramètres de votre thème. Un schéma de couleurs sera appliqué à votre thème par défaut, mais il pourra être modifié à tout moment dans l’éditeur de thème. L’ajout des couleurs de votre marque garantit une utilisation cohérente de votre palette de couleurs partout sur votre boutique en ligne.

Gérer votre schéma de couleurs

Le schéma de couleurs de votre boutique se définit dans les paramètres de votre thème.

  1. Cliquez sur Paramètres du thème au bas de votre barre latérale. 3. Cliquez sur Couleurs. 5. Pour changer une couleur de votre thème, cliquez sur celle-ci et utilisez le sélecteur de couleur, ou saisissez la valeur de la nouvelle couleur dans le champ de texte. 6. Cliquez sur Enregistrer.

Pour les couleurs unies, utilisez le sélecteur de couleur pour sélectionner une nouvelle couleur, ou saisissez la valeur de la couleur dans le champ de texte. Le champ accepte les noms de couleur (par exemple, red, black, blue), RVB ou les codes colorimétriques hexadécimaux.

Pour les dégradés de couleur, cliquez sur la zone des couleurs, puis tapez ou collez le code CSS de votre dégradé dans le champ (par exemple, linear-gradient(red, green), radial-gradient(red, green) ou conic-gradient(red, green)). L’éditeur de thème affichera un message d’erreur si le code CSS de votre dégradé contient des caractères spéciaux, des images ou des URL. Si votre code CSS est valide, le dégradé sélectionné s'affichera à l’endroit qui convient dans l’aperçu de l’éditeur de thème.

Champ du code CSS de dégradé dans l’éditeur de thème

Paramètres de couleur

Vous pouvez régler l'arrière-plan et la marge intérieure des images dans votre éditeur de thème. Utilisez le menu déroulant pour choisir entre Accent 1, Dégradé accent 1, Accent 2, Dégradé accent 2, Arrière-plan 1, Dégradé arrière-plan 1, Arrière-plan 2, Dégradé arrière-plan 2 ou Inverser. Vous pouvez obtenir un aperçu des schémas de couleurs sélectionnés dans le panneau d’aperçu de votre éditeur de thème.

Paramètre Description
Texte Il est possible d'appliquer une couleur à une section ou à un bloc de texte.
Accentuation 1 La couleur peut être appliquée aux boutons d’impact et aux arrière-plans de certaines sections.
Dégradé accent 1 Saisissez le code CSS du dégradé pour générer votre dégradé.
Accentuation 2 La couleur peut être appliquée aux boutons d’impact et aux arrière-plans de certaines sections.
Dégradé Accent 2 Saisissez le code CSS du dégradé pour générer votre dégradé.
Arrière-plan 1 La couleur peut être appliquée aux boutons d’impact et aux arrière-plans de certaines sections.
Dégradé arrière-plan 1 Saisissez le code CSS du dégradé pour générer votre dégradé.
Arrière-plan 2 La couleur peut être appliquée aux boutons d’impact et aux arrière-plans de certaines sections.
Dégradé Arrière-plan 2 Saisissez le code CSS du dégradé pour générer votre dégradé.
Inverser La couleur peut être appliquée aux boutons d’impact et aux arrière-plans de certaines sections. Utilise l’arrière-plan 1 comme couleur du texte, et la couleur du texte comme couleur d’arrière-plan

Certains des paramètres qui vous permettent de choisir le schéma de couleurs utilisé vous donnent également la possibilité d’utiliser des dégradés. Par exemple, dans Dawn, le premier thème gratuit de Boutique en ligne 2.0 de Shopify, vous pouvez configurer des dégradés des couleurs de votre marque et les utiliser à la place des couleurs d’accent et d'arrière-plan standard qui vous sont proposées.

Configurer des dégradés

Dawn personnalise la propriété CSS de l’arrière-plan avec le paramètre color_background, ce qui vous permet de créer des options d’arrière-plan intéressantes d'un point de vue visuel, telles que des dégradés.

Pour définir une couleur d’arrière-plan, vous pouvez utiliser la plupart des valeurs de propriété CSS de background. Il est possible d'utiliser ce champ pour les couleurs unies (par exemple, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) et hsla(0, 0%, 0%, 1) produiront tous un arrière-plan noir uni) ou pour les dégradés (par exemple, linear-gradient(red, green), radial-gradient(red, green) ou conic-gradient(red, green)). Il est également possible de répéter les dégradés.

Le paramètre de couleur de l’arrière-plan utilise un code CSS et comprend un vérificateur de validation qui affiche un avertissement si votre code CSS contient des images, des caractères spéciaux ou des URL. Si le code CSS de l’arrière-plan est valide, l’éditeur de thème générera un aperçu de votre dégradé dans le panneau d’aperçu.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement