Unable to translate "Buy it now button to Norwegian

[hamarsen]

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

[theycallmemakka · 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 %}

[theycallmemakka]

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?

[hamarsen]

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]

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

[hamarsen]

Thank you so much! This did the trick 😍

[hamarsen]

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]

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.

[hamarsen]

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]

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]

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

[hamarsen]

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

[theycallmemakka]

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] 

[hamarsen]

Amazing! This works perfectly. Thanks again!

[hamarsen]

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

[hamarsen]

Awesome! Thanks yet again! This did the trick ⭐

[richbrown_staff]

@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

[hamarsen]

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

[hamarsen]

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]

Ah - could you share an example of one? 

[hamarsen]

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]

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. 

[hamarsen]

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

[richbrown_staff]

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?

[hamarsen]

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]

Super helpful thanks. And if you were one of the 10-15% who use Nynorsk, would that also sit ok?

[hamarsen]

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]

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

[helpmepleas]

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

[richbrown_staff]

Hi @helpmepleas , if you can avoid custom coding it's better to - what language are you unable to translate '"Buy it now" into?