Définir une seule couleur sur la page produit Pops

Pour que la page produit Pops utilise une seule couleur, définissez le champ méta trafik-plus.theme_color sur vos variantes de produit. Le thème lit ce champ méta et pilote la variable CSS --global-hue, qui fait basculer les couleurs du thème de la page vers cette teinte. L'effet crée une famille de teintes, et non 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 en 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 l'utilisent à la place de 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 chaque fois 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 la 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 définir 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 se met à jour pour correspondre à la couleur de cette variante.

Éléments affectés par la teinte

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

Éléments qui ne changent pas

Les pastilles de produit conservent leur couleur ou leur image configurée : elles ne sont pas recolorées par --global-hue. L'effet applique également une teinte commune, et non une couleur identique à tous les éléments : chacun conserve sa propre luminosité, sa chroma et son opacité, si bien que la page forme une seule famille de couleurs plutôt qu'un aplat uniforme.