website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by
Archbee
Using Chord with Shopify
...
Next.js
Guides

Next.js Shopify Storefront API Upgrade Guide

13min

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:

JS
|
<Image src={variantImage.originalSrc} />


Should be replaced with this:

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

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


Should be replaced with this:

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


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.

Updated 28 Apr 2023
Did this page help you?
PREVIOUS
Next.js Shopify Storefront API Upgrade Guide
NEXT
Gatsby
Docs powered by
Archbee
TABLE OF CONTENTS
New Releases
Major Changes
Monetary properties
Image source property
Upgrade Guide
1. Update dependencies
2. Update monetary properties
3. Update product and variant image paths
4. Update any references to the Shopify Storefront API version
Example Migration
Docs powered by
Archbee