Re: Unable to translate "Buy it now button to Norwegian

Solved

Unable to translate "Buy it now button to Norwegian

hamarsen
Excursionist
23 0 6

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? 🙂

Accepted Solutions (2)
theycallmemakka
Shopify Partner
1662 396 417

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 %}

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

richbrown_staff
Shopify Staff
652 96 165

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.

  • Add Norwegian (Bokmål) in Settings > Languages
  • Export Norwegian
  • Export Norwegian (Bokmål)
  • Copy column H from the CSV for Norwegian to column H in the Norwegian (Bokmål) CSV
  • Save then Import the CSV

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.

View solution in original post

Replies 30 (30)

theycallmemakka
Shopify Partner
1662 396 417

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?

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

hamarsen
Excursionist
23 0 6

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.

theycallmemakka
Shopify Partner
1662 396 417

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

hamarsen
Excursionist
23 0 6

Thank you so much! This did the trick 😍

hamarsen
Excursionist
23 0 6

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

richbrown_staff
Shopify Staff
652 96 165

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.

hamarsen
Excursionist
23 0 6

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). 

pokepopspot
Excursionist
21 0 3

Hi @richbrown_staff 

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ť

 

theycallmemakka
Shopify Partner
1662 396 417

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 %}

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

hamarsen
Excursionist
23 0 6

Thank you! It works, although the button flickers. You can test it here: https://handtverk.com/products/rekke-guide?variant=42041497321655

theycallmemakka
Shopify Partner
1662 396 417

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

hamarsen
Excursionist
23 0 6

Amazing! This works perfectly. Thanks again!

hamarsen
Excursionist
23 0 6

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. 

theycallmemakka
Shopify Partner
1662 396 417

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 %}

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

hamarsen
Excursionist
23 0 6

Awesome! Thanks yet again! This did the trick 

richbrown_staff
Shopify Staff
652 96 165

@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

 

image (62).png

To learn more visit the Shopify Help Center or the Community Blog.

hamarsen
Excursionist
23 0 6

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. 

richbrown_staff
Shopify Staff
652 96 165

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.

  • Add Norwegian (Bokmål) in Settings > Languages
  • Export Norwegian
  • Export Norwegian (Bokmål)
  • Copy column H from the CSV for Norwegian to column H in the Norwegian (Bokmål) CSV
  • Save then Import the CSV

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.

hamarsen
Excursionist
23 0 6

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. 

richbrown_staff
Shopify Staff
652 96 165

Ah - could you share an example of one? 

To learn more visit the Shopify Help Center or the Community Blog.

hamarsen
Excursionist
23 0 6

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. 😕 

richbrown_staff
Shopify Staff
652 96 165

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.

hamarsen
Excursionist
23 0 6

Excellent! This works. Thank you for quick help. 🙂 

richbrown_staff
Shopify Staff
652 96 165

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?

 

Screenshot 2023-12-12 at 11.56.25.png

To learn more visit the Shopify Help Center or the Community Blog.

hamarsen
Excursionist
23 0 6

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)". 

richbrown_staff
Shopify Staff
652 96 165

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.

hamarsen
Excursionist
23 0 6

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. 🙂

richbrown_staff
Shopify Staff
652 96 165

Hugely appreciate the time you've spent sharing this, thank you.

To learn more visit the Shopify Help Center or the Community Blog.

helpmepleas
Tourist
4 0 1

Hello, please tell me where to insert this code ? so that you can change the name of the button.

richbrown_staff
Shopify Staff
652 96 165

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.