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.
Les modèles n’ont pas de paramètres de couleur individuels afin que le design de votre boutique en ligne soit cohérent sur votre site web. Un modèle est considéré comme une page principale ou le contenu principal d’une boutique. Utiliser des nuanciers de couleurs différents sur votre boutique peut mener à une expérience utilisateur négative et inciter les clients à quitter votre boutique sans acheter de produits.
Vous pouvez consulter les caractéristiques de la boutique en ligne et les types de pages pour les sections qui incluent le paramètre Nuancier de couleurs.
Sur cette page
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. |
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,blackoublue - codes de couleur RVB
- valeurs de couleur hexadécimales
Étapes :
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
Dans la section Nuanciers, cliquez sur un nuancier existant ou sur l’option Ajouter un nuancier pour créer un autre nuancier de couleurs.
Cliquez sur l’échantillon de couleur pour indiquer la couleur du type de contenu que vous souhaitez changer.
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.
Cliquez sur 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.
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
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
Dans la section Nuanciers, cliquez sur un nuancier existant que vous souhaitez modifier.
Cliquez sur l’option d’échantillon de couleur du dégradé. Par exemple, vous pouvez cliquer sur Dégradé de l’arrière-plan.
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.
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.
Cliquez sur 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 :
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
Dans la section Nuanciers, cliquez sur un nuancier existant que vous souhaitez modifier.
Cliquez sur le dégradé que vous souhaitez modifier.
Cliquez sur la flèche située à côté de l’option Dégradé, puis sélectionnez CSS.
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é.
Cliquez sur Enregistrer.
Supprimer un dégradé
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
Cliquez sur l’icône en forme d’engrenage, puis sur Couleurs.
Dans la section Nuanciers, cliquez sur un nuancier existant que vous souhaitez modifier.
Cliquez sur le dégradé que vous souhaitez supprimer.
Cliquez sur Supprimer le dégradé.
Cliquez sur Enregistrer.