Open navigation

Setting up Global-e/Markets prices 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.

The above codesandbox example includes search, category merchandising and recommendation banner code, If you are utilizing other Klevu solutions, such as exclusively Klevu Search or Search/Recs, it should not create any issue but we would recommend to remove the irrelevant code. If you need any help, kindly reach out to our support team by using this link.

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.

It is not required to execute this API call on the primary market as the Klevu syncs those prices by default.

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.

Limitation: As the above template JS and API/headless based approach will display the prices on the fly, The price slider will not work properly. opting to hide the price slider on non-primary markets is a practical solution to ensure a smoother user experience.

FAQs

What if my Shopify store running on JSv1?
You need to migrate to JSv2 to make this available. For migration, Please contact support using this link.
Will the above solution work for Smart Recommendations?
The above shared JSv2 sandbox example covers the Search and Category pages customisation only. Please contact support using this link for the code example for recs.
If the recommendations are set up using Klevu APIs, you can use the same mechanism described in API/Headless based implementation section.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.