Variants - Link product options

TyW
Community Manager
Community Manager
404 39 1175

 


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 56 (56)
PublicApps
Shopify Partner
141 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
292 17 20

@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
11 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
11 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
11 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
11 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
11 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
11 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
11 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"