VO Product Options issues

Technical Q&A
1

Hi,

Having some issues and was wondering if anyone else had these or if there are any solutions.

Using the VO Product Options plugin on the prestige theme.

  1. Seem to have flickering on the page when it loads. Swatches switch over to drop boxes. It looks like the theme variant selector loads first and then the VO Product Options app after. Any way to disable the theme variant selector so that this doesn’t happen? Here is an example page - Arteflame XXL 40" Flat Top Charcoal Grill - Classic Storage Base .

  2. I have a virtual options using check boxes for several products. Works great, but some lines there are multiple check boxes. Is there a way to add a line break after each option so they are on separate lines? Here is an example - Meadow Creek TS1000 Offset Tank Smoker and Trailer

Any help is much appreciated.

2

Flickering during page load often occurs when the theme’s variant selector loads before the VO Product Options script. You can reduce the flicker by hiding the theme’s default variant selector until the app initializes, or by moving critical CSS inline and deferring non‑critical scripts. In the Prestige theme you can often disable or hide the built‑in variant selector via CSS so the VO Product Options swatches load cleanly. Placing the VO Product Options script at the bottom of theme.liquid or enabling any “optimize loading” setting in the app can also help.

For the checkbox layout, the app tends to render all options inline. You can use CSS to force each checkbox onto its own line, e.g. targeting the option container and setting display: block or adding <br> after each input. The app developer can provide the correct selector for your theme if you’re unsure. In general, adding a custom CSS rule or asking the VO Product Options support team should resolve both issues.

3

The following code will hide your theme default variant selector options. The app will then output its own ones.

Maybe you can simply hide the “Variant picker” block in the Product info section – if this does not break anything it would be a better option.

[data-block-type="variant-picker"] {
  display: none;
}

The code can go into “Product info” section “Custom CSS” setting.

The following code should make your checkboxes one per row:

.bcpo-checkboxes > label {
  display: block !important;
}

I’d try it in section “Custom CSS” first, but it may be refused – use “Theme settings”=> “Custom CSS” then.

Often, apps has their own setting for Custom CSS.

Screenshot 2025-10-22 at 1.34.35 PM
Screenshot 2025-10-22 at 1.34.35 PM1015×536 128 KB

4

Hi,

This worked great, much appreciated. Last item is that the SKU line flickers. Any idea what is happening here?

5

I do not see SKU flickering. Any specifics?

6

If you look at this page - Arteflame XXL 40" Flat Top Charcoal Grill - High Euro Base

It goes from “SKU: AF40EUROHB-S” to just “AF40EUROHB-S”. I am not sure what is happening and I dont really have a preference which way it is, I just dont like that it changes. Maybe I am being a little nit picky lol.

7

Ah, I see.
When App loads, it update the relevant elements on the page, including the SKU.

Looks like I’ve looked at products where it does not happen.

If you want to avoid this, I’d suggest to amend theme code to match how App shows this line, basically, remove the "SKU: " part.

It may be not necessary to edit theme code, but rather “Edit default content” (theme languages) – this really depends on how theme does it.

8

Thanks for all your help!