OV25 Setup for Shopify and WooCommerce
Configure how the OV25 configurator appears and behaves on ecommerce storefronts.
The OV25 setup UI is a visual editor for the configurator experience on Shopify and WooCommerce stores. Use it to choose where the configurator appears, how customers open it, how variants are shown, and how the UI should match the storefront.
After configuring the settings and saving, the settings will be immediately applied to the storefront.
You can save settings either globally for all products, or on a per-product basis.
Product Type
This lets you choose which type of configurator you are editing the settings for. Each type has its own separate settings.
Elements
These toggles control which part of the configurator should be shown on the product page.
You can choose where these are placed by setting the CSS selectors on the "Settings" page.
| Element | What it controls |
|---|---|
| Gallery | The 3D viewer/image gallery |
| Price | The configured product price |
| Name | The product or range name |
| Variants | The option/variant selector |
| Swatches | Widget that opens the swatch book |
| Configure button | The button that opens the configurator |
Configurator Layout
Layout settings control how the customer opens and uses the configurator. Desktop and mobile can use different modes.
| Setting | What it does |
|---|---|
| Display mode | Chooses whether the configurator appears inline on the page, in a sheet, in a drawer, or in a modal. |
| Trigger style | Controls whether customers see one configure button or split actions (e.g. One button for Fabrics, one for Legs) |
| Variant display mode | Chooses how product options are presented: wizard, list, tabs, accordion, or tree. |
| Hide options | Hides specific option groups from the customer-facing variant UI. |
For product pages with limited space, use a sheet, drawer, or modal. For richer product pages where the configurator is the main buying flow, inline layouts usually feel better.
Image Gallery
Gallery settings control how product imagery and the 3D viewer sit together.
| Setting | What it does |
|---|---|
| Layout | Chooses whether to show a carousel, a stacked grid, or no images. |
| Max images | Limits how many ecommerce product images are shown alongside OV25 imagery. |
Branding
Branding settings adjust the high-level visual identity of the OV25 UI.
| Setting | What it does |
|---|---|
| Logo URL | Shows your logo in the configurator UI. |
| Mobile logo URL | Uses a different logo on mobile. |
| Hide logo | Hides the logo from the configurator UI. |
Behaviour Flags
Behaviour flags turn optional OV25 features on or off.
| Setting | What it does |
|---|---|
| Hide pricing | Hides OV25 pricing in the configurator UI. |
| Disable add to cart | Prevents OV25 from showing or using its add-to-cart action. |
| Hide AR | Hides augmented reality controls. |
| Defer 3D | Shows product imagery first and loads 3D after the customer starts configuring. This can improve initial page load time. |
| Show optional | Shows optional selections where supported. |
| Force mobile | Forces the mobile configurator layout. Use mainly for testing or special embedded layouts. |
| Auto open | Opens the configurator automatically when the page loads. Only applies when not using inline display mode. |
Element Styles
Element styles let you visually adjust the configurator to match your store's brand without editing theme code or writing CSS. You can easily customise the colors, borders, paddings, margins, fonts, and more.
The setup UI also includes targeted element rules. These let you pick a known OV25 element, such as the checkout button and apply common CSS properties to it.
If you want to add more complex CSS rules, you can target these selectors in the Custom CSS field.
Text Overrides
Text overrides change customer-facing wording in the configurator. Use them for brand tone, regional spelling, or clearer storefront labels.
Examples:
- change "Configure" to "Customise"
- rename option headings such as "Fabric" to "Choose your fabric"
- rename a fabrics from "Cotton" to "Cotton Blouse"
Some text overrides can use conditions. The below image shows an example of renaming the option "Fabric" to "Seat Material". All other options unaffected.
Some text overrides can also include dynamic values, such as product name, option name, selected variant name, or price. If these are available the will be shown as clickable buttons. Below is an example of changing the product name from "Windrush Loveseat" to "Range: Windrush / Product: Loveseat".
Saving
After you are happy with your settings, click "Save" to immediatel apply the settings to you storefront.