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	`app_img_*`や`bcg=env`のプレビュー背景など、Customizerの画像背景に適用するぼかし。	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`。`#`は`%23`にURLエンコードする必要があります。

例

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>