Viewer – Styling (URL Parameters)

Styling with URL Parameters

URL parameters allow you to customize the appearance and behavior of the Viewer without modifying the code. Parameters can be configured directly in the app (e.g. in the “Share” tab or inside the Viewer) and let you control background mode, image background effects, 3D environment lighting, UI visibility, and Add to Cart visibility. Variant preselection (WooCommerce attributes): You can also preselect a specific product variant using query parameters such as attribute_pa_color, pa_size, or size. These parameters are resolved using your store attribute/term mapping and allow opening the Viewer already set to a specific color, size, material, print method, or custom color.

List of available URL parameters

ParameterTypeDescriptionDefault value
nav0 / 1Hides (0) or shows (1) navigation. Available only in Business.1
add_to_cart0 / 1Hides (0) or shows (1) the “Add to Cart” button.0
bcgstringScene background mode: grad_f6f7fb_e8fff6, app_img_123, uploaded, theme, or env.Store/default
envintHDRI environment ID used for scene lighting. When bcg=env, the environment is also used as the visible scene background.1
light_intensity0 - 2Light intensity of the 3D scene.0.6
bcg_blur0 - 100Blur applied to image backgrounds selected with bcg=app_img_*, bcg=uploaded, or bcg=theme.0
bcg_brightness0 - 3Brightness/emissive level for image backgrounds.1
bcg_underlaystringUnderlay behind image backgrounds. Use grad_ffffff_f5f7fb for a gradient or none to remove it.Background 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/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>