Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I set up multilingual checkout on my website?

How can I set up multilingual checkout on my website?

Chompas
Tourist
12 0 9

Hi,

 

I'm currently managing my own store in my website so I'm only using the checkout functionality from Shopify. The website supports 3 different languages and I'm wondering how I can accomplish this with the checkout. I've read this link https://help.shopify.com/en/manual/checkout-settings/checkout-language on how to change the checkout language and the three languages I need are support but that just changes it from one to another.

 

How can I have different languages for the same checkout? To add more context this is for Belgium, a country that has more than one language as official. I can control which link to open from my website so I wonder if there's any additional parameter I can send for each language to force different ones.

 

Really looking forward to solve this issue.

 

Thanks.

Replies 16 (16)

Lulu
Shopify Staff
911 87 226

Hey, @Chompas!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.

 

The only way to change the language in the checkout is to use a third-party app that supports this. I have found two for you in the Shopify App Store: 

 

1. Langify: offers an automatic language detection (customers will be redirected to their preferred language automatically), a customizable language switcher (customers can choose their preferred language manually), supports multiple domains per language (translated storefronts can be hosted on specific domains), it features full SEO support including the translation of Meta Tags (when using multiple domains per language) among other amazing features. 

 

2. Multi Lingo : Multi Lingo is a professional translation tool. Multi Lingo allows you to create multi-language versions of any Shopify theme and lets you enter translations for products, pages, menu items, homepage texts, Email notifications, checkout and blog articles. Multi Lingo blends right in with Shopify's localization mechanism and automatically integrates existing theme translations. On top of that Multi Lingo also supports automatic translations on a per-item basis through the Yandex translation engine.

Both app's offer your checkout in multiple languages without any coding knowledge and both apps offer a free trial so you can try them out before purchasing to see which one you prefer to use. 

 

I hope this helps but if you have any other questions, please don't hesitate to reach back out - I am always happy to help. Don't forget, Black Friday and Cyber Monday are just around the corner, we have put together this Black Friday Checklist for you. It is full of tips and tricks to make the most of the busiest online season so be sure to check it out!

 

Kind regards,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

Chompas
Tourist
12 0 9

Hi @Lulu ,

 

Thanks for your reply. Unfortunately those plugins don't work since I only use the Checkout functionality of Shopify which means that I don't have a store (I manage a small store myself in my own website). Those plugins are not compatible with only checkout and require a store to work.

Matija_Gerzina
Visitor
1 0 1

Hi @Chompas,
I see it is a bit older thread but... did you manage to solve this?

I am also using Buy Button only and direct buyers to Checkout only and would need to somehow "call" the checkout in different languages. No success for now.

I found this. 
// Initializing a client to return translated content
const client WithTranslatedContent = Client.buildClient({
domain
: 'your-shop-name.myshopify.com',
storefrontAccessToken
: 'your-storefront-access-token',
language
: 'ja-JP'
});

But no use of it for now...  😞 

vm-user
Visitor
2 0 3

I know this is super delayed, but I didn't find any other references to this so thought it would be good to help out others like myself. I did find a way to change the checkout language using only buy button. Below is the snippet that you need to change in the buy button code. It requires a little bit of programming, as you have to pass in the proper language to render the checkout, but this is pretty simple.

 

  function ShopifyBuyInit() {
// change client to clientWithTranslatedContent here
    var clientWithTranslatedContent = ShopifyBuy.buildClient({
      domain: '[domain]',
      storefrontAccessToken: '[accessToken]',
      // If French {fr-FR}. You have to add these in settings -> languages. But essentially you have to pass in wtv language you want
      language: 'ca-EN'
    });
//change client to clientWithTranslatedContent
    ShopifyBuy.UI.onReady(clientWithTranslatedContent).then(function (ui) {
 
Emyb
Visitor
1 0 0

Hi @vm-user.
Thank you for your great solution! I added the snippet in the buy button liquid without deleting/modifying the existing codes but nothing happened...

Could you kindly advise me more on this? Thank you in advance.

fmaida
Visitor
1 0 0

@vm-user you are my hero!

CandyMRS
Visitor
2 0 1

@Lulu  will the app translate the currency of the total price on the checkout page? For instance, if a customer chose CAD, is it the CAD dollars that show on the checkout page? And what happened if the customer continues to payment?

PieceOfJeans
Visitor
1 0 0

Hi!

 

Is it possible to sell in multiple languages without Shopify Plus? I need languages to checkout-phase.

roundabout
Shopify Partner
19 0 7

Hi @PieceOfJeans , did you figure anything out so far ? I am having  the same issue 

Aheadworks_team
Shopify Partner
67 1 5

I'd recommend you LangShop. It's my favorite app - translates automatically into different languages AND it's possible to change currency there. I see you don't need currency variation but other features will be very handy for you I believe. 

banned

Not applicable

 

const handleCheckout = () => {
    const checkoutJA = `${checkout.webUrl}&locale=ja`
    const checkoutEN = `${checkout.webUrl}&locale=en`

    //switch checkout language based on locale
    const checkoutUrl = intl.locale === "ja" ? checkoutJA : checkoutEN
    window.open(checkoutUrl)
}

 

(This is the reply to a previous question about how to redirect checkout URL based on locales).

You can simply add language parameter at the end of checkout URL.

In my case, I'm using react-intl to switch languages on my website (which is created with GatsbyJS by the way), so checkout URL can be switched based on intl locales like above.

As shopify buy button doesn't support language redirection officially, this is the simplest solution I've ever found out so far.

Cheers!

qStar
Shopify Partner
1 0 0

This solution seams to not work anymore at least for me.

I think it is related to: Storefront API `Cart.checkoutUrl` now contains key param — Shopify developer changelog

Since the checkout.webUrl is now not the final url but only a in-between which is used to redirect the user to the final checkout url. But in the process the locale param is lost.

If anyone knows any solution I would appreciate it a lot.

(Related issue: https://github.com/Shopify/js-buy-sdk/issues/927)

Cheers guys

Rijk
Shopify Partner
3 0 0

Wonderful! By far the simplest and best solution.

 

To reply to @qStar : if there's a key param in the URL (example: https://example.store/cart/c/Z2NwLWV1cm9wZS13ZXN0MzowMUhRMTUzRk0wVjFQODI0RkM3OUM0NTc5SA?key=8be783fb...), just append `&language=nl` instead of `?locale=nl`. For me it works great, even localizes the product names (provided the language is available of course).

 

BKKNomad
Visitor
2 0 2

Hello, I know it's an old topic, but here is maybe the easiest solution to achieve this.

 

In your cart.liquid template, add the parameter ?locale= in your checkout form action attribute like this:

<form action="/cart?locale={{localization.language.iso_code}}"...

 

I hope that helps.

 

Cheers

Frederex
Visitor
1 0 0

Hi guys, I can recommend this code for your store:

form action="/{{localization.language.iso_code}}/cart"

 

We tried with BKKNomad's code first, but that didn't work for the whole checkout flow

monadic
Tourist
5 0 8

I am really at a loss here. So i am using the Shopify native Translate & Adapt app to translate the store to one other language (German).

 

However my theme (Dawn) does not have a cart.liquid that I could edit. Adding the code from @vm-user  to my buy button code makes the button disappear entirely.

This is what I have changed:

 

 

 function ShopifyBuyInit() {
    var clientWithTranslatedContent = ShopifyBuy.buildClient({
      domain: '[myshop.myshopify.com]',
      storefrontAccessToken: '[123456789]',
      language: 'de'
    });
    ShopifyBuy.UI.onReady(clientWithTranslatedContent).then(function (ui) {
      ui.createComponent('product', {
... and so forth

 

 

Is this done wrong? Any help is greatly appreciated!