Customizer - Styling (URL Parameters)

Styling with URL Parameters

URL parameters let you open the Customizer with predefined visual settings and product options without changing your embed code. The Customizer reads these parameters on load and applies them to the workspace background, 3D environment, lighting intensity, and variant selection. URL-selected variants are resolved using WooCommerce attribute and term mappings. Custom colors: For products with custom-color variants, you can request the custom color and pass picked color values directly in the URL. Encode # as %23 inside query values.

List of available URL parameters

ParameterTypeDescriptionDefault value
bcgstringCustomizer background mode: grad_f6f7fb_e8fff6, app_img_123, or env. The env mode uses the selected environment preview as the workspace background.Design/theme default
envintRuntime environment ID. It selects the HDRI environment for the 3D canvas and, with bcg=env, also selects the environment preview background.Design/default
light_intensity0 - 2Environment light intensity for the 3D canvas. Values outside the range are clamped.Design/default
bcg_blur0 - 100Blur applied to image-style Customizer backgrounds, including app_img_* and bcg=env preview backgrounds.0
bcg_brightness0 - 3Brightness for image-style Customizer backgrounds.1
bcg_underlaystringGradient underlay behind image-style backgrounds, e.g. grad_ffffff_f5f7fb.Design/theme default
attribute_pa_*stringPreselect a WooCommerce product attribute term. Accepted key forms include attribute_pa_color, pa_color, and color; supported aliases include size, color, material, print type, and pattern.
custom_color0 / 1 / trueRequests the custom-color variant when the product supports one. The same can be triggered with color=custom.0
picked_colorsstringComma-separated custom-color overrides in the format detailKey:%23hex, e.g. front:%23ff6b6b,back:%2300ff88. The # character must be URL-encoded as %23.

Example

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>