Customizer - Estilo (parámetros URL)

Estilos mediante parámetros URL

Los parámetros URL permiten abrir Customizer con ajustes visuales y opciones de producto predefinidos sin cambiar el código de integración. Customizer lee estos parámetros al cargar y los aplica al fondo del espacio de trabajo, al entorno 3D, a la intensidad de la iluminación y a la selección de variantes. Las variantes seleccionadas por URL se resuelven mediante las correspondencias de atributos y términos de WooCommerce. Colores personalizados: Para productos con variantes de color personalizado, puedes solicitar dicho color y pasar los valores elegidos directamente en la URL. Codifica # como %23 dentro de los valores de consulta.

Lista de parámetros de URL disponibles

ParámetroTipoDescripciónValor predeterminado
bcgstringModo de fondo de Customizer: grad_f6f7fb_e8fff6, app_img_123 o env. El modo env usa la vista previa del entorno seleccionado como fondo del espacio de trabajo.Valor predeterminado del diseño/tema
envintID del entorno de ejecución. Selecciona el entorno HDRI para el lienzo 3D y, con bcg=env, también el fondo de vista previa del entorno.Diseño/predeterminado
light_intensity0 - 2Intensidad de la luz del entorno para el lienzo 3D. Los valores fuera del intervalo se limitan a sus extremos.Diseño/predeterminado
bcg_blur0 - 100Desenfoque aplicado a los fondos de imagen de Customizer, incluidos los fondos de vista previa app_img_* y bcg=env.0
bcg_brightness0 - 3Brillo de los fondos de imagen de Customizer.1
bcg_underlaystringDegradado bajo los fondos de imagen, p. ej., grad_ffffff_f5f7fb.Valor predeterminado del diseño/tema
attribute_pa_*stringPreselecciona un término de atributo de producto de WooCommerce. Se aceptan claves como attribute_pa_color, pa_color y color; los alias admitidos incluyen talla, color, material, tipo de impresión y patrón.
custom_color0 / 1 / trueSolicita la variante de color personalizado si el producto la admite. También se puede activar con color=custom.0
picked_colorsstringValores de colores personalizados separados por comas con el formato detailKey:%23hex, por ejemplo front:%23ff6b6b,back:%2300ff88. El carácter # debe codificarse en la URL como %23.

Ejemplo

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>