Setting up multi-currency prices for Markets or Global-e in Shopify

When using a combination of global-e/Klevu or Shopify Markets (more than 5 markets) and Klevu, there may be issues with prices displaying incorrectly on different contexts or markets, with the exception of the primary market. This is due to the fact that Klevu only synchronizes prices for the primary market and not all global prices are set up at the Shopify Markets/Global-e level.

However, we do have a workaround available that uses the Shopify storefront API to retrieve contextual prices using product handles and context. With this approach, we can dynamically display the prices on the front end as needed. 

We will guide you through the process of how to get markets/Global-e prices using Shopify frontend API & Klevu based on the storefront setup.

Klevu Template Implementation (JSv2)

If the website is using Klevu template JS, we recommend using the codesandbox example to ensure proper functionality on your search/category pages and recommendation banners.

As shared in the example, you need to define below JS variables:

const shopify_klevu_token = "<SHOPIFY-PUBLIC-TOKEN>"; //You need to get this token following the link https://shopify.dev/docs/api/usage/authentication#getting-started-with-public-access

const primary_market = "<PRIMARY-MARKET-SETUP-IN-SHOPIFY>"; //e.g. “US“

const klevuBaseUrl = "https://<STORE-KEY>.myshopify.com/"

Once you make relevant changes and apply the JS code given in the codesandbox example, the markets/Global-e prices will start displaying on the frontend. 

API/Headless based implementation

If the website is using API/Headless based implementation for the storefront, we recommend following the below steps:

Step 1: Determine the Country

To get the global prices, the first step is to determine the country for which you want to get the prices. It should be the country code e.g. US.

Step 2: Determine the Shopify Token

You need to get this token by following this link.

Step 3: Get Product Handles

The next step is to get the product handles (URL key) of the products that you want to display the prices for. The handle should be the URL key e.g. if the product URL is https://xyz.com/products/red-shoes, the handle would be red-shoes. You will be able to retrieve this on the search/category page Klevu API response. For example, if the pagination is available and 15 products are loaded, get all the handles of 15 products.

Step 4: Execute the API Call.

Once you have this data, execute the Shopify storefront API call to get the prices and display those prices on the product tile. Below is an example API call where we are trying to get prices for 2 products.

ENDPOINT : https://<STORE-KEY>.myshopify.com/api/2023-07/graphql.json

METHOD: POST

REQUEST HEADERS

Content-Type: application/graphql

X-Shopify-Storefront-Access-Token : 88e3ea4b3d3dd2bdde4a41d69XXXXXXX //get it from 2nd step 

GRAPHQL VARIABLES

{
"country": "ES" //get it from 1st step 
}

REQUEST PAYLOAD

query getLocalizedVariant(
  $country: CountryCode
) @inContext(country: $country) {
  product_7117209370782: productByHandle(handle: "abominable-hoodie-xl-red") {
    id
    handle
    priceRange {
      ...MinMaxVariantPrice
    }
    compareAtPriceRange {
      ...MinMaxVariantPrice
    }
  }
  product_7117322387614: productByHandle(handle: "abominable-hoodie") {
    id
    handle
    priceRange {
      ...MinMaxVariantPrice
    }
    compareAtPriceRange {
      ...MinMaxVariantPrice
    }
  }
  
}
fragment Price on MoneyV2 {
  amount
  currencyCode
}
fragment MinMaxVariantPrice on ProductPriceRange {
  maxVariantPrice {
    ...Price
  }
  minVariantPrice {
    ...Price
  }
}

Response Output

{
    "data": {
        "product_7117209370782": {
            "id": "gid://shopify/Product/7117209370782",
            "handle": "abominable-hoodie-xl-red",
            "priceRange": {
                "maxVariantPrice": {
                    "amount": "55.95",
                    "currencyCode": "EUR"
                },
                "minVariantPrice": {
                    "amount": "55.95",
                    "currencyCode": "EUR"
                }
            },
            "compareAtPriceRange": {
                "maxVariantPrice": {
                    "amount": "0.0",
                    "currencyCode": "EUR"
                },
                "minVariantPrice": {
                    "amount": "0.0",
                    "currencyCode": "EUR"
                }
            }
        },
        "product_7117322387614": {
            "id": "gid://shopify/Product/7117322387614",
            "handle": "abominable-hoodie",
            "priceRange": {
                "maxVariantPrice": {
                    "amount": "103.95",
                    "currencyCode": "EUR"
                },
                "minVariantPrice": {
                    "amount": "103.95",
                    "currencyCode": "EUR"
                }
            },
            "compareAtPriceRange": {
                "maxVariantPrice": {
                    "amount": "0.0",
                    "currencyCode": "EUR"
                },
                "minVariantPrice": {
                    "amount": "0.0",
                    "currencyCode": "EUR"
                }
            }
        }
    },
    "extensions": {
        "context": {
            "country": "ES",
            "language": "EN"
        }
    }
}

So we are trying to fetch the prices of product ID 7117209370782 with handle abominable-hoodie-xl-red & product ID 7117322387614 with handle abominable-hoodie.

Step 5: Display prices on the product tile

Once the prices are returned in response, these prices can be displayed on the product tile. minVariantPrice field can be used to display the prices. If you have 15 products on the page, you need to pass all 15 products in the API call as shared.

FAQs