All things Shopify and commerce
Hello everyone,
I am looking for a way to hide or show specific variant based on selected language.
Ex: i am selling personalized items with text. I would like to be able to show only the french option to french customers and only english options to english customers. I guess i could edit the product.liquid to do this?
Thank you
Solved! Go to the solution
This is an accepted solution.
Follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file and search for </body>
now just before to it add this code
<script>
var localeCode = document.querySelector('input[name="locale_code"]').value;
var labelElement = document.querySelector('label[for="template--17071503311009__main-1-2"]');
var labelElement2 = document.querySelector('label[for="template--17071503311009__main-1-3"]');
var labelElement3 = document.querySelector('label[for="template--17071503311009__main-1-0"]');
var labelElement4 = document.querySelector('label[for="template--17071503311009__main-1-1"]');
if (labelElement) {
if (localeCode === 'en') {
labelElement.style.display = 'none'; // Hide the label
labelElement2.style.display = 'none'; // Hide the label
} else if (localeCode === 'fr'){
labelElement3.style.display = 'none'; // Hide the label
labelElement4.style.display = 'none'; // Hide the label
}
}
</script>
Hi @Gariep 👋 this requires an advanced theme customization to do effectively.
As it needs to use the localization object and either a naming convention or metafields on the variants to then either not render those variants or put flags(classes or attributes) on the options elements to only hide them visually with CSS.
https://shopify.dev/docs/api/liquid/objects/localization
https://shopify.dev/docs/storefronts/themes/markets/multiple-currencies-languages
Contact me for theme customization services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Hello @Gariep ,
Please hare the product URL.
Thanks
Hello Guleria,
The product isn't live yet. I'll have a custom form to gather a name input as well as a list to select a number. There are 4 variant total, i want 2 per language.
Without checking it, I can't help you.
btw it's not very complex. Using JS you have to just check which language is selected and based on it show/hide the variant.
I just created the product, here's the link, https://ornemoi.ca/products/hockey-players-ornament/?variant=44669758177441
I tried to filter the radios button in the variant picker with the help of chat GPT but i been unsuccessful so far. I either been anle to hide all of them or none.
This is an accepted solution.
Follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file and search for </body>
now just before to it add this code
<script>
var localeCode = document.querySelector('input[name="locale_code"]').value;
var labelElement = document.querySelector('label[for="template--17071503311009__main-1-2"]');
var labelElement2 = document.querySelector('label[for="template--17071503311009__main-1-3"]');
var labelElement3 = document.querySelector('label[for="template--17071503311009__main-1-0"]');
var labelElement4 = document.querySelector('label[for="template--17071503311009__main-1-1"]');
if (labelElement) {
if (localeCode === 'en') {
labelElement.style.display = 'none'; // Hide the label
labelElement2.style.display = 'none'; // Hide the label
} else if (localeCode === 'fr'){
labelElement3.style.display = 'none'; // Hide the label
labelElement4.style.display = 'none'; // Hide the label
}
}
</script>
Thank you so much @Guleria for this quick fix, it is really appreciated. It seems to work perfectly!
Have a wonderful day
Hello Guleria, it is working fine for my .ca domain, but how can i implement it for my .shop store? I only need the english variant on this domain
Thank you
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024