Dependant Options on Product Page

[majicuk]

We run a physical and online industrial and automotive paint supply business. We want to know if there is a way to have dependent product variants so that incompatible options are hidden when it comes to car paints.

As an example, we sell up to three different types of paint as well as touch up pens and aerosol cans in a colour and want the options to adapt as customers make choices.

If a customer clicks on (for example) RAL7016 which is a solid grey colour, we want them to be offered a Touch Up, Aerosol or liquid paint option.

If they choose touch up, it can be gloss, satin or matt.
If they choose Aerosol, the choices are then 1K Aerosol, 2K Aerosol or Basecoat Aerosol.
If they choose Liquid Paint, The first option will be Paint Type which would be 1K, 2K or Basecoat.

1k and 2k can also be gloss, satin or matt, basecoat has no finish option, then no matter what they chose, a final option of volume, 100ml, 1 Litre, 5 Litres etc.

Is there a way to do this so, for example, the finish options only appear if they chose 1k or 2k after aerosol or liquid paint, and the volume final option is skipped if they choose touch up or aerosol.

We could do this with massive numbers of individual products but we would much prefer to just have a single product (the colour) with the appropriate options.

[Steve_TopNewYork]

Hey @majicuk ,

What you’re describing is essentially conditional or dependent product options and unfortunately Shopify’s native variant picker isn’t designed to handle that level of logic. It can hide or disable unavailable variant combinations but it can’t dynamically show or hide entire option groups based on previous selections.

For your workflow, I’d recommend either using an advanced product options app that supports conditional logic or implementing a custom solution on your product page. That would allow you to create a flow like:

Select RAL7016 → Choose Touch Up, Aerosol, or Liquid Paint.
If Touch Up is selected, show only Gloss, Satin, or Matt, then finish.
If Aerosol is selected, show 1K, 2K, or Basecoat. Only show Finish for 1K/2K, and skip it for Basecoat.
If Liquid Paint is selected, follow the same logic and only display the Volume option where it’s relevant.

This approach lets you keep one product per color instead of creating a large number of individual products, while providing customers with a much cleaner and more intuitive purchasing experience.

Thank You !

[PaulNewton]

Hi @majicuk This is possible, broadly it’s called “Linked variant options” and it is an advanced theme customization whose implementation is beyond the scope of the forums.

Options

• advanced theme customization to make the options conditional, reach out to me for customization services to get this working right; just click profile pic for info.
• if you must DIY and have a vintage theme , know how to code, and the time to burn digging through the forums and internet archives then research ‘linked variant options’
• if on a Plus plan probably should be using combined listings and advanced theme customizations
• if not on plus the alternate is a flat product data structure and advanced theme customization; can be quite involved if things like ERP are involved
• spend money every month on any of the numerous product-option apps you can search for in the shopify app store

If you need this setup or consulting reach out to me.

@majicuk

incompatible options

In some cases like if your using dropdowns there’s also the approach of just putting the compatable product names IN the list of names.

Generally most themes should disable the cart buttons for non existent options.
If the combos do exist for some reason at minimum give them zero inventory; there’s also stuff like giving those variants a million dollar price but doesn’t fit a case like this.

[WebsiteDeveloper]

Hi,

Yes, this can be built, but not cleanly with Shopify’s native variants alone. Shopify currently allows a maximum of three product options per product, while your setup needs at least four conditional levels: format, paint type, finish and volume.

The best structure would be:

1. Keep one storefront product for each colour, such as RAL7016.

2. Add a conditional product configurator or product-options app.

3. First ask the customer to choose:

   • Touch Up
   • Aerosol
   • Liquid Paint

4. Then show only the relevant options:

   • Touch Up: finish only
   • Aerosol: aerosol type, then finish only where applicable
   • Liquid Paint: paint type, then finish for 1K/2K, followed by volume

5. Map every valid final selection to a real Shopify variant, SKU or separate hidden product so the correct price, stock and fulfilment information are used.

Avoid using only line-item properties for everything. They can record custom selections, but they do not independently manage variant-level pricing, inventory or SKUs.

A simpler alternative is to create three products per colour, Touch Up, Aerosol and Liquid Paint then link them visually. Shopify Plus stores can also use Combined Listings to present separate products as one listing, but that feature is limited to Plus and enterprise plans.

For your catalogue, I would recommend the conditional configurator approach because it gives customers one clear step-by-step journey without showing incompatible choices.

Thank You!

[devcoders]

Hi @majicuk

Yes, this is possible, but it can’t be achieved with Shopify’s native variant options alone. Shopify variants are static and don’t support conditional or dependent option logic out of the box.

For your use case, you have two good approaches:

1. Use a product options app (such as Easify Product Options or similar) that supports conditional logic. You can show or hide options based on previous selections—for example:

   • Show Gloss / Satin / Matt only when 1K or 2K is selected.

   • Hide the Finish option when Basecoat is selected.

   • Skip the Volume option when Touch Up or Aerosol is chosen.

2. Build a custom solution using Shopify theme customization (Liquid + JavaScript). This gives you complete control over the option flow while keeping a single product page, although it requires custom development.

Based on your requirements, I’d recommend using a product options app first, as it provides the conditional logic you need without creating hundreds of product variants.

If you can share a screenshot, mockup, or reference of the design you have in mind, I can review it and let you know whether it can be achieved with custom code or recommend the best solution for your requirements.

Best regards,
Devcoder

[Ploqo]

This is doable natively. No app, no monthly fee.

Same product, same theme, same click:

Shopify’s variant picker does not combinations that do not exist. It just crosses them .

Step 1. Fold your four levels into three options

Shopify allows maximum 3 options per product, and up to 2048 variants. You have four levels, so merge the two:

• Product: Touch Up Pen, 1K Aerosol, 2K Aerosol, Basecoat Aerosol, 1K Paint, 2K Paint, Basecoat Paint
• Finish: Gloss, Satin, Matt, Basecoat
• Size: 12 ml, 400 ml, 100 ml, 1 L, 5 L

=> Then create only the combinations that actually exist. Basecoat gets a single Finish value called Basecoat, so it can never offer Gloss or Satin. One colour comes out at 31 variants, not 140.

Fastest way to build it: Go to Products > Import a CSV with Option1/Option2/Option3 columns, one row per real variant. Then duplicate that product for each RAL code.

Step 2. Add one Custom Liquid block

1. Online Store, > Themes, > Customize.
2. Open a product page.
3. Product information, >Add block, > Custom Liquid.
4. Paste this, then Save.

<script>
  (() => {
    const HANDLE = {{ product.handle | json }};
    let combos = null;

    const groups = () => [...document.querySelectorAll('variant-selects .product-form__input')];

    const chosenIn = (g) => {
      const r = g.querySelector('input[type=radio]:checked');
      if (r) return r.value;
      const s = g.querySelector('select');
      return s ? s.value : null;
    };

    const show = (el, on) => {
      if (el) el.style.display = on ? '' : 'none';
    };

    function apply() {
      if (!combos) return;
      const gs = groups();
      if (!gs.length) return;
      const chosen = gs.map(chosenIn);

      gs.forEach((g, i) => {
        const ok = new Set(
          combos.filter((o) => chosen.slice(0, i).every((c, j) => o[j] === c)).map((o) => o[i])
        );

        g.querySelectorAll('input[type=radio]').forEach((inp) => {
          const on = ok.has(inp.value);
          show(inp, on);
          show(g.querySelector('label[for="' + CSS.escape(inp.id) + '"]'), on);
        });
        g.querySelectorAll('select option').forEach((o) => {
          o.hidden = !ok.has(o.value);
        });

        show(g, ok.size > 1);

        if (chosen[i] !== null && !ok.has(chosen[i]) && ok.size) {
          const next = [...ok][0];
          const inp = [...g.querySelectorAll('input[type=radio]')].find((x) => x.value === next);
          if (inp) return inp.click();
          const s = g.querySelector('select');
          if (s) {
            s.value = next;
            s.dispatchEvent(new Event('change', { bubbles: true }));
          }
        }
      });
    }

    fetch('/products/' + HANDLE + '.js')
      .then((r) => r.json())
      .then((p) => {
        combos = p.variants.map((v) => v.options);
        apply();
      });

    new MutationObserver(apply).observe(document.body, { childList: true, subtree: true });
    document.addEventListener('change', () => setTimeout(apply, 0));
  })();
</script>

What you get

• Touch Up Pen: Finish is asked, Size never appears
• Basecoat Aerosol: Finish and Size both disappear, one click and it is buyable
• 1K Paint or 2K Paint: Finish and Size both appear
• Values that cannot go together are hidden, not crossed out

Note: if you truely need > 3 options, use Combined Listings app (for shopify Plus) or a product options app.

[Easify-Jennifer]

Hi @majicuk

From what I understand, you’d like to keep each paint color as a single Shopify product while creating a step-by-step selection process where the available options automatically change based on the customer’s previous choices. This way, you can avoid creating hundreds or even thousands of variants or separate products for every possible combination. In this case, you might want to check out Easify Custom Product Options

I’ve created a similar setup to help demonstrate how it works.

• This is the result:

• This is the app setup:

The setup is quite straightforward. First, create your options such as Product Type, Paint Type, Aerosol Type, Finish, and Volume.

Then simply go to Advanced Settings and enable Conditional Logic. From there, you can create rules so that each option only appears when the customer selects the relevant previous option. This keeps the buying process much cleaner, since customers only see the choices that are relevant to them at each step.

What I like about this approach is that customers aren’t overwhelmed by every possible option at once, while you only need to manage a single product for each paint color instead of maintaining hundreds or thousands of variants or separate products. It’s also very easy to update or expand the selection flow later by simply adjusting your Conditional Logic rules—no coding required.

If you need any help setting it up, Easify’s 24/7 live chat support team is always happy to help

[majicuk]

Thanks everyone for the feedback - I did a butchered version where it did this just by having things out of stock but it wasn’t as pretty or as intuitive as I’d like - going to have a go with some of these suggestions and see what works for us.

One question, if i did use one of these advanced setups like Easify, it is going to mess up the other items which haven’t been set up in it or do I need to go through and re-code every existing product with variations?

Again, thanks for all the replies

[clawmama]

Option apps like Easify are opt-in per product, so nothing changes globally. You attach an option set to the products you choose, and every product without one keeps the normal variant picker. No re-coding of existing products needed.

Two things worth checking on the products you do convert: the app takes over the add-to-cart form on that product, so convert one and test before rolling out; and app options usually don’t become real variants with their own SKU and stock, which matters if you track inventory per combination.

[majicuk]

Sounds ideal then, thanks again - inventory isn’t tracked on the store as we have a very busy retail side so keeping everything up to date would be next to impossible

[Priyasha]

Hi there!

Since you don’t track inventory, this is easier for you, the usual downside of options apps, where the selections do not become real variants with stock counts - doesn’t affect your setup, so something like Easify will work fine.

Quick suggestion : set it up on one colour first and test the full flow before rolling out, then copy that option set to your other colours. Your existing products stay untouched - the app only affects the ones you attach it to.

If you’d rather skip the monthly fee and don’t mind a little code, the custom Liquid approach above also works. But for no-code ease, the app route is your smoothest bet.

Hope this helps

[majicuk]

Tried easify, loved it, was about to buy the pro version then came up against an issue - while it lets you change price based on options, it doesn’t seem to allow you to specify weights in the options - a touch-up pen is obviously very different to 5 Litres of paint when it comes to weight. Does anyone know if any of these apps which also allow you to add to the price AND weight of a product based on options selected?

[ai-theme-code-editor]

HI @majicuk

What you’re describing is often called dependent (or conditional product options, and Shopify doesn’t support that level of option logic natively

With standard variants, all option combinations need to exist in advance, so Shopify can’t dynamically hide or skip options based on previous selections. In your example, the available options would ideally change depending on whether the customer selects Touch Up, Aerosol, or Liquid Paint, but that requires conditional logic.

For this type of workflow, merchants typically use a product options app that supports conditional fields and option dependencies. These apps can show or hide options based on earlier selections, making the buying experience much cleaner without having to create hundreds or thousands of unnecessary variant combinations.

Trying to model every possible combination as Shopify variants alone would quickly become difficult to manage, especially given Shopify’s variant limits. A conditional options solution is generally the more scalable approach for products like automotive paints with multiple dependent choices.

[AllHub]

Hi, if dynamic weight is the only blocker, it may be worth looking at the shipping app rather than the options app, some shipping solutions can use the selected options to calculate rates, even if the product weight itself doesn’t change.

[PaulNewton]

@majicuk

if i did use one of these advanced setups like Easify, it is going to mess up the other items

Depends on the app and then how you might configure it.
You just have to do the work and test it.
Keeping in mind even if it doesn’t affect other items you are locking the items being used into a proprietary system with a recurring fee.

[Custom-Cursor]

Hey @majicuk

hope you’re doing well!

yes, this is possible with conditional/dependent product options. Apps like Easify Product Options or SC Product Options can show/hide options based on previous selections, so customer only see compatible choices.

[Parselab_Melissa]

@majicuk

We run a physical and online industrial and automotive paint supply business. We want to know if there is a way to have dependent product variants so that incompatible options are hidden when it comes to car paints.

As an example, we sell up to three different types of paint as well as touch up pens and aerosol cans in a colour and want the options to adapt as customers make choices.

If a customer clicks on (for example) RAL7016 which is a solid grey colour, we want them to be offered a Touch Up, Aerosol or liquid paint option.

If they choose touch up, it can be gloss, satin or matt.
If they choose Aerosol, the choices are then 1K Aerosol, 2K Aerosol or Basecoat Aerosol.
If they choose Liquid Paint, The first option will be Paint Type which would be 1K, 2K or Basecoat.

1k and 2k can also be gloss, satin or matt, basecoat has no finish option, then no matter what they chose, a final option of volume, 100ml, 1 Litre, 5 Litres etc.

Is there a way to do this so, for example, the finish options only appear if they chose 1k or 2k after aerosol or liquid paint, and the volume final option is skipped if they choose touch up or aerosol.

We could do this with massive numbers of individual products but we would much prefer to just have a single product (the colour) with the appropriate options.

Hi @majicuk,

If you want to keep each paint color as a single product while showing only the options that apply to the customer’s previous selections, you can look at the Product Option feature in Inkybay – Product Personalizer.

Inkybay allows you to create parent and child options with conditional logic. For example, you could have Color → Product Type → Paint Type → Finish → Volume. When a customer selects Touch Up, you can show only the relevant finish options; selecting Aerosol can show 1K, 2K, or Basecoat Aerosol; and selecting Liquid Paint can display the appropriate paint types and finishes. Options that don’t apply to the selected combination can remain hidden, so customers only see the choices relevant to their selection.

You can also create the final options, such as volume, and add different pricing where required. Inkybay supports dropdowns, swatches, radio buttons, checkboxes, and other option types, so you can structure the product page without creating hundreds of separate Shopify variants. Here is a similar example of a T-shirt with conditional option selection-

This setup can be created without coding, and Inkybay offers a 21-day free trial if you want to test whether the conditional options fit your paint products.

[majicuk]

Got this almost perfect using the first paid tier of the Easify Options but there is one thing which we would love to improve.

We have set the prices for every option in Easify and set the base product price at zero but it means that the price shown before the options are selected is £0.00 GBP (which is technically correct) but we’re worried that this might make people think it is out of stock or unavailable. Is there a way to replace the 0.00 with a fixed text like “From £7.00 GBP depending on options” but have it show the correct price once the options are selected?

I used to do a little programming 30 years ago and am not familiar yet with this system (I’ll probably end up learning it now!) but what I effectively want is:

if $price=0.00 then “From £7.00 depending on options” else $price

I fully understand that $price is something I just made up for demonstration purposes but I wanted to show the kind of thing I was thinking of.

Ideally this would take effect everywhere, from the collection listings, featured, product page etc. It wouldn’t need to just apply to the mixed paint as I don’t see a time where any other fixed price product would be priced at zero, but if it could be dependant on a product tag we would easily add that tag only to the mixed paint prices.

The site is majicuk.com and the test product I’m trying to get this working on is at Test Product - DO NOT ORDER, thankyou – majic.

Any help would be appreciated.