Viewer – 样式设置（URL 参数）

使用 URL 参数设置样式

URL 参数让你无需修改代码即可自定义 Viewer 的外观和行为。 参数可以直接在应用中配置（例如在“分享”选项卡或 Viewer 内），用于控制背景模式、图片背景效果、3D 环境光照、界面可见性和加入购物车按钮的可见性。 变体预选（WooCommerce 属性）： 你还可以使用 attribute_pa_color、pa_size 或 size 等查询参数预选产品变体。这些参数通过商店的属性/属性值映射解析，让 Viewer 打开时即选定特定颜色、尺寸、材料、印刷方式或自定义颜色。

可用 URL 参数列表

参数类型说明默认值
nav0 / 1隐藏（0）或显示（1）导航。仅适用于 Business。1
add_to_cart0 / 1隐藏（0）或显示（1）“加入购物车”按钮。0
bcgstring场景背景模式：grad_f6f7fb_e8fff6、app_img_123、uploaded、theme 或 env。商店/默认
envint用于场景照明的 HDRI 环境 ID。当 bcg=env 时，该环境也作为可见的场景背景。1
light_intensity0 - 23D 场景的光照强度。0.6
bcg_blur0 - 100对通过 bcg=app_img_*、bcg=uploaded 或 bcg=theme 选择的图片背景应用模糊。0
bcg_brightness0 - 3图片背景的亮度/自发光强度。1
bcg_underlaystring图片背景后方的底层。使用 grad_ffffff_f5f7fb 设置渐变，或使用 none 移除底层。背景默认值
attribute_pa_*string预选 WooCommerce 产品属性值。支持的键形式包括 attribute_pa_color、pa_color 和 color；支持尺寸、颜色、材料、印刷类型和图案等别名。
custom_color0 / 1 / true当产品支持自定义颜色时，请求该变体。也可通过 color=custom 实现同样效果。0
picked_colorsstring以逗号分隔的自定义颜色覆盖值，格式为 detailKey:%23hex，例如 front:%23ff6b6b,back:%2300ff88。字符 # 必须在 URL 中编码为 %23。

示例

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>