Customizer – Estilo (parâmetros de URL)

Estilo com parâmetros de URL

Os parâmetros de URL permitem abrir o Customizer com configurações visuais e opções de produto predefinidas, sem alterar o código de incorporação. O Customizer lê esses parâmetros no carregamento e os aplica ao fundo da área de trabalho, ambiente 3D, intensidade da iluminação e seleção de variantes. As variantes escolhidas pela URL usam o mapeamento de atributos e termos do WooCommerce. Cores personalizadas: Em produtos com variantes de cor personalizada, pode solicitar essa opção e passar os valores das cores diretamente na URL. Codifique # como %23 nos valores da consulta.

Lista de parâmetros de URL disponíveis

ParâmetroTipoDescriçãoValor predefinido
bcgstringModo de fundo do Customizer: grad_f6f7fb_e8fff6, app_img_123 ou env. O modo env usa a pré-visualização do ambiente selecionado como fundo da área de trabalho.Predefinição do design/tema
envintID do ambiente de execução. Seleciona o ambiente HDRI da área de desenho 3D e, com bcg=env, também o fundo de pré-visualização do ambiente.Design/predefinido
light_intensity0 - 2Intensidade da luz do ambiente na área de desenho 3D. Valores fora do intervalo são limitados aos extremos.Design/predefinido
bcg_blur0 - 100Desfoque aplicado aos fundos em imagem do Customizer, incluindo app_img_* e pré-visualizações de fundo com bcg=env.0
bcg_brightness0 - 3Brilho dos fundos em imagem do Customizer.1
bcg_underlaystringBase em gradiente atrás das imagens de fundo, como grad_ffffff_f5f7fb.Predefinição do design/tema
attribute_pa_*stringPré-seleciona um termo de atributo de produto WooCommerce. Aceita chaves como attribute_pa_color, pa_color e color, com aliases para tamanho, cor, material, tipo de impressão e padrão.
custom_color0 / 1 / trueSolicita a variante de cor personalizada, quando o produto oferece essa opção. Também pode ser ativada com color=custom.0
picked_colorsstringCores personalizadas separadas por vírgulas no formato detailKey:%23hex, por exemplo front:%23ff6b6b,back:%2300ff88. O caractere # deve ser codificado na URL como %23.

Exemplo

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>