Shopify pages do not populate translated strings

Technical Questions
,
1

Builder content link
https://builder.io/content/d621971c72094ba68a96cdbb9dd1d28d

Builder public api key
64dd5478e25746bf9db3b6c0319905f6

What are you trying to accomplish
When the store is loaded in a non-default language, the Shopify strings populated by Builder should be the translated equivalent in Shopify’s database.

Screenshots or video link

image
image1982×952 79.3 KB

image
image1310×952 179 KB

Code stack you are integrating Builder with
react

Reproducible code example
Builder’s default code for fetching product information, which fails to get the translated strings:

function updateProduct() {
        var _a;
        const productId = getProductId();
        if (state.productInfo && !productId) {
            setDefaultVariant();
            return;
        }
        if (productId) {
            state.loading = true;
            const shopify = window.Shopify || {};
            const activeCurrency = ((_a = shopify.currency) === null || _a === void 0 ? void 0 : _a.active) || 'USD';
            return fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&productId=${productId}&currencyIsoCode=${activeCurrency}`)
                .then(res => res.json())
                .then(data => {
                const { products } = data;
                if (products && products.length) {
                    const productInfo = products[0];
                    state.productInfo = productInfo;
                    // console.log('gweesh?', {productInfo}); //debug
                    setDefaultVariant();
                }
                state.loading = false;
            })
                .catch(err => {
                console.error('Error fetching Shopify product', err);
                state.loading = false;
            });
        }
        else {
            state.productInfo = null;
        }
    }
    updateProduct();

My own liquid code that pulls in translated product metadata:

let finePrint = "{{ product.metafields.store.fine_print | newline_to_br | strip_newlines | default: fallbackText }}";
2

Hi there,

Apologies for the late reply!

I’m sorry, I’m not quite sure I understand your request. Would you be able to send us a screen video explaining the issue that you have encountered?

Thank you!

3

I don’t think video would help much here. The gist is:

Shopify has a “Localize” feature that enables their clients to translate any text field to any number of languages. In my example, I’m using a custom product metafield (“fine_print”). But it also applies to default Shopify fields like product title and description.

Builder.io never pulls down the translated version of these strings, regardless of the page locale. For instance, a Japanese visitor would not see the Japanese product description.

Since this old post, I’ve worked around the issue in the following way:

  1. Use a builder “Code” block to capture all relevant values (using Liquid code) and store them in a global variable using JavaScript. When strings like these are fetched using Liquid, it automatically returns the translated version.
  2. Use the “Edit Content JS + CSS” area of builder. I check for said global variable to be populated, then move all its values into State of the builder page
  3. Everything on the page can then access the translated strings through State.