---
title: Next.js Shopify Storefront API Upgrade Guide
slug: oms/nextjs-shopify-storefront-api-upgrade-guide
docTags: 
createdAt: 2022-12-21T21:46:37.000Z
---

These releases upgrade the Shopify Storefront API version to `2023-04`. Prior to these releases, the Chord SDK used version `2022-07` of the Storefront API.

Upgrading to these releases is advised because Shopify will stop supporting version `2022-07` of the Storefront API on July 1, 2023.

## New Releases

`@chordcommerce/chord-js-performance@3.0.0` 
`@chordcommerce/product-rss-feed@4.0.0` 
`@chordcommerce/chord-js-auth-shopify@2.0.1` 

## Major Changes

These releases contain changes to the price and image objects returned by Chord SDK methods, due to underlying Shopify Storefront API changes. These changes are:

### Monetary properties

Shopify Storefront API version `2022-01` includes a [significant breaking change to monetary fields](https://shopify.dev/docs/api/release-notes/2022-10#changes-to-moneyv2-related-fields), so the monetary properties returned by the Chord SDK have been renamed to match.

As of `@chordcommerce/chord-js-performance@3.0.0`, the following properties are no longer a string, but an object with properties for `amount` and `currencyCode` (ex. `{"amount": "0.0", "currencyCode": "USD" }`): 

- `variant.price`
- `checkout.totalTax`
- `checkout.subtotalPrice`
- `checkout.totalPrice`

All monetary properties that have a `V2` suffix have been renamed without the `V2` suffix. For example, `variant.compareAtPriceV2` is now `variant.compareAtPrice`. These properties are:

- `variant.priceV2`: use `variant.price` instead
- `variant.compareAtPriceV2`: use `variant.compareAtPrice` instead
- `order.subtotalPriceV2`: use `order.subtotalPrice` instead
- `order.totalPriceV2`: use `order.totalPrice` instead
- `order.totalRefundedV2`: use `order.totalRefunded` instead
- `order.totalShippingPriceV2`: use `order.totalShippingPrice` instead
- `order.totalTaxV2`: use `order.totalTax` instead
- `order.appliedGiftCards.amountUsedV2`: use `order.appliedGiftCards.amountUsed` instead
- `order.appliedGiftCards.balanceV2`: use `order.appliedGiftCards.balance` instead
- `order.shippingLine.priceV2`: use `order.shippingLine.price` instead
- `checkout.paymentDueV2`: use `checkout.paymentDue` instead
- `checkout.totalTaxV2`: use `checkout.totalTax` instead
- `checkout.subtotalPriceV2`: use `checkout.subtotalPrice` instead
- `checkout.totalPriceV2`: use `checkout.totalPrice` instead
- `giftCard.amountUsedV2`: use `giftCard.amountUsed` instead

### Image source property

Shopify Storefront API version `2022-10` [deprecated](https://shopify.dev/docs/api/release-notes/2022-01#graphql-storefront-api-changes) the `originalSrc` property of images, so the image source property has been renamed to match.

As of `@chordcommerce/chord-js-performance@3.0.0`, the `originalSrc` property of all images has been renamed to `url`.

## Upgrade Guide

### 1. Update dependencies

1. Update `@chordcommerce/chord-js-performance` to `^3.0.0`
2. Update `@chordcommerce/chord-js-auth-shopify` to `^2.0.1`
3. If you have `@chordcommerce/product-rss-feed`  as a dependency, update to `^4.0.0`

### 2. Update monetary properties

Update code that uses the following properties to handle an object instead of a string (ex. `{"amount": "0.0", "currencyCode": "USD" }`): 

- `variant.price:` update to `variant.price.amount`
- `checkout.totalTax`: update to `checkout.totalTax.amount`
- `checkout.subtotalPrice`: update to `checkout.subtotalPrice.amount`
- `checkout.totalPrice`: update to `checkout.totalPrice.amount`

Update all monetary properties to drop the `V2` suffix. For example, update `variant.compareAtPriceV2` to `variant.compareAtPrice`. 

### 3. Update product and variant image paths

`@chordcommerce/chord-js-performance@3.0.0` renames the `originalSrc` property of product and variant images to `url`. For example, this code:

```javascript
<Image src={variantImage.originalSrc} />
```

Should be replaced with this:

```javascript
<Image src={variantImage.url} />
```

### 4. Update any references to the Shopify Storefront API version

We suggest updating all Storefront API versions to `2023-04` for consistency. Searching your code for the Shopify Storefront API, `myshopify.com/api`, might be helpful. To update the version, just change the version in the Storefront API path. For example, this:

```javascript
const path = `https://${SHOPIFY_SUBDOMAIN}.myshopify.com/api/2022-07/graphql.json`
```

Should be replaced with this:

```javascript
const path = `https://${SHOPIFY_SUBDOMAIN}.myshopify.com/api/2023-04/graphql.json`
```

:::hint{type="warning"}
If you are querying the Storefront API directly, without using `@chordcommerce/chord-js-performance`, be sure to check for breaking changes before upgrading the Storefront API version.
:::

## Example Migration

See an example of migrating a Next.js site by checking out [how Chord migrated the Next.js starter kit](https://github.com/chordcommerce/nextjs-starter-performance/commit/675964182a96daa53fd13cf5f9b7dc0f67443019).