Définir une seule couleur sur la page produit Pops

Faites utiliser une seule couleur à la page produit Pops en définissant le champ méta trafik-plus.theme_color sur vos variantes de produit. Le thème lit ce champ méta et contrôle la variable CSS --global-hue, qui applique cette teinte aux couleurs du thème de la page. Il s’agit d’une famille de teintes, et non d’une couleur uniforme : chaque élément conserve sa propre luminosité, sa chroma et son opacité, de sorte que les arrière-plans, le texte, les bordures et les boutons restent dans la même gamme de couleurs.

Fonctionnement de l’effet monochrome

Pops lit le champ méta theme_color dans l’espace de noms trafik-plus pour chaque variante de produit, convertit la valeur de couleur au format OKLCH et en extrait le canal de teinte. Cette teinte est appliquée à la page via --global-hue, et les variables de couleur du thème la substituent à leur propre teinte tout en conservant leur luminosité, leur chroma et leur alpha d’origine. La teinte est définie pour chaque variante, et la page adopte la teinte de la variante sélectionnée dès qu’un client change de variante.

Définir le champ méta sur vos variantes

Le thème lit uniquement les champs méta — il ne peut pas les créer — le champ méta trafik-plus.theme_color doit donc exister sur vos variantes avant que la page puisse adopter cette couleur.

1. Dans l’interface d’administration Shopify, ouvrez un produit et ajoutez le champ méta trafik-plus.theme_color à chaque variante que vous souhaitez colorer.

2. Définissez la valeur du champ méta sur la couleur que vous souhaitez utiliser pour la page produit.

3. Répétez l’opération pour chaque variante qui doit contrôler la couleur de la page.

4. Enregistrez, puis ouvrez la page produit pour voir les couleurs du thème adopter cette teinte.

Chaque variante peut avoir sa propre valeur theme_color. Lorsqu’un client sélectionne une autre variante, la teinte de la page est mise à jour pour correspondre à la couleur de cette variante.

Éléments concernés par la teinte

--global-hue recolore les éléments de la page produit contrôlés par le thème : boutons, texte, arrière-plans, bordures, titres, cartes, champs de saisie, dégradés, prix standard et prix soldés, évaluations du produit et bordure de la miniature du média sélectionné. Les pastilles d’options de variante et le contrôle de liste déroulante utilisent les mêmes couleurs de boutons et de texte adaptées à la teinte.

Éléments non modifiés

Les nuanciers de produit conservent leur couleur ou leur image configurée — ils ne sont pas recolorés par --global-hue. L’effet correspond également à une teinte commune, et non à une couleur identique unique : chaque élément conserve sa propre luminosité, sa chroma et son opacité, de sorte que la page forme une même famille de couleurs plutôt qu’un aplat uniforme.

FAQ