OV25 Setup for Shopify and WooCommerce

The OV25 setup UI is a visual editor for the configurator experience on your storefront. Use it to choose where the configurator appears on the product page, how customers open it, how options are presented, and how the UI should look next to your theme.

It is the same editor on both platforms. On Shopify it is the Configurator tab of the OV25 app; on WooCommerce it is the OV25 setup screen in WP Admin. Only the store-wide fields near the end of this page differ between the two.

Product type

The Product Type selector at the top of the Settings tab chooses which kind of configurator you are editing. Each type keeps its own completely separate settings, so switching type does not change what you just configured for another one.

Pick the type matching the products you are setting up. Some controls described below only appear for one type, and each is marked where that is the case.

How the editor is laid out

On the left is a preview of what the configurator will look like. On the right is a panel where you can change the settings.

The panel has three tabs:

What your settings apply to

Settings can be saved as defaults for every OV25 product in the store, or for a single product that needs something different. A per-product setting always wins over the default.

The control that chooses this sits above the preview, and works slightly differently per platform - see Shopify or WordPress (WooCommerce).

Desktop and mobile

Most layout controls are set twice, once for desktop and once for mobile, shown as a Desktop and a Mobile column. The two are independent: a configurator can be inline on desktop and open in a drawer on mobile.

The available choices are not always the same on both. Where they differ, the tables below list each separately.

Settings tab

This tab controls layout & behaviour of the configurator.

Display & layout

Configurator display

This is the main setting controlling the layout of the configurator. Options depend on the product type.

Standard and Bed:

Snap2:

Inline (sticky)

Inline (sticky) is available for Standard and Bed configurators. It keeps the 3D viewer visible while the customer scrolls through a long inline variant list. This mode is similar to a standard e-commerce PDP.

• On desktop, use a two-column product layout with the gallery/viewer in one column and the variant controls in the other.
• On mobile, use a single-column layout with the gallery/viewer before the variant controls.
• The viewer automatically accounts for a detected fixed or sticky site header. If detection picks the wrong element, set a Header selector on the Global tab.
• A mobile sticky layout does not leave enough space for the product carousel below the viewer. Give the carousel a Mobile carousel target so it can be placed elsewhere on the product page.

The integration repairs common layout wrappers and can fall back to a body-level sticky layer when the storefront theme prevents native sticky positioning. The product-page structure still needs to follow the desktop or mobile layout described above.

Snap2 panel positions

When Snap2 is set to Dialog on desktop, two extra controls appear:

Module position is a desktop-only setting. Both controls are hidden for desktop Inline and for every mobile Snap2 layout.

Image gallery

Controls how your existing product images sit alongside the 3D viewer. The gallery shows image from both the Shopify product and OV25 product.

Variant experience

How customers open, browse and inspect the product's options.

Configure trigger

Controls how many buttons the customer sees to open the configurator.

Variant layout

Chooses how the product's options are presented to the customer. Set separately for desktop and mobile.

Selection details

Chooses what happens when a customer wants a closer look at a selection, such as a fabric swatch, before committing to it.

Starting configuration

Snap2 only. When on, the preview loads a fixed demo configuration, so you can see how the builder looks with modules already placed instead of as an empty canvas.

Hide variant options

A comma-separated list of option ids or names to omit from the customer-facing variant UI, for example fabric, size. Defaults coming from the configurator itself still apply.

Bed sections

Bed only. Two groups of switches, one per bed section - Headboard, Base and Mattress.

Storefront selectors

An "element" is one piece of the OV25 experience that gets placed into your product page: the viewer, the price, the option controls, and so on.

Each element has a toggle to turn it on, and a CSS selector telling OV25 where on your product page it belongs. The selector points at an element already in your theme, and OV25 either replaces it or renders inside it.

Selectors are saved per product type, so the same element can sit in a different place for a Standard and a Bed product.

Behaviour

Fine-tune loading, commerce controls, visibility, and responsive overrides.

The product viewer uses a small left/right rotation on first load by default. To restore the hand hint, leave Hide 3D Drag Indicator off and add gestureHint=true to your integration's productLink. This also disables the automatic rotation. To disable the rotation without enabling the hand hint, add hideJiggle=true instead. These URL options are configured in your integration; see Choose the startup hint for examples.

Style tab

Everything about how the configurator looks. The sections below appear in this order in the panel.

Brand identity

Style groups

The bulk of the tab. Six collapsible groups of visual variables let you match the configurator to your brand without writing any CSS - colours, fonts, spacing, borders and corner radius.

Element styles

Target specific elements with custom CSS properties. Pick a known OV25 element, such as the checkout button, and apply common CSS properties to it, without needing to write a selector yourself.

See the Element Selector Reference for the full list of elements you can target, grouped by area and searchable by common alternative names.

The element list includes stable selectors for commonly customised UI parts, including:

• size variant card grids, names, dimension rows, lines, markers, and values;
• Snap2 module names, module-name tooltips, and module detail titles;
• selected and unselected states through [data-selected="true"] and [data-selected="false"];
• product carousel items, variant cards, option tabs, and module controls that expose data-selected.

Text overrides

Replace any piece of text in the configurator with a custom, dynamic value. Use this for brand tone, regional spelling, or clearer storefront labels.

See the Text Override Reference for the full list of strings you can replace, each with its key and default wording.

Examples:

• change "Configure" to "Customise"
• rename option headings such as "Fabric" to "Choose your fabric"
• rename a fabric from "Cotton" to "Cotton Blouse"

Some text overrides can use conditions. The image below shows the option "Fabric" renamed to "Seat Material", with all other options unaffected.

Some text overrides can also include dynamic values, such as product name, option name, selected variant name, or price. Where these are available they are shown as clickable buttons.

Below is an example of changing the product name from "Windrush Loveseat" to "Range: Windrush / Product: Loveseat".

Custom CSS

Raw CSS that overrides everything above, for rules the style groups and element styles cannot express. You can target any of the selectors listed above.

Global tab

These fields describe your storefront rather than the configurator, so they apply to the whole store and are not set per product.

These are editable while you are editing the store defaults, and read-only once you select a single product.

Saving

Click Save to apply your settings to the storefront. There is no separate publish step - saved settings are live immediately.