Solved

Storefront API and multiple languages

malthemilthers
Excursionist
17 1 9

Hi,

 

I'm building a storefront in react.js using the Shopify Storefront API. Everything has been setup to work with the base store, including pulling collections, products and cart interactions. However, the site is multi lingual (two languages), and I need the shopify products, collections and checkout to reflect that. 

 

Is this possible? And if so, how can I do this? 

Accepted Solution (1)
laurencedorman
Tourist
4 1 1

This is an accepted solution.

After further investigation, I am pleased to report that this feature is working as described in the documentation here: https://shopify.dev/tutorials/manage-app-translations-with-admin-api#storefront-api-translation-head...

 

My mistake was to initially not use a sufficiently recent version of the Storefront API. This functionality works from version 2020-01 onwards.

View solution in original post

Replies 17 (17)

Busfox
Shopify Staff (Retired)
628 49 110

Hey @malthemilthers,

 

I believe I answered your question here: https://community.shopify.com/c/Shopify-APIs-SDKs/New-Translation-API-is-available-from-which-API-ve...

 

TLDR: the translation API is only available in our admin API currently.

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

malthemilthers
Excursionist
17 1 9

Right thank you,

 

So i just need to clarify that it's not possible in anyway to serve translated storefront API data. Even if you combine the two APIs? 

 

Sorry for running this in two threads. probably more appropriate to continue here. 

Busfox
Shopify Staff (Retired)
628 49 110

No problem! Yea, let's stick to this thread for now.

 

There's no way to serve translated storefront API data currently. You could potentially come up with a solution using different products for each different translation, but it would be a workaround for sure.

 

Translation support for our storefront API is something we'll definitely be exploring in the near future, so stay tuned.

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

malthemilthers
Excursionist
17 1 9

Alright, 

 

It definitely feels like a necessary step towards headless e-commerce to be able to translate product data, so that the products in cart reflects the chosen language. None of the Shopify translation apps deals with issue as far as I can tell. They only work with regular Shopify themes. 

 

One more question: how is it possible to translate product information via the admin API, when it's not possible via the admin itself? It doesn't seem possible to fill out title and description etc in different languages for the same product. Is that also something that is likely to become natively available in Shopify in the near future? 

 

Thank you! 

Busfox
Shopify Staff (Retired)
628 49 110

Hi again @malthemilthers,

 

The plan is for translations to be served by the API initially. Native translation fields are a possibility in the future, but the opportunity will be given to our app ecosystem initially regardless of the direction we go after.

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

devkai
Shopify Partner
7 0 7

I ran into the same problem since I have to build a headless multilang store using nextjs.
But there is a workaround, you can make your shop a multilang json endpoint if you let liquid render json

theme.json.liquid (you have to leave in some of original content in comment-tag because shopify validates their tags to be in)

{{ content_for_layout }}
{% comment %}
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
...
{% endcomment %}

product.json.liquid

{% layout 'theme.json' %}
{{ product | json }}

now under /de/products/my-product you have a the my-product populated in json with german translations.

For the cart you can fetch /de/cart.js for translated cart contents.

I don't know if this is the preferred shopify solution, but on the other hand it doesn't make sense to me building translations into the backend but not make them available in the frontend apis

 

malthemilthers
Excursionist
17 1 9

i Devkai,

 

Does that also work for the checkout pages? Are you able to get the product titles translated in the checkout flow?

 

I agree. I'm baffled that multi-language is not a build in feature in Shopify. Also baffled that no other platform have taken that market yet. Can't believe we're stuck with hacks and workarounds for this stuff in 2020, unless we build the whole thing from scratch. 

devkai
Shopify Partner
7 0 7

puh for the checkout I have no headless-hack, I'm going to use the shopify checkout.

malthemilthers
Excursionist
17 1 9
Right so produkt titles will still me one language only in checkout, correct?
devkai
Shopify Partner
7 0 7

I did not find the docs for the direct checkout links but if you do a POST to "/de/cart" and checkout param is set you get redirected /checkout but with german translations.

I tried it in standard template on the cart page by editing changing the cart-form-url from "/cart" to "/de/cart".

 

_Dominik_
Shopify Partner
31 0 11

Might work now. Did not test but found this in the docs:

 

Retrieving Storefront API translations:
You can query the supported resources using the Accept-Language HTTP header, to return translated content to the Storefront API.

Source: https://help.shopify.com/en/api/guides/multi-language/translating-content-api#retrieving-storefront-...

laurencedorman
Tourist
4 1 1

I've tested this. The documentation seems to indicate that this should be possible, but it doesn't work.

 

Here is what I did:

  • installed a translation app
  • published a language - "German"
  • added some translated content for this language
  • added the "Accept-Language" HTTP Header to the Storefront API request and gave it the value of the ISO-code of the language, "de"

But the content comes back in English. Has anyone else tried this and had more success?

laurencedorman
Tourist
4 1 1

This is an accepted solution.

After further investigation, I am pleased to report that this feature is working as described in the documentation here: https://shopify.dev/tutorials/manage-app-translations-with-admin-api#storefront-api-translation-head...

 

My mistake was to initially not use a sufficiently recent version of the Storefront API. This functionality works from version 2020-01 onwards.

city17
Tourist
8 0 0

It seems the last post indeed solves the problem of getting translated content.

But I still can't find any info on how to make sure you send customers to the right language checkout page. Did any of you find out how to do that?

devkai
Shopify Partner
7 0 7

if you use the shopify buy sdk your client has a checkout property that holds a checkout-url. You can add a locale query param to select the language. 

handleCheckout() {
  const url = `${this.checkout.webUrl}&locale=${this.locale}`
  window.open(url, '_self')
}

 

city17
Tourist
8 0 0

Amazing, that is exactly what I was looking for. Does it also result in a different language email being sent? Or is that something you need to set in the Shopify admin area?

devkai
Shopify Partner
7 0 7

Yes the locale is stored in the customer data an transactional emails are send in that language.

One caveat, you have to stick to the shopify default E-Mails, you can not customize multilang emails.