Shopify themes, liquid, logos, and UX
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
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.
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
Is there a solution for those of us that use Venture theme? Please help!
@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.
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.
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
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?
Have u tried this 1? https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61
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.
This updated code made it work for debut theme.
https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61
Yes, this code is working for me! Thanks so much!
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>
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
Hi! has anyone managed to make it work for the boundless theme? Thank you
may be this will help. Something to do with dropdowsn vs swatches etc...
Goodluck 😛
Thank you, this amazingly worked for me in debut theme.
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?
User | RANK |
---|---|
227 | |
153 | |
60 | |
55 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023