Variants - Link product options

TyW
Community Manager
Community Manager
435 50 1183

 


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 60 (60)
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"

bsambell
Visitor
1 0 0

Is there a solution for those of us that use Venture theme? Please help!

Padster
Explorer
49 5 14

Hi there,

 

Unfortunately if doesnt seem to be working on the narrative theme...any ideas!? Any help would be greatly appreciated.

& for everybody else reading this post, theres a great guy on utube outlining this issue & how to make the changes https://www.youtube.com/watch?v=vspWDu_POYA.

 

Regards,

:Paddy

@Padster 

 

 

jpeltier78
Visitor
1 0 0

Performed exactly as expected. Thank you!

danielagsb
Explorer
78 0 17

Hi! has anyone managed to make it work for the boundless theme? Thank you

Padster
Explorer
49 5 14

https://community.shopify.com/c/Shopify-Design/Linking-product-Options-and-Hiding-Sold-Out-Variants-...

 

may be this will help. Something to do with dropdowsn vs swatches etc...

 

Goodluck 😛

Darren_Murtha
Shopify Partner
4 0 1

I got this to partially work with a 3rd party theme that uses buttons instead of dropdowns.  In the first option, all the buttons change their color to indicate they have been clicked but if I changes to any other value in the first option, the buttons don't light up on the 2nd and 3rd options.   Where should I look? Anyone else encounter this or know what to change?

RobinH
New Member
4 0 0

Got it to work. So that's great, however only for the product pages. Does anyone have an idea how to make it work for products on the homepage?

RobinH
New Member
4 0 0

I got to work for products on the homepage by including

{% render 'linked-options' %}

 

on  home-product.liquid

freedivebird
Tourist
8 0 14

Took me a good few hours to figure out why the code is not working for shops with multiple locale!!

If you are operating a shop front with multiple locales, replace line 92 in linked-options.liquid

  var $addToCartForm = $('form[action="/cart/add"]');

with

  var $addToCartForm = $('form[action$="/cart/add"]');

 And voila!

erialeduab
Visitor
1 0 1

I thought I'd post the updated solution on this thread to save everyone some time.

A commentor (Jonathon Moore) on the original GitHub posted a modified code which now works with Shopify's new sectioned themes. It's works perfectly, you just follow the same instructions as the original post. 

Also, according to Coding with Jan, he provides a slightly altered version of the render so it only applies to the Product Pages:

{% if template contains 'product' %}
  {% render 'linked-options' %}
 {% endif %}

 

(H/T to 

NamcoPoolAdmin
Visitor
1 0 0

This needs more updoots

eloisegasper
Visitor
1 0 0

This works! Thank you so much 

fblome
Excursionist
27 0 9

Still having the issue that I need to select another option to make the script running. Are there any solutions to fix that?

Jowi_Benz
Shopify Partner
3 0 1

I had the same issue, I hired the job with a shopify expert and they fixed it for me. Check them out: Okas Concepts

MHDB
Tourist
3 0 8

Hi @Jowi_Benz 

Are you able to share your solution with the rest of the world?

Would appreciate it a lot!

 

Best,

Marlon

Jowi_Benz
Shopify Partner
3 0 1

Hey @MHDB I don't know the final solution. As I mentioned before, I hired the job with Okas Concepts. I tried it myself following this video: https://youtu.be/vspWDu_POYA and it only worked after selecting 1st and 2nd Options on a Variant and then going back to select the options again, like having to do that in order for the snippet inserted (see video) activates and start working. Apparently for some themes it works right from the get go, but for others you need to tweak a little. The guys at Okas Concepts did it in less than 2 days. Probably is nothing complicated but you gotta have some good coding knowledge and understanding of Themes structures.

Wish you luck! 

PublicApps
Shopify Partner
146 5 31

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
295 17 27

@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
Jowi_Benz
Shopify Partner
3 0 1

Hi there,

Is there now any available solution for sectioned themes? 

Thanks,

LiamR
Visitor
1 0 1

Hi there, I can get this to work on my product pages. But if I use a "featured product" block on another page, it doesn't work.

I've tried adding the {% render 'linked-options' %} tag into the includ-featured-product.liquid snippet but still doesn't seem to be working. Not sure if I'm pasting it in the wrong section or if it just flat out won't work for this type of use.

MHDB
Tourist
3 0 8

I have the same problem with my Narrative Theme. The code works fine on the product page, but not in the featured product section. Although these two sections get the dropdown fields from the same file "product-unit-price.liquid".

Unfortunately, I could not find out what is different with product-template.liquid.

I hope this topic is still relevant and there is a solution.

@TyW  Are you able to provide us with further information?

Best,
MHDB

CherryChung
Excursionist
23 0 7

Thanks, it worked perfect for Modular theme.

piranha
New Member
7 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.

Roar_Sweden
Excursionist
31 0 10

Anyone got this to work with Prestige 7.X.X (2.0 theme) and if so, could you maybe show me where to put the code? It is really hard to find a good app for this and making a app from scratch is really costly. 😞