Hide specific variant based on selected language

Solved

Hide specific variant based on selected language

Gariep
Excursionist
34 0 10

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

 

Accepted Solution (1)
Guleria
Shopify Partner
3525 712 994

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>
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL

View solution in original post

Replies 8 (8)

PaulNewton
Shopify Partner
7450 656 1562

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


Guleria
Shopify Partner
3525 712 994

Hello @Gariep ,

 

Please hare the product URL. 

Thanks

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
Gariep
Excursionist
34 0 10

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. 

 

Guleria
Shopify Partner
3525 712 994

 

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. 

 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
Gariep
Excursionist
34 0 10

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.   

Guleria
Shopify Partner
3525 712 994

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>
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
Gariep
Excursionist
34 0 10

Thank you so much @Guleria  for this quick fix, it is really appreciated.  It seems to work perfectly!

 

Have a wonderful day

 

Gariep
Excursionist
34 0 10

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