Show Variant options

[TrendBlend]

Hello, I got this product which is deliverable with a cable of which you can choose a size, color and adapter. But I got an issue with making my variant selectors look nice.

i only want to show the variant selector ‘Aansluiting’ if a customer says they want NO CABLE in the first option, so I don’t want to show the option ‘kleur’ which means color for the cable if it is not selected. How would I do this? Also ‘Geen aansluiting’ should not be available if the customer picked NO CABLE.

I hope this is understandable. I’m using DAWN THEME.

Kind regards,

Stef

[heddykhalifa]

Hey TrendBlend, 

Heddy from Gameball here. 

If you want certain variants to show up only when a specific option is selected in the previous variant, then that’s what’s called a "conditional variant" setup.

Shopify doesn’t have this feature built in natively, but there are a couple of ways to approach it. One way would be to use a Shopify app that allows for conditional logic in product options—apps like "Infinite Options" or "Product Options by Bold" can help with that. These apps give you the ability to make certain options only visible when a specific choice is made, so the customer’s selections are more streamlined.

If you're comfortable with code, you could also custom-build this functionality using JavaScript. You’d essentially set up a script that listens for changes in the first variant and dynamically updates the next set of options based on that selection. It takes a bit of coding, but it's possible.

So, the easiest solution is definitely an app for most people, but if you’re more hands-on with development, a custom script could do the trick.

[TrendBlend]

Hello @heddykhalifa,

can you maybe help me with an example of how you can do this using JavaScript. I have a product which can be bought in different ways.

You can buy just a cable (In different colors)

You can buy a cable with connections (The cable can be red,black,purple) (Either 1 out of 3 connections or all 3 connections)

You can also buy just the connections (ALL 3 or seperate)

So the cable can be in different colors, but the connections can't. And the cable is available in 3 different sizes (1m,2m,3m).

Hope you can do this for me. I'm using an add to cart footer app so that is why an app for variant setup is difficult. My store URL: MagCharge – TrendBlend

Kind regards,

Stef

[EasyFlow_PO_App]

Hi Stef,
I'm Marton from EasyFlow Product Options. You can easily do this with our app that you can install on this link. After installing it, this is what you should do:
1. Create a new option set for your product
2. Within the option set, create a new option (with a type of option you like, eg. radio button) called "Grootte". Then add the needed values (1m, 2m, 3m, No cable).
3. Create another option called "Kleur" with the needed values (Zwart, Rood, Paars)
4. Then another one for "Aansluiting" with the values (Alle, USB-C, Micro, iOs, Geen)
5. Then inside the option set create a rule, where you select if "Grottee" is "No cable", then show "Aanslauiting" with 4 values (without the Geen), and hide "Kleur" with all values:


Hope this helps. Feel free to reach out anytime on our live chat or directly on email to me at marton.kosdi@gmail.com.

Good Luck!😊
Marton

[TrendBlend]

Hello @EasyFlow_PO_App ,

I tried using your app but it just showed up on my product page instead of the sticky add to cart widget on my website: https://trendblend.eu/products/magnetic-cable-for-micro-usb-type-c-and-ios-charger-fast-charging

if you guys can help me with using your variant selector in the add to cart widget bar I will totally use it. But is this possible?

kind regards,

stef

[EasyFlow_PO_App]

Hi Stef,

Sorry, that is not possible, only on product page.

Best of luck!

Marton