Customizer - Styles (paramètres d’URL)

Styles avec les paramètres d’URL

Les paramètres d’URL permettent d’ouvrir Customizer avec des paramètres visuels et des options de produit prédéfinis sans modifier votre code d’intégration. Customizer lit ces paramètres au chargement et les applique à l’arrière-plan de l’espace de travail, à l’environnement 3D, à l’intensité lumineuse et au choix des variantes. Les variantes sélectionnées par l’URL sont interprétées à partir des associations d’attributs et de termes WooCommerce. Couleurs personnalisées : Pour les produits proposant des variantes à couleur personnalisée, vous pouvez demander cette option et transmettre directement les valeurs des couleurs choisies dans l’URL. Encodez # sous la forme %23 dans les valeurs des paramètres.

Liste des paramètres d’URL disponibles

ParamètreTypeDescriptionValeur par défaut
bcgstringMode d’arrière-plan de Customizer : grad_f6f7fb_e8fff6, app_img_123 ou env. Le mode env utilise l’aperçu de l’environnement choisi comme arrière-plan de l’espace de travail.Valeur par défaut du design/thème
envintIdentifiant de l’environnement d’exécution. Il sélectionne l’environnement HDRI de la zone 3D et, avec bcg=env, l’aperçu de cet environnement comme arrière-plan.Valeur du design/par défaut
light_intensity0 - 2Intensité lumineuse de l’environnement de la zone 3D. Les valeurs hors plage sont ramenées aux limites autorisées.Valeur du design/par défaut
bcg_blur0 - 100Flou appliqué aux arrière-plans de type image de Customizer, notamment app_img_* et les aperçus d’environnement bcg=env.0
bcg_brightness0 - 3Luminosité des arrière-plans de type image de Customizer.1
bcg_underlaystringDégradé sous les arrière-plans de type image, par exemple grad_ffffff_f5f7fb.Valeur par défaut du design/thème
attribute_pa_*stringPrésélectionne un terme d’attribut de produit WooCommerce. Les clés acceptées comprennent attribute_pa_color, pa_color et color ; les alias pris en charge couvrent la taille, la couleur, le matériau, le type d’impression et le motif.
custom_color0 / 1 / trueDemande la variante à couleur personnalisée lorsque le produit la prend en charge. Le même résultat peut être obtenu avec color=custom.0
picked_colorsstringCouleurs personnalisées de remplacement, séparées par des virgules, au format detailKey:%23hex, par exemple front:%23ff6b6b,back:%2300ff88. Le caractère # doit être encodé dans l’URL sous la forme %23.

Exemple

URL : https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b

<iframe
  loading="lazy"
  title="Product Customizer"
  src="https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>