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, 3D environment lighting, and UI visibility. Variant preselection (WooCommerce attributes): You can also preselect a specific product variant using query parameters that start with attribute_ (e.g. attribute_pa_color, attribute_pa_size). These parameters are resolved using your store attribute/term mapping (attributes + terms) and allow opening the Viewer already set to a specific color, size, material, or print method.

List of available URL parameters

ParameterTypeDescriptionDefault value
nav0 / 1Hides (0) or shows (1) navigation. Available only in Business / Business PRO.1
add_to_cart0 / 1Hides (0) or shows (1) the “Add to Cart” button.0
bcgstringScene background, e.g. grad_ff7575_4d1212, i16, uploaded, theme or env , configured in the “Scene” tab.
envintHDRI environment (lighting) ID, configured in the “Scene” tab.1
light_intensity0 – 2Light intensity of the 3D scene.0.6
attribute_pa_*stringPreselect a WooCommerce product attribute term (variant option). The key must match your attribute slug (e.g. pa_color, pa_size, pa_material, pa_print_type) and the value must match the term slug (e.g. green, s). This is resolved via your attribute/term mapping and opens the Viewer with the matching variant selected.

Example

Url: https://alterproduct.com/app/viewer/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0

<iframe
  loading="lazy"
  title="Product Viewer"
  src="https://alterproduct.com/app/viewer/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>