Nuanciers de couleurs

Cette page a été imprimée le Jun 08, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-store/themes/theme-structure/color-scheme.

Vous avez la possibilité de sélectionner un nuancier de couleurs pour l'appliquer à différentes sections du thème (p. ex. au texte enrichi, à la bannière avec image ou encore à la liste de collections) à partir des couleurs que vous avez définies dans les paramètres de votre thème. Un nuancier 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.

Certains des paramètres qui vous permettent de choisir un nuancier 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.

Sur cette page

Paramètres de couleur

Les images de fond et la marge intérieure des images peuvent être configurées dans l’éditeur de thème. Vous pouvez prévisualiser les combinaisons de couleurs sélectionnées dans le panneau d’aperçu de l’éditeur de thème. Utilisez le menu déroulant pour choisir entre les paramètres de couleur suivants :

Paramètre Description
Texte de bouton plein Couleur utilisée comme couleur de texte de premier plan sur les boutons avec des couleurs d’accent.
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.
Texte Il est possible d'appliquer une couleur à une section ou à un bloc de texte.
Bouton en relief Couleur utilisée comme contour pour les boutons secondaires. Également utilisée pour les liens texte.
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.

Gérer votre nuancier de couleurs

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

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Personnaliser.
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Cliquez sur l’icône en forme de pinceau humide pour accéder aux 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 certains thèmes 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. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Personnaliser.
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Cliquez sur l’icône en forme de pinceau humide pour accéder aux paramètres du thème.
  2. Cliquez sur COULEURS.

  3. Sélectionnez l’une des options de couleurs de gradient.

  4. Ajustez l’un des paramètres de dégradé suivants :

  • 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 d’un dégradé linéaire 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 cinq.
  • Utilisez le curseur pour sélectionner la position de votre dégradé, ou saisissez une valeur numérique dans le champ.
  • Utilisez les boutons + ou - pour ajouter un arrêt de couleur. Cela ajoute une nouvelle couleur fixe dans le curseur que vous pouvez positionner.
  • 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. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Personnaliser.
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Cliquez sur l’icône en forme de pinceau humide pour accéder aux 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. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Personnaliser.
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Depuis l'application Shopify, appuyez sur Store (Boutique).
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Gérer tous les thèmes.
  4. Recherchez le thème que vous souhaitez modifier, puis appuyez sur Personnaliser.
  5. Appuyez sur Edit (Modifier).
  1. Cliquez sur l’icône en forme de pinceau humide pour accéder aux 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