Variant selectors conditional logic

Store Design
, , , ,
1

I’m working on something called conditional logic, I’ve got this app called Zoorix Sticky ATC which also shows the shopify variant pickers. But I want to do something like this:

TrendBlend_0-1726128017838.jpeg
TrendBlend_0-1726128017838.jpeg750×1000 71.2 KB

So the first option should be if the customer wants a cord of 1m,2m,3m or no cord

When no cord is picked the next box the customer should see a new box with the options: 3 connectors, usb-c, iOS, Micro.

But when a cord is picked the customers should first get an option to choose a color of the cord and after they should choose if they want any of the above mentions connectors or no connectors (so cord only).

please let me know if you can help me with this. Im using DAWN Theme

2

Hi @TrendBlend Yes this can be done but for achieving this you have 2 options:

  1. Custom Code: You can achieve this with the help of custom code as you need to code the logic and attach that to the variants so that it will work and the cost will appear and works perfectly.
  2. Custom App: You can create a custom app for your store, that will include this functionality and work well with the store.

If you are just searching for the code then it’s not possible to provide just the code as it’s not a common thing, we need to develop it and will need the access of your store as it will take time to complete this functionality.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hi there :blush:
I’m Marton from EasyFlow Product Options. Our app provides conditional logic among Shopify variants, you can easily set up rules to solve the problem above. You can install it on this link, and we’re happy to help you if you get stuck, feel free to contact us on our live chat or me directly at marton.kosdi@gmail.com
Good Luck! :blush:
Marton

4

Hello @sahilsharma9515 ,

I’m using the Zoorix Sticky ATC bar for my add-to-cart button. In this ATC bar, all my variant selectors are visible. NOTE: If you are taking time to look at this issue, set your language to Dutch (in the main menu), because this code is made for Dutch and is not multilingual yet.

URL: https://trendblend.eu/products/magchargee

Code (inside Code Editor of app): Sep 18 4:16 PM - Codeshare

Adjusts the display of variant selectors:

  • If the selected wire option is “Geen Draad” (No Wire), the color selector (kleurSelectWrapper) is hidden, and the connector selector (aansluitingSelectWrapper) remains visible.
  • If the selected wire option is one of the actual wire lengths (e.g., 1m Wire, 2m Wire, 3m Wire), both the color and connector selectors are displayed.

This is working perfectly fine on both desktop and mobile.

Hides or shows certain connector options:

  • The options “Geen Aansluiting” (No Connector) and “Alle Aansluitingen” (All Connectors) should be hidden or shown depending on the selected wire option.

This is working perfectly fine on desktop, but not on mobile. The variant options ‘Alle Aansluitingen’ and ‘Geen Aansluiting’ stay visible on mobile. (See screenshot)

IMG_3203.jpg
IMG_3203.jpg1170×2532 205 KB

The variant options in red should not show. (This works on desktop, but not on mobile). Does anyone have a clue why they are hidden on desktop but not on mobile?

Kind regards, Stef