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:
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.
linked-options
.theme.liquid
, and click it to open it in the code editor.</body>
tag, paste the following code:{% render 'linked-options' %}
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
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?
I got to work for products on the homepage by including
{% render 'linked-options' %}
on home-product.liquid
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.
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!
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
YES!!!!!! THIS CODE works for me also!!!!!
Oh, I am using the DEBUT theme.
hank you SO, SOOOOOO MUCH!!!!! 🙂
Jezz
Still having the issue that I need to select another option to make the script running. Are there any solutions to fix that?
Hi there,
Is there now any available solution for sectioned themes?
Thanks,
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.
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.
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
I had the same issue, I hired the job with a shopify expert and they fixed it for me. Check them out: Okas Concepts
Hi @JJBENZ
Are you able to share your solution with the rest of the world?
Would appreciate it a lot!
Best,
Marlon
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!
User | RANK |
---|---|
210 | |
54 | |
50 | |
27 | |
22 |