Viewer – Estilo (parámetros de URL)

Estilo mediante parámetros de URL

Los parámetros de URL permiten personalizar el aspecto y el comportamiento de Viewer sin modificar el código. Puedes configurarlos directamente en la aplicación (por ejemplo, en la pestaña «Compartir» o dentro de Viewer) para controlar el modo de fondo, los efectos del fondo de imagen, la iluminación del entorno 3D, la visibilidad de la interfaz y la del botón Añadir al carrito. Preselección de variantes (atributos de WooCommerce): También puedes preseleccionar una variante concreta con parámetros como attribute_pa_color, pa_size o size. Estos parámetros se resuelven mediante la asignación de atributos y términos de tu tienda y permiten abrir Viewer con un color, talla, material, método de impresión o color personalizado ya seleccionado.

Lista de parámetros de URL disponibles

ParámetroTipoDescripciónValor predeterminado
nav0 / 1Oculta (0) o muestra (1) la navegación. Disponible solo en Business.1
add_to_cart0 / 1Oculta (0) o muestra (1) el botón «Añadir al carrito».0
bcgstringModo de fondo de la escena: grad_f6f7fb_e8fff6, app_img_123, uploaded, theme o env.Tienda/predeterminado
envintID del entorno HDRI utilizado para iluminar la escena. Cuando bcg=env, el entorno también se utiliza como fondo visible de la escena.1
light_intensity0 - 2Intensidad de la iluminación de la escena 3D.0.6
bcg_blur0 - 100Desenfoque aplicado a los fondos de imagen seleccionados con bcg=app_img_*, bcg=uploaded o bcg=theme.0
bcg_brightness0 - 3Nivel de brillo/emisión de los fondos de imagen.1
bcg_underlaystringCapa situada detrás de los fondos de imagen. Usa grad_ffffff_f5f7fb para un degradado o none para quitarla.Predeterminado del fondo
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/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m

<iframe
  loading="lazy"
  title="Product Viewer"
  src="https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>