Global expansion, localizing content, and selling in multiple currencies and languages
Hi,
I am using the Translate & Adapt Shopify app. Currently there are two languages on the website: English (Default) and Norwegian. The website has been successfully localized in Norwegian, except for the "Buy it now" button.
This record does not exist when searching for it in the store's content within the Translate & Adapt app. Is there a way to translate this button? 🙂
Solved! Go to the solution
This is an accepted solution.
Hi @hamarsen ,
It looks like shopify has changed the attribute on the buy now button. You should be able to make the but button dynamic by replacing previous code with the new code.
{% if request.locale.iso_code == "no" %}
<style>
.product-form__buttons .shopify-payment-button__button.shopify-payment-button__button--unbranded {
color: transparent;
}
.product-form__buttons .shopify-payment-button__button.shopify-payment-button__button--unbranded:after {
content: "Kjøp nå";
color: rgb(var(--color-button-text));
display: flex;
align-items: center;
justify-content: center;
}
</style>
{% endif %}
This is an accepted solution.
Exceptionally useful, thanks @hamarsen , we'll work on this. So yes in the short term you'll get all the default theme / checkout / buy it now translations if you use Norwegian (Bokmål), but the language code will be nb.
Then you should keep your existing no translations, and they'll be migrated to nb. You can try both and just unpublish the one you don't want to keep - no need to delete. In the mean time we'll work on how we manage Norwegian generally this end.
To learn more visit the Shopify Help Center or the Community Blog.
Hi @hamarsen ,
Bu default, we cannot update the buy now text. However, I have comeup with a workaround to dynamically change it on multiple language. Can you provide me with the link to your store and also the translated text?
Hi @theycallmemakka,
I could be interested in hearing more about this. The link is www.handtverk.com and the button should say "Kjøp nå" instead of "Buy it now" when Norwegian is selected as a language.
Hi @hamarsen ,
I have custom written a JS solution for this.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above </body> tag
{% if request.locale.iso_code == "no" %}
<style>
[data-testid="Checkout-button"] {
display: none!important;
}
[data-testid="Checkout-button"].show {
display: block!important;
}
</style>
<script>
let timer = 0;
const maxTime = 10000;
const intervalDuration = 100;
const searchCheckoutButton = () => {
const checkoutButton = document.querySelector('[data-testid="Checkout-button"]');
if (checkoutButton) {
checkoutButton.innerText = "Kjøp nå";
checkoutButton.classList.add('show');
clearInterval(intervalId);
console.log('Found');
} else if (timer >= maxTime) {
clearInterval(intervalId);
console.log('Time limit reached. Button not found.');
} else {
timer += intervalDuration;
}
};
const intervalId = setInterval(searchCheckoutButton, intervalDuration);
</script>
{% endif %}
If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Thank you so much! This did the trick 😍
Hello Makka,
I have found an issue with the implementation. After I added products variants (in this case different languages of the digital product), the buy button disappears after switching. The user can still add the product to the cart and the button reappears when refreshing. WDYT? 🙂
This only occurs on the Norwegian version of the site.
https://handtverk.com/products/rekke-guide?variant=42040727929015
Hey @hamarsen , 'Buy it now' is an unusual string and is managed centrally by Shopify. We aim to add translations in every language. Norwegian has two versions on Shopify, just 'Norwegian' and 'Norwgian (Bokmål)' - which are you using? We should be able to deploy a fix from here.
To learn more visit the Shopify Help Center or the Community Blog.
Hi @richbrown_staff! That is good to hear. I am using the just "Norwegian" one.
Btw, I also expect this is the one most common in use in Norway as this is default Norwegian, which equals Norwegian (Bokmål).
We have a similar problem - the "Buy Now" button doesn't translate automatically to Slovak.
We had this issue in the past and you were able to translate the button on your end but since a few weeks it's back to English, not sure why.
Example: https://pokepopspot.com/sk/products/pokemon-scarlet-violet-151-booster-pack-english
"Buy Now" in Slovak should say: Kúpiť
Hi @hamarsen ,
Please replace the previous code with the new one and see if this works.
{% if request.locale.iso_code == "no" %}
<style>
[data-testid="Checkout-button"] {
display: none!important;
}
[data-testid="Checkout-button"].show {
display: block!important;
}
</style>
<script>
const m_intervalDuration = 50;
const m_searchCheckoutButton = () => {
const m_checkoutButton = document.querySelector(
'[data-testid="Checkout-button"]'
);
if (m_checkoutButton && m_checkoutButton.innerText == "Buy it now") {
m_checkoutButton.innerText = "Kjøp nå";
setTimeout(function () {
m_checkoutButton.classList.add("show");
}, 500);
console.log("Found");
}
};
const m_intervalId = setInterval(m_searchCheckoutButton, m_intervalDuration);
</script>
{% endif %}
Thank you! It works, although the button flickers. You can test it here: https://handtverk.com/products/rekke-guide?variant=42041497321655
Hi @hamarsen ,
I have created a new CSS to achieve this translation. Can you replace the previous code with this new one and check if this works.
{% if request.locale.iso_code == "no" %}
<style>
.product-form__buttons [data-testid="Checkout-button"] {
color: transparent;
}
.product-form__buttons [data-testid="Checkout-button"]:after {
content: "Kjøp nå";
color: rgb(var(--color-button-text));
display: flex;
align-items: center;
justify-content: center;
}
</style>
{% endif %}
This works good on my test store [https://mangit.myshopify.com/no/products/product-1?variant=35864135958681]
Amazing! This works perfectly. Thanks again!
Hi again Makka,
Unfortunately, it is not working anymore. Now it says "Buy it now" in both English and Norwegian selected. I have checked and the code is still in the theme.liquid file.
This is an accepted solution.
Hi @hamarsen ,
It looks like shopify has changed the attribute on the buy now button. You should be able to make the but button dynamic by replacing previous code with the new code.
{% if request.locale.iso_code == "no" %}
<style>
.product-form__buttons .shopify-payment-button__button.shopify-payment-button__button--unbranded {
color: transparent;
}
.product-form__buttons .shopify-payment-button__button.shopify-payment-button__button--unbranded:after {
content: "Kjøp nå";
color: rgb(var(--color-button-text));
display: flex;
align-items: center;
justify-content: center;
}
</style>
{% endif %}
Awesome! Thanks yet again! This did the trick ⭐
@hamarsen We'd welcome your opinion on how Norwegian works on Shopify. 'Buy it now' and default theme + checkout translations would work if you'd picked Norwegian (Bokmål) but it's understandable that you'd have picked just 'Norwegian'. Can you give an opinion on how this comes across to you as a merchant / how it could be improved? For info, Norwegian comes with the language ISO code 'no' whereas Norwegian (Bokmål) would have the code 'nb'. Let us know how you'd expect it to work
To learn more visit the Shopify Help Center or the Community Blog.
Hi @richbrown_staff,
Great that you are following this up!
Norway has two official languages: Norwegian (Bokmål) and Norwegian (Nynorsk). Close to 90% of the population use Norwegian (Bokmål) and most see this as the standard Norwegian. Whenever the option to select just "Norwegian" comes up, most Norwegians would assume that this refers to Bokmål.
However, the correct approach would be to offer two options: Norwegian (Bokmål) and Norwegian (Nynorsk). This is recommended, also because those who use Nynorsk can be vocal about their preference.
As for the language ISO code, "no" is the most common language abbreviation for Norwegian on the web. "nb" also works, but is not as common as "no".
If the translations are working correctly for Norwegian (Bokmål), I will just switch to that language.
As for Shopify, I think you should reduce the selection to two languages (e.g. migrate the users who have "Norwegian" to "Norwegian (Bokmål)), and use the "no" ISO code for Bokmål. The current situation with three Norwegian languages can be confusing for Norwegian merchants.
This is an accepted solution.
Exceptionally useful, thanks @hamarsen , we'll work on this. So yes in the short term you'll get all the default theme / checkout / buy it now translations if you use Norwegian (Bokmål), but the language code will be nb.
Then you should keep your existing no translations, and they'll be migrated to nb. You can try both and just unpublish the one you don't want to keep - no need to delete. In the mean time we'll work on how we manage Norwegian generally this end.
To learn more visit the Shopify Help Center or the Community Blog.
Thanks! This is now done. 🙂
I switched to "nb" and Norwegian (Bokmål). The main issue now is that all the external links that are currently referencing "no" are now getting 404 pages.
Ah - could you share an example of one?
To learn more visit the Shopify Help Center or the Community Blog.
I can see in GA that some users are getting 404 after making this switch, and after unpublishing the "Norwegian" language version. I can also reproduce this if I go to https://handtverk.com/no in incognito mode.
Is there a good way of quickly setting up a redirect to the https://handtverk.com/nb site? Otherwise, this might hurt SEO quite a lot. 😕
I've made a redirects file for you here, based on your sitemap - so I believe it covers all your pages. Go to Online Store > Navigation > URL redirects and import.
To learn more visit the Shopify Help Center or the Community Blog.
Excellent! This works. Thank you for quick help. 🙂
A follow up on this. If we did this:
As for Shopify, I think you should reduce the selection to two languages (e.g. migrate the users who have "Norwegian" to "Norwegian (Bokmål)), and use the "no" ISO code for Bokmål. The current situation with three Norwegian languages can be confusing for Norwegian merchants.
How would you expect Norwegian (Bokmål) and Norwegian (Nynorsk) to show up in a language selector?
To learn more visit the Shopify Help Center or the Community Blog.
When shown in the dropdown to the end-user "Norwegian (Bokmål)" would ideally be shown as just "Norsk" and then "Norwegian (Nynorsk)" can be shown as "Norsk (Nynorsk)".
In the language settings it is fine that they are listed as "Norwegian (Bokmål)" and "Norwegian (Nynorsk)".
Super helpful thanks. And if you were one of the 10-15% who use Nynorsk, would that also sit ok?
To learn more visit the Shopify Help Center or the Community Blog.
The two written languages are very similar.
A good comparison is English (US) and English (UK). Making this distinction on a website is useful when users can select either or, and when there is good language support for both. However, in many cases, when there is just one type of English supported, it is usually shown as just "English". This is the case for Shopify today in the language selection. The same is true in Norwegian.
Having to distinguish between Bokmål and Nynorsk is unnecessary if you as a merchant only have support for one type of Norwegian. This will often be the case, since I believe that few merchants will prioritize to offer language support for both versions of Norwegian, since the written languages are similar and understandable for both parties. Instead, I believe merchants rather will prioritize localizing the website to a completely different language as this opens up new market opportunities.
This is why I believe "Norwegian (Bokmål)" should only be shown as "Norsk" in the dropdown, or that it is possible to accomplish this by editing the theme's code. Ultimately, think this decision should be up to the merchant and whether they want to localize the website in both language variants. 🙂
Hugely appreciate the time you've spent sharing this, thank you.
To learn more visit the Shopify Help Center or the Community Blog.
Hello, please tell me where to insert this code ? so that you can change the name of the button.
Hi @helpmepleas , if you can avoid custom coding it's better to - what language are you unable to translate '"Buy it now" into?
To learn more visit the Shopify Help Center or the Community Blog.
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024