Viewer – 表示設定(URLパラメーター)

URLパラメーターによる表示設定

URLパラメーターを使うと、コードを変更せずにViewerの外観や動作を調整できます。 パラメーターはアプリ内(「共有」タブやViewer内など)で設定でき、背景モード、画像背景の効果、3D環境の照明、UIの表示、カート追加ボタンの表示を制御できます。 バリエーションの事前選択(WooCommerce属性): attribute_pa_colorpa_sizesizeなどのクエリパラメーターで、特定の商品バリエーションを事前選択することもできます。ストアの属性・値の対応付けに従って解決され、特定の色、サイズ、素材、印刷方式、カスタムカラーを選んだ状態でViewerを開けます。

利用可能なURLパラメーター

パラメーター説明既定値
nav0 / 1ナビゲーションを非表示(0)または表示(1)にします。Businessのみで利用できます。1
add_to_cart0 / 1「カートに追加」ボタンを非表示(0)または表示(1)にします。0
bcgstringシーンの背景モード:grad_f6f7fb_e8fff6app_img_123uploadedthemeenvストア/既定値
envintシーンの照明に使うHDRI環境のID。bcg=envの場合、環境は表示用のシーン背景にも使われます。1
light_intensity0 - 23Dシーンの光の強さ。0.6
bcg_blur0 - 100bcg=app_img_*bcg=uploadedbcg=themeで選択した画像背景に適用するぼかし。0
bcg_brightness0 - 3画像背景の明るさ/発光レベル。1
bcg_underlaystring画像背景の背面レイヤー。グラデーションにはgrad_ffffff_f5f7fb、削除する場合はnoneを指定します。背景の既定値
attribute_pa_*stringWooCommerceの商品属性値を事前選択します。attribute_pa_colorpa_colorcolor形式のキーを使用でき、サイズ、色、素材、印刷方式、パターンの別名に対応します。
custom_color0 / 1 / true商品が対応している場合、カスタムカラーバリエーションを要求します。color=customでも同じ操作ができます。0
picked_colorsstringdetailKey:%23hex形式で指定する、カンマ区切りのカスタムカラー上書き値。例:front:%23ff6b6b,back:%2300ff88#%23にURLエンコードする必要があります。

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>