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.
@chordcommerce/[email protected] @chordcommerce/[email protected] @chordcommerce/[email protected]
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:
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/[email protected], 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
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/[email protected], the originalSrc property of all images has been renamed to url.
- Update @chordcommerce/chord-js-performance to ^3.0.0
- Update @chordcommerce/chord-js-auth-shopify to ^2.0.1
- If you have @chordcommerce/product-rss-feed as a dependency, update to ^4.0.0
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.
@chordcommerce/[email protected] renames the originalSrc property of product and variant images to url. For example, this code:
Should be replaced with this:
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:
Should be replaced with this:
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.
See an example of migrating a Next.js site by checking out how Chord migrated the Next.js starter kit.