Next.js Shopify Storefront API Upgrade Guide

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, 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 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:

<Image src={variantImage.originalSrc} />

Should be replaced with this:

<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:

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

Should be replaced with this:

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

Example Migration

See an example of migrating a Next.js site by checking out how Chord migrated the Next.js starter kit.