Combinaisons de couleurs

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 est appliqué à votre thème par défaut, mais il peut ê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.

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 Sélectionnez un dégradé prédéfini ou utilisez le sélecteur de dégradé pour personnaliser votre dégradé d'accent.
Accentuation 2 La couleur peut être appliquée aux boutons d’impact et aux arrière-plans de certaines sections.
Dégradé Accent 2 Sélectionnez un dégradé prédéfini ou utilisez le sélecteur de dégradé pour personnaliser votre dégradé d'accent.
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 Sélectionnez un dégradé prédéfini ou utilisez le sélecteur de dégradé pour personnaliser votre dégradé d'arrière-plan.
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 Sélectionnez un dégradé prédéfini ou utilisez le sélecteur de dégradé pour personnaliser votre dégradé d'arrière-plan.
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 un schéma de couleurs 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.

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.
  2. Cliquez sur Couleurs.
  3. Pour modifier une couleur dans votre thème, cliquez sur la couleur et utilisez le sélecteur de couleur ou saisissez la valeur de la nouvelle couleur dans le champ de texte.
  4. Cliquez sur Save (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.

Gradients

Vous pouvez configurer un dégradé de couleurs dans Dawn pour des options d’arrière-plan visuellement intéressantes. Le paramètre color_background est utilisé pour personnaliser la propriété d’arrière-plan CSS.

Le sélecteur de dégradé vous permet de sélectionner les couleurs, le style de dégradé, l’angle, la position et l’opacité du dégradé. Les options sélectionnées dans le sélecteur de dégradé sont prévisualisées en temps réel dans l’éditeur de thème. Vous pouvez également créer un arrière-plan de dégradé à l’aide d’un code CSS, qui inclut un vérificateur de validation.

Configurer des dégradés

  1. Cliquez sur Theme settings (Paramètres du thème).
  2. Cliquez sur Couleurs.
  3. Sélectionnez l'une des options de gradient.

  4. Sélectionnez vos options de dégradé :

  • Vous pouvez choisir entre un dégradé linéaire ou un dégradé radial. Utilisez les boutons pour sélectionner votre style de dégradé préféré.
  • L'angle de votre dégradé peut être configuré avec les flèches vers le haut et vers le bas. Cliquez sur le symbole vers le haut ou vers le bas pour augmenter ou réduire le pourcentage d’angle de 5.
  • Utilisez le curseur pour sélectionner la position de votre dégradé, ou saisissez une valeur numérique dans le champ.
  • Vous pouvez saisir un code de couleur hexadécimal spécifique ou utiliser le curseur des couleurs pour choisir une teinte. Les couleurs récemment sélectionnées s’affichent au bas du panneau des options de dégradé.
  • Si vous souhaitez que votre dégradé soit opaque, utilisez le curseur de droite pour sélectionner la transparence de votre dégradé. Vous pouvez également saisir un pourcentage dans le champ à côté du code de couleur hexadécimal.
  1. Cliquez sur Save (Enregistrer).

Sélecteur de dégradé dans l’éditeur de thème

Utiliser le code CSS pour configurer 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.

Étapes

  1. Cliquez sur Theme settings (Paramètres du thème).
  2. Cliquez sur Couleurs.
  3. Cliquez sur le dégradé que vous souhaitez modifier.
  4. Cliquez sur la flèche à côté de Dégradé et sélectionnez CSS.
  5. Dans le champ Code CSS, tapez ou collez votre code de dégradé. L’aperçu de l’éditeur de thème affiche votre dégradé à l’endroit approprié.
  6. Cliquez sur Save (Enregistrer).
    Gradient CSS Code field in the theme editor

Supprimer un dégradé

Pour réinitialiser ou supprimer un dégradé :

  1. Cliquez sur Theme settings (Paramètres du thème).
  2. Cliquez sur Couleurs.
  3. Cliquez sur le dégradé que vous souhaitez modifier.
  4. Cliquez sur Supprimer le dégradé
  5. Cliquez sur Save (Enregistrer).

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

Essayez gratuitement