Customizer — 样式设置（URL 参数）

使用 URL 参数设置样式

通过 URL 参数，无需修改嵌入代码，即可使用预设的视觉设置和产品选项打开 Customizer。 Customizer 会在加载时读取这些参数，并将其应用到工作区背景、3D 环境、光照强度和变体选择。通过 URL 选择的变体会根据 WooCommerce 属性和属性项映射进行解析。 自定义颜色： 对于包含自定义颜色变体的产品，你可以请求自定义颜色，并直接在 URL 中传递所选的颜色值。在查询参数值中，请将 # 编码为 %23。

可用 URL 参数列表

参数	类型	说明	默认值
`bcg`	string	Customizer 背景模式：`grad_f6f7fb_e8fff6`、`app_img_123` 或 `env`。`env` 模式会将所选环境的预览图用作工作区背景。	设计／主题默认值
`env`	int	运行时环境 ID。用于选择 3D 画布的 HDRI 环境；配合 `bcg=env` 使用时，还会选择环境预览背景。	设计默认值
`light_intensity`	0 - 2	3D 画布的环境光强度。超出范围的值会被限制在有效范围内。	设计默认值
`bcg_blur`	0 - 100	应用于 Customizer 图像背景的模糊效果，包括 `app_img_*` 和 `bcg=env` 预览背景。	0
`bcg_brightness`	0 - 3	Customizer 图像背景的亮度。	1
`bcg_underlay`	string	图像背景下方的渐变底色，例如 `grad_ffffff_f5f7fb`。	设计／主题默认值
`attribute_pa_*`	string	预选 WooCommerce 产品属性值。支持的键形式包括 `attribute_pa_color`、`pa_color` 和 `color`；支持尺寸、颜色、材料、印刷类型和图案等别名。
`custom_color`	0 / 1 / true	当产品支持自定义颜色时，请求该变体。也可通过 `color=custom` 实现同样效果。	0
`picked_colors`	string	以逗号分隔的自定义颜色覆盖值，格式为 `detailKey:%23hex`，例如 `front:%23ff6b6b,back:%2300ff88`。字符 `#` 必须在 URL 中编码为 `%23`。

示例

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>