Nuanciers de couleurs

Vous pouvez définir différents nuanciers de couleurs dans les paramètres de votre thème et les appliquer à différentes sections de votre boutique en ligne au moyen d’un sélecteur de nuancier de couleurs. Un nuancier de couleurs est un ensemble de couleurs. Un ensemble de nuanciers de couleurs a été appliqué par défaut à votre thème, mais vous pouvez le changer à tout moment dans l’éditeur de thème. Vous pouvez ajouter les couleurs de votre marque pour unifier l’application de votre palette de couleurs partout sur votre boutique en ligne.

Paramètres des nuanciers de couleurs du thème

Les nuanciers de couleurs sont un paramètre de thème qui regroupe des éléments et leurs couleurs respectives de manière représentative sur le plan visuel. Vous pouvez attribuer différentes couleurs à divers éléments sous la forme d’un nuancier de couleurs cohérent et applicable à l’ensemble de votre thème, lorsqu’un sélecteur de nuancier de couleurs est disponible. Vous pouvez avoir jusqu’à 21 nuanciers de couleurs. Vous pouvez également prévisualiser la manière dont vos couleurs s’afficheront dans l’aperçu du nuancier.

Paramètre	Description
Arrière-plan	La couleur est appliquée à l’arrière-plan de certaines sections et à l’arrière-plan du bouton de contour.
Dégradé de l’arrière-plan	Un dégradé de couleurs est appliqué à l’arrière-plan de certaines sections. Les dégradés de l’arrière-plan remplacent l’arrière-plan là où cela est possible.
Texte	La couleur est appliquée au texte de la section ou du bloc.
Arrière-plan plein du bouton	La couleur est appliquée à l’arrière-plan du bouton principal.
Texte de bouton plein	La couleur est appliquée au texte du bouton principal.
Bouton en relief	La couleur est appliquée au texte et à la bordure du bouton secondaire.
Ombre	La couleur est appliquée aux ombres.

Gérer votre nuancier de couleurs

Les options de couleur et de nuancier de couleurs de votre boutique sont définies dans les paramètres de votre thème. Pour les couleurs unies, utilisez le sélecteur de couleurs pour sélectionner une nouvelle couleur, ou saisissez la valeur de la couleur dans le champ de texte. Le champ de la couleur accepte les noms et valeurs de couleur suivants :

• noms de couleurs tels que red, black ou blue
• codes de couleur RVB
• valeurs de couleur hexadécimales

Étapes

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
3. Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
4. Dans la section Nuanciers, cliquez sur un nuancier existant ou sur l’option Ajouter un nuancier pour créer un autre nuancier de couleurs.
5. Cliquez sur l’échantillon de couleur pour indiquer la couleur du type de contenu que vous souhaitez modifier.
6. Pour définir votre couleur, saisissez un code de couleur hexadécimal à partir du sélecteur de couleurs. Pour que la couleur soit transparente, supprimez le code hexadécimal du champ de texte.
7. Cliquez sur Save (Enregistrer).

Appliquer votre nuancier de couleurs

Une fois que vous avez défini votre nuancier de couleurs dans les paramètres de votre thème, vous pouvez attribuer un nuancier de couleurs aux sections et blocs de votre thème en utilisant le sélecteur de nuancier de couleurs. Le sélecteur de nuancier de couleurs n’est disponible que dans certaines sections, certains blocs et dans les paramètres de thème généraux.

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.

Conseil

Pour en savoir plus sur les dégradés et les arrière-plans CSS, consultez la documentation sur le dégradé linéaire et l'arrière-plan CSS de Mozilla.

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. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
3. Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
4. Dans la section Nuanciers, cliquez sur un nuancier existant que vous souhaitez modifier.
5. Cliquez sur l’option d’échantillon de couleur du dégradé. Par exemple, vous pouvez cliquer sur Dégradé de l’arrière-plan.
6. Si vous n’avez pas encore configuré de dégradé, vous pouvez choisir parmi plusieurs options prédéfinies. Sélectionnez n’importe quel dégradé prédéfini pour ouvrir le volet des options.
7. Sélectionnez vos options de dégradé :

• Faites votre choix 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é.
• Définissez l’angle de votre dégradé à l’aide des flèches ascendante et descendante. Cliquez sur la flèche ascendante ou descendante 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.
• Saisissez un code de couleur hexadécimal spécifique ou utilisez le curseur des couleurs pour choisir une teinte. Les couleurs récemment sélectionnées s’affichent au bas du volet des options de dégradé.
• Pour rendre votre dégradé opaque, utilisez le curseur de droite pour sélectionner la transparence de votre dégradé. Vous pouvez également saisir un pourcentage dans le champ situé à côté du code de couleur hexadécimal.

1. Cliquez sur Save (Enregistrer).

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. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
3. Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
4. Dans la section Nuanciers, cliquez sur un nuancier existant que vous souhaitez modifier.
5. Cliquez sur le dégradé que vous souhaitez modifier.
6. Cliquez sur la flèche située à côté de l’option Dégradé, puis sélectionnez CSS.
7. 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é.
8. Cliquez sur Save (Enregistrer).

Supprimer un dégradé

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
3. Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
4. Dans la section Nuanciers, cliquez sur un nuancier existant que vous souhaitez modifier.
5. Cliquez sur le dégradé que vous souhaitez supprimer.
6. Cliquez sur Supprimer le dégradé.
7. Cliquez sur Save (Enregistrer).