OV25 Setup for Shopify and WooCommerce

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.

Configurator Layout

Layout settings control how the customer opens and uses the configurator. Desktop and mobile can use different modes.

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.

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.

• 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. Shopify and WooCommerce also provide a Header Selector setting when automatic detection needs an explicit override.
• A mobile sticky layout does not leave enough space for the product carousel below the viewer. Provide a mobile carousel target through the Shopify or WooCommerce integration so the carousel 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.

The header and carousel target selectors are managed by the Shopify or WooCommerce integration. They do not appear in the configurator setup panel.

Snap2 layouts

Snap2 uses a smaller set of supported layouts:

When Dialog is selected for desktop, two additional controls are available:

These position controls apply only to the desktop Dialog layout. They are hidden for desktop Inline and for all mobile Snap2 layouts.

Image Gallery

Gallery settings control how product imagery and the 3D viewer sit together.

Custom injectConfigurator integrations can provide each item in images as either a URL string or a responsive image object. Existing string arrays remain valid.

type ProductImageInput = string | {
  alt?: string;
  urls?: {
    thumbnail?: string;
    small_image?: string;
    image?: string;
    hero?: string;
    original?: string;
  };
};

OV25 selects an appropriate URL for carousel, gallery, main-view, and fullscreen use, falling back through the available sizes when a preferred size is absent.

Branding

Branding settings adjust the high-level visual identity of the OV25 UI.

Behaviour Flags

Behaviour flags turn optional OV25 features on or off.

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.

The element list includes stable selectors for new and 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.

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 immediately apply the settings to your storefront. Moving between the Settings and Style tabs keeps your in-progress draft during the current editor session.

When existing settings are loaded, the editor restores colours generated under :host as well as legacy :root colour variables. Saving again writes the current setup format.