Re: Variants - Link product options

Variants - Link product options

TyW
Shopify Staff (Retired)
463 71 1239

 


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)

VinnyG
Tourist
3 0 1

I am very new to this but i followed the instructions exactly as posted and it is still offering options and showing them as unavailable.  I am using the venture theme if that matters.  Thank you in advance for your assistance.

landl
New Member
5 0 0

Did you ever figure this out?

Seahawksean
Tourist
13 0 0

This tutorial has been rendered moot now that Shopify ONLY offers sectioned themes.  Venture theme being one of them.  But even if you have an older unsectioned one, the author has a note at the top of this page indicating that it won't even work in that. 

Bummer as this has been the closest thing I've found to help me add this exact functionality after Googling for 5 hours. 

JayCDD
Tourist
6 0 6

Has anyone been able to find a workaround with this for Themes where it doesn't work? Im currently using the Warehouse theme from Maestroo and it does not work with square icons or drop down list. Please help lol

circular78
Tourist
11 0 2

@JayCDD wrote:

Has anyone been able to find a workaround with this for Themes where it doesn't work? Im currently using the Warehouse theme from Maestroo and it does not work with square icons or drop down list. Please help lol


Hi ,

 

I am also looking for answers. Using the same Warehouse theme  as @JayCDD . Hopefully , somebody can help.

cristian_c
Tourist
6 0 11

Hey guys,

I am looking for a solution to this problem for Debut theme.

I really believe this should be solved by Shopify already, i have seen many post on this same subject, and it simply makes no sense to display options that are not available.

ndambrosi
Excursionist
14 0 10

I'm searching for this solution for the Debut theme.  Has anyone had any luck or found an app they can recommend to accomplish this? 

Padster
Explorer
49 5 14

Still searching.
How u getting on?

:Paddy

 

Padster
Explorer
49 5 14
ndambrosi
Excursionist
14 0 10

Not yet.   I might check it out and see how it works.

 

For now, I've gone to my translations and I've changed "Unavailable" to "Invalid product combination" as well as labeling the options a little more clearly so the user can understand which sizes in Menu 2 apply to each of the selections from Menu 1.  

samnamiam
Visitor
1 0 6

This updated code made it work for debut theme.

https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61

ndambrosi
Excursionist
14 0 10

Yes, this code is working for me!  Thanks so much!

Padster
Explorer
49 5 14

That one didn't work for me...here's a good video talking u thru it tho for any 1  that wants 2 know - https://www.youtube.com/watch?v=vspWDu_POYA.

Going to try a couple other options today....not sure if it some additional code I can see in my product.liquid ...anyone any ideas?

Any Shopify experts?? ; ) ; ) @TyW 

 

{% comment %}

The contents of the product.liquid template can be found in /sections/product-template/
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}

<script>
window.theme = window.theme || {};
window.theme.strings = window.theme.strings || {};

// Override default values of theme.strings for each template.
// Values are used by JavaScript only; Liquid must be updated separately
window.theme.strings.addToCart = {{ 'products.product.add_to_cart' | t | json }};
window.theme.strings.soldOut = {{ 'products.product.sold_out' | t | json }};
window.theme.strings.unavailable = {{ 'products.product.unavailable' | t | json }};
</script>

 

 

 

Padster
Explorer
49 5 14

Hoooraaaaay!!! I've dun it...[applause]

 

So i followed the youtube above then did wot fella described (im using the narrative theme FYI):

 

"For those of you who are having issues with the default variant not loading and requiring the user to select a variant before the script fires:

This is what worked for me on the Shopify Debut Theme.

Find the following code:
Shopify.linkOptionSelectors({{ product | json }});

It is located in the following if statement

{% if product.available and product.options.size > 1 %}
...
Shopify.linkOptionSelectors({{ product | json }});
...
{% endif %}

Simply move it directly outside of the if statement:

{% if product.available and product.options.size > 1 %}
...
// Line removed from here
...
{% endif %}

// Line added here
Shopify.linkOptionSelectors({{ product | json }});

 

& badabing badaboh! 
SKILLz, cash monies dollar dollar bills coming my way (quickly converted to $btc & $doge ; )

Goodluck : P

ps. shopify community is changing some of the html 4 sum reason so dont copy from here...checkout the comments at https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61 post Mar 14, 2018

Kishori
Shopify Partner
1 0 0

Thank you, this amazingly worked for me in debut theme.

Hemfarg
Visitor
1 0 0

This is awesome, huge thanks

landl
New Member
5 0 0

Have you managed to get that to work? 

JayCDD
Tourist
6 0 6

I ended up biting the bullet and getting this app  - https://apps.shopify.com/variant-swatch-king

Works exactly as intended and very easy to use. Setup didn't integrate completely with theme but Devs were super fast about getting this fixed and working properly.

kachadidit
Visitor
1 0 0

Worked for me in debut theme, thank you!

Jezzsterboy
Visitor
1 0 0

YES!!!!!! THIS CODE works for me also!!!!! 

Oh, I am using the DEBUT theme.

hank you SO, SOOOOOO MUCH!!!!! 🙂 

Jezz

JonnoW
Visitor
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!

wallyfbaby
Visitor
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!

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

 

YahyaYavuz
Visitor
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
Shopify Partner
5 0 2

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
39 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
39 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
39 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"

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 15

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?

Joel-at-digish
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 @Joel-at-digish 

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

Would appreciate it a lot!

 

Best,

Marlon