Variants - Link product options

TyW
Community Manager
Community Manager
413 40 1108

 


Update secondary menus in line with the current selection, to avoid showing unavailable combinations of options when a customer is choosing from multiple menus. In short, you don't want your customers to encounter this:

 

link-01.jpg


When your store's visitors make a selection in the first drop-down, you want the values in the second drop-down right below to be updated to list only those values that are available in combination with their first selection.

 

If a product has three options, you want the same to happen when one selects a value in the second drop-down. You want the values in the third drop-down to be updated to only list values that are available in combination with the two selections made above.

 

This works from top to bottom. Think of the typical "select a country then select a town" scenario. Selecting a country in the first country element updates the second town element to only contain towns found in that country.

 

Shopify does not give you linked options out of the box. It makes all choices in all drop-downs available. For example, all possible sizes will be listed in your Size drop-down and all colors will be listed in your Color drop-down, regardless what combinations exist or are in stock.

 

Linked options can be added to your theme in two steps.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Under Snippets, click the link Add a new snippet.
  4. Name your new snippet linked-options.

    link-02.png

  5. In your new snippet file, paste this code hosted on GitHub.
  6. Click Save.
  7. Under Layout, locate the file theme.liquid, and click it to open it in the code editor.
  8. Near the end of the file, right before the closing </body> tag, paste the following code:

    {% render 'linked-options' %}

    link-03.png

  9. Click Save.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 58 (58)
PublicApps
Shopify Partner
142 5 34

The solution differs for different themes/stores. Also, when themes get updated, the solution may get outdated, because it makes assumptions about the store's code. Anyone with a little web dev experience, would be able to help you with this though.

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

AvidBrio
Shopify Expert
293 17 21

@PublicApps   this solution work with many themes we implemented  may be all other help 

@MHDB  @Seahawksean 
https://community.shopify.com/c/Technical-Q-A/how-to-show-the-linked-option-on-Minimal-theme/m-p/103...

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
wallyfbaby
New Member
2 0 1

Hi! Did you ever figure this out? I'm also on Debut and having the same problem. It really ruins the user experience when stock is low because they have to click ALL the options just to find a size/colour in stock. Shopify, please fix this 🙂 Thank you!

CherryChung
Excursionist
23 0 7

Thanks, it worked perfect for Modular theme.

markboehlen
Shopify Partner
12 0 1

I have updated the script and added a switch for showing sold out.

 

https://gist.github.com/kyleboehlen/fd4ce2f4d24a16b74b1e4a30c914f32d

 

JonnoW
New Member
1 0 0

Thanks for this, that worked for me on Paralax 5.0 for Shop 2.0.

markboehlen
Shopify Partner
12 0 1

Great to know!

YahyaYavuz
New Member
1 0 0

Hey sir,

 

all of this examples its doesnt works in my theme.

Have you any snippet for this Theme: Prestige OS2.0


Thank you so much. Please help me sir. 🙂

markboehlen
Shopify Partner
12 0 1

I do not have that theme.

 

Does the theme use drop downs for product variants?

billium
Tourist
4 0 1

Has anyone refactored this to work on pills vs dropdowns?  

 

I have been fighting it for a few hours now without success.

 

I thought it would be easy given the existing working code but it is not since each single select(x) is replaced by a group of inputs.

 

markboehlen
Shopify Partner
12 0 1

Hopefully you can get it figured out.

 

I have pushed this issue with Shopify - I believe they need to fix this somehow on the back end.

 

I have looked at the product liquid and haven't yet had the time to see if it could be fixed there.  Even if some of the work could be done there, you would still need some java work.

PascalR
Shopify Partner
34 0 6

Hello, since we have uptaded our theme turbo portland to shopify 2.0 we have a problem. We use langshop to traduce the website in 5 languages. Before, the unavailable combinations were hiding in all languages. Since the update, we added the code procedure and now it is only good for the basic language french. Can you help us

Regards

Pascal

markboehlen
Shopify Partner
12 0 1

Pascal,

My expertise in Java is nearly zero, I had help from others on this.

However I would be willing to try and help or at least point you in the right direction.

 

Mark

PascalR
Shopify Partner
34 0 6
Thanks a lot Mark
markboehlen
Shopify Partner
12 0 1

Pascal,

If it works fine in French but not the other languages, I am guessing that the container ID names (HTML) are changing.  If this is true, then you need to add some logic to get the variable "selectionobject" value to change.  (Line 21)

var selectionobject = '.form__input--select'

PascalR
Shopify Partner
34 0 6
Hello, where i can find the container id names ?
Regards
Pascal
markboehlen
Shopify Partner
12 0 1

I am not familiar with your theme, however in the theme I am using it is in product-form.liquid.  See our comments on line 19:

"Set up some variables that identify the selection, in this theme it is located in product-form.liquid line 98"

piranha
New Member
6 0 0

When having 2 dropdown menus for 2 variant options, I go ahead and change one option and then it says "unavailable" even though that variant-combination exists. Then I go ahead and change the variant option and it goes to "available". Then I switch back to the old variant options which showed "unavailable" which now shows as "available".

markboehlen
Shopify Partner
12 0 1

I am not exactly sure what would cause that.  Thinking on how the drops are populated, I would look at the order of your Variants and make sure the first ones are available - meaning the first ones that the system picks on initial load.