Release Notes

39min
v5.0.0
This major release upgrades the Shopify Storefront API version to 2023-04. Prior to this release, this theme used Shopify Storefront API version 2022-07. Upgrading to this release is advised because Shopify will stop officially supporting version 2022-07 of the Storefront API on July 1, 2023.

This release 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 such as order total and variant price have been renamed.
The originalSrc property of images has been renamed to url.
This release only includes these two breaking changes.
See the v4.x to v5.x Migration Guide﻿ for detailed instructions on upgrading to this release.
v4.0.0
This major release upgrades the Shopify Storefront API version to 2022-07. Prior to this release, this theme used the oldest available version of the Storefront API.
Upgrading to this release is strongly advised because two breaking changes will impact users around January 1, 2023, when Shopify starts serving the version 2022-04 to users. These two breaking changes are:
Shopify IDs are no longer Base64 encoded.
presentmentPrices has been removed from the API and will cause an error if included in the GraphQL query. Shopify now supports multi-currency in a different way.
This release only includes fixes for these two breaking changes. A subsequent release will add new features, deprecate old ones, and advance the API version to the latest, 2022-10.
See the v3.x to v4.x Migration Guide﻿ for detailed instructions on upgrading to this release.
v3.0.1
This release fixes an error when running npm install on a site using this package without the --legacy-peer-deps flag:
Text
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
﻿
This fix removes @reach/router as a dependency. @reach/router is incompatible with Gatsby 4. Gatsby 4 includes a fork, @gatsbyjs/reach-router, and an alias so that @reach/router can still be imported in code.
You may also need to remove @reach/router from your site's dependencies. If you do, and you are importing @react/router in Jest tests, you will need to add an alias to your jest.config.js file:
JS
moduleNameMapper: {
    '@reach/router': '@gatsbyjs/reach-router',
    ...
}
moduleNameMapper: {
    '@reach/router': '@gatsbyjs/reach-router',
    ...
}
﻿
v3.0.0
This major release of this Gatsby theme moves Gatsby and all related Gatsby plugins and transformers from direct dependencies to peerDependencies so that consumers of this package can upgrade Gatsby without any intervention from Chord. This will require you to do more than just bump this version in the package.json.
First, edit your package.json to drop @chordcommerce/gatsby-theme-performance and any of the listed peerDependencies in the theme's peerDependencies from your dependencies block. We will be reinstalling them in the next section.
Then, you should run the following command in your shell:
Bash
# If you are using npm
$ npx install-peerdeps @chordcommerce/gatsby-theme-performance
# If you are using yarn
$ npx install-peerdeps --yarn @chordcommerce/gatsby-theme-performance
# If you are using npm
$ npx install-peerdeps @chordcommerce/gatsby-theme-performance
# If you are using yarn
$ npx install-peerdeps --yarn @chordcommerce/gatsby-theme-performance
﻿
There is a chance that this command with fail with a very unhelpful error message. If that happens, the program will output an npm install/yarn add command that you can copy and run manually.
For more information and caveats around this, please read the installation instructions for this package.
v2.3.1
This release fixes an issue where incorrect routes were being rendered to the sitemap. Routes should be rendered to the sitemap without the localization, for example: https://example.com/products/t-shirt, however only routes with the en-US localization were being rendered, for example: https://example.com/en-US/products/t-shirt. It is recommended that you upgrade to this version and then re-crawl your site via the Google Search Console.
v2.2.0
This release updates @chordcommerce/chord-js-performance to v.1.6.0.This update adds the currency property when one of these events is triggered Cart Viewed, Product Removed, Product Added, Product Updated.
v2.1.0
This release adds modifyLineItem to the useCart hook providing more flexibility to modifying line items such as updating quantity and customAttributes.
v2.0.1
This release has a minor bugfix centered around changing the Variant's shopifyId to a string from an integer. This is specifically needed so that Contentful's GraphQL API can return this ID, as it often larger than the Integer type defined in the GraphQL specification.
If you have not converted this field to string and update to this version, you might see the following warning:
Text
variantId should be a string, this type will be changed in a future version
variantId should be a string, this type will be changed in a future version
﻿
Chord has a migration script available to update these fields in Contentful. Please contact us for help.
v2.0.0
This release adds support for Gatsby 4! Please see the v1.5.0 to v2.0.0 Migration Guide﻿ for instructions for upgrading. There are no additional features, but be sure to check out release notes below if migrating from a version below v1.5.0.
Key highlights of this release:
Support for Gatsby 4 and all the performance benefits. See Gatsby 3 and Gatsby 4 release notes for further reading
Support for new gatsby-plugin-image﻿
Now using React 17! See React 17 release notes﻿
Recommended Node version 16.13.1
Troubleshooting
See troubleshooting in the v1.5.0 to v2.0.0 Migration Guide﻿ for all troubleshooting related to upgrading.
Upgrading from a version below v1.5.0
Please read the release notes for previous releases to find out what changed, but important breaking changes to highlight include:
Segment Consent Manager (breaking change in )
See the change to the Segment Consent Manager in v1.5.0 release notes and ensure you have the segmentConfig set in gatsby-config.js.
Product Merchant feed (breaking change in )
This theme no longer provides a Merchant feed. See the change in v1.2.0 release notes and implement a feed in your website code.
v1.5.0
Key highlights of this release:
This release adds support to manually load our Segment plugin, in order to implement Segment's Consent Manager in our starters. It introduces a change in the way you would normally configure Segment in your theme. Please see below. 
Starting from v1.5.0, it is now the responsibility of the starter to pass a proper Segment configuration to the theme, via the starter's gatsby-config.js file, as follow:
Text
 plugins: [
    {
      resolve: '@chordcommerce/gatsby-theme-performance',
      options: {
         ....

         segmentConfig: {
           prodKey: process.env.GATSBY_SEGMENT_PRODUCTION_WRITE_KEY,
           devKey: process.env.GATSBY_SEGMENT_DEV_WRITE_KEY,
           trackPage: true,
           host: 'https://cdn.segment.com',
           delayLoad: false,
           delayLoadTime: 1000,
           manualLoad: false
        }

        ...
      }
    }
  ]
 plugins: [
    {
      resolve: '@chordcommerce/gatsby-theme-performance',
      options: {
         ....

         segmentConfig: {
           prodKey: process.env.GATSBY_SEGMENT_PRODUCTION_WRITE_KEY,
           devKey: process.env.GATSBY_SEGMENT_DEV_WRITE_KEY,
           trackPage: true,
           host: 'https://cdn.segment.com',
           delayLoad: false,
           delayLoadTime: 1000,
           manualLoad: false
        }

        ...
      }
    }
  ]
﻿
Please read this to learn more details about those settings.
Note: manualLoad is an advanced feature. It is set to true by default in our Gatsby starters so that Segment's Consent Manager can work properly. Alternatively, you can use it if you are calling analytics.load({writeKey}) manually elsewhere in your code.
Use manualLoad false if you do not use, or have removed, the Consent Manager implementation (see below).
Consent Manager & Gatsby Performance Starter
Gatsby starter v2.9.0+ (Performance) ships with a new Consent Manager component. You can find it at: /src/components/Segment/ConsentManager/index.jsx. 
A similar component is available in the v2.3.0+ Autonomy version of our Gatsby starter, which uses @chordcommerce/gatsby-theme-autonomy v1.2.0+ under the hood.
This component is an analytics.js add-on with support for consent management. At its core, the Consent Manager empowers visitors to control and customize their tracking preferences on the website. They can opt out entirely of being tracked, or selectively opt out of tools in which they don’t want their information stored.
The Consent Manager banner is shown automatically for visitors from the EU. You can also decide to show it by default by configuring the GATSBY_SEGMENT_SHOULD_REQUIRE_CONSENT new environment variable to true in your .env file.
We have also integrated a way to manage your Consent Manager preferences from the Starter's footer component:
Integrations
In order for the Consent Manager to work, you must setup Segment integrations in your target Segment workspace.
You can verify that your integrations (Google Analytics, Amplitude, etc) are accessible for the Consent Manager component by visiting the URL below. It should not return an empty array if you have properly configured them. 
Text
https://cdn.segment.com/v1/projects/add-your-segment-api-key-here/integrations
https://cdn.segment.com/v1/projects/add-your-segment-api-key-here/integrations
﻿
Troubleshooting
There is a known Gatsby issue that might occurred, where a blank page is rendered all over the site.
This issue only occurs if you build and serve the site (as opposed to simply yarn dev). When/if that happens, edit your /src/components/Segment/ConsentManager/index.jsx and move the {children} coming from the wrapRootElement before the <ConsentManager />
Rebuild and serve (yarn build && yarn serve), or use your Netlify/Gatsby Cloud review apps and verify the results.
v1.4.4
Key highlights of this release:
addToCart now accepts a customAttributes argument. These attributes will be sent to Shopify when the product is added to the cart.
JS
import { useCart } from '@chordcommerce/gatsby-theme-performance'

const { addToCart } = useCart()

const customAttributes = [
  {
    key: 'Estimated Ship Date',
    value: 'December 9, 2021'
  }
]

await addToCart(variantId, quantity, placement, position, customAttributes)
import { useCart } from '@chordcommerce/gatsby-theme-performance'

const { addToCart } = useCart()

const customAttributes = [
  {
    key: 'Estimated Ship Date',
    value: 'December 9, 2021'
  }
]

await addToCart(variantId, quantity, placement, position, customAttributes)
﻿
v1.3.0
Key highlights of this release:
getVariantAvailableQuantity introduced in the previous version of the SDK has been superseded with getVariantAvailability. This method will now return not only the variant quantity, but also backorderable information. As follow:
availableForSale Indicates if the product variant is available for sale 
currentlyNotInStock Return true if the inventory quantity is <= 0 and overselling is allowed.
quantityAvailable The total sellable quantity of the variant for online sales channels.
Text
import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance'

const legacyVariantId = "123456"

const availability = await StorefrontApi.getVariantAvailability(legacyVariantId)

const { 
    sku, 
    availableForSale, 
    quantityAvailable, 
    currentlyNotInStock 
} = availability
import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance'

const legacyVariantId = "123456"

const availability = await StorefrontApi.getVariantAvailability(legacyVariantId)

const { 
    sku, 
    availableForSale, 
    quantityAvailable, 
    currentlyNotInStock 
} = availability
﻿
Please note that you will need the  scope to read variant inventory (same as previous version of the SDK)
v1.2.2
Key highlights of this release:
You can now use getVariantAvailableQuantity to fetch the availability of a given variant:
Text
import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance'

const legacyVariantId = "123456"

const qty = await StorefrontApi.getVariantAvailableQuantity(legacyVariantId)
import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance'

const legacyVariantId = "123456"

const qty = await StorefrontApi.getVariantAvailableQuantity(legacyVariantId)
﻿
Please note that you will need the  scope to read variant inventory:
v1.2.1
Key highlights of this release:
Add Segment anonymous ID to Shopify's custom attributes on the checkout object. This allows us to reference the client's anonymous ID in Segment tracking calls on the checkout confirmation page. Once these anonymous IDs are the same, events fired from the client and from Shopify's checkout confirmation page will both be a part of the same session.
Implement additional product properties on all analytics events that reference products. This is to more closely match Segment's E-Commerce V2 spec and will enhance compatibility with various destinations, GA being the primary focus.
v1.2.0
Key highlights of this release:
This release introduces a breaking change: the Product Merchant feed generator have been moved out of the @chordcommerce/gatsby-theme-performance . It is now the responsibility of the starter code to enable it. You can find an implementation example in the following pull request.
v1.1.3
Key highlights of this release:
Add support to use the optional GATSBY_CHECKOUT_DOMAIN as new environment variable. The effect of this change is that the returned webUrl property of the Shopify createCheckout mutation will be under the checkoutDomain instead of the default one (GATSBY_SHOPIFY_SUBDOMAIN). We're hoping a side-effect of this is generate proper order attributions.
v1.1.2
Key highlights of this release:
Fix missing variants in CMS Gatsby Cloud preview builds: while a product is being created, the variants don't exist right away. This causes the preview build to fail many times during typical product build-out, which then causes Gatsby to stop trying. This fixes it by passing an empty array in the case of missing variants.
v1.1.1
Key highlights of this release:
Prevents Product Merchant RSS feed to break when a variant has a missing image (CMS Gatsby Cloud preview builds)
v1.1.0 (2021-08-10)
Key highlights of this release:
Improved site's general performance/page load times: Product and Variant images that were included in the useCatalog query, and subsequently used to populate our client-side Redux product catalog, have been removed. Those images were included in the first place for legacy reasons (Autonomy-based projects) but not necessary anymore.
As a result, this introduces a breaking change: the useProductMainImage hook now only returns the image title. If you'd like to get the product image, for example in your LineItem component, simply grab it from the cart:
Text
const { cart } = useCart() 
// or use const { loadCart } = useCart() should you need to reload it.

const { isFetching, order } = cart

// each lineItem below will contain a variant image (lineItem.variant.image)
const { lineItems } = order
const { cart } = useCart() 
// or use const { loadCart } = useCart() should you need to reload it.

const { isFetching, order } = cart

// each lineItem below will contain a variant image (lineItem.variant.image)
const { lineItems } = order
﻿
v1.0.0 (2021-07-28)
Initial re-release under the @chordcommerce Github organization.
You can find older versions of this package, published under @arfabrands/gatsby-theme-shopify, here.
Release notes for @arfabrands/gatsby-theme-shopify.
v0.0.8 (2021-07-14)
Key highlights of this release:
Remove strict engines requirements from package.json.
v0.0.7 (2021-06-30)
Key highlights of this release:
Segment tracking plan: this release ships with an updated version of our tracking plan (non-breaking fixes and improvements). Adding new attributes to the Order Completed event and applied the snake_case convention to our Identify calls.
v0.0.6 (2021-06-25)
Key highlights of this release:
Several methods that were not functional and not needed for Performance-based sites (Shopify) have been removed from this theme (as well as in the associated starter kit v2.3.0).
Removed
addReferralIdentifier: referrals are handled by third-party apps in Shopify, not natively, so the theme doesn't support them.
finalizeCheckout: Shopify checkout never returns the customer to the Gatsby site, so there is no need to call finalizeCheckout or display an order confirmation page.
modifyCart: was used exclusively to apply a referral identifier to the cart, which is not applicable (see above).
v0.0.5 (2021-06-14)
Key highlights of this release:
New environment variables: Two new environment variables are now required in the Gatsby site environment to accurately attribute Segment events to the Chord store.
Segment tracking bug fixes: Various non-breaking fixes and improvements, not requiring any changes in site code.
Changed
GATSBY_CHORD_TENANT_ID and GATSBY_CHORD_STORE_ID are now required environment variables. Chord will provide the values for these variables.
GATSBY_ACS_BRAND_NAME is now a deprecated environment variable. It can be removed with no effect.
v0.0.4 (2021-05-26)
Key highlights of this release:
New Segment tracking plan: The Segment tracking plan has been updated to a new version. It's significantly different from the old tracking plan, and will form the basis for all Segment tracking plans going forward.
 hook: Breaking changes have been introduced to tracking methods returned by useAnalytics, in order to support the new Segment tracking plan mentioned above.
Changed
The analytics client exported from @arfabrands/gatsby-theme-shopify has been removed. All tracking calls should use the useAnalytics hook. This change means that this use of analytics is no longer available:
Text
import { analytics } from '@arfabrands/gatsby-theme-shopify'

const { trackEmailCaptured } = analytics 
import { analytics } from '@arfabrands/gatsby-theme-shopify'

const { trackEmailCaptured } = analytics 
﻿
The useAnalytics hook returns different methods. These existing methods have been renamed and accept different arguments:
Text
import { useAnalytics } from '@arfabrands/gatsby-theme-shopify'

const {
    trackClickCollection, // renamed to trackCollectionClicked
    trackClickProduct, // renamed to trackProductClicked
    trackCreateStockRequest, // renamed to trackStockRequestCreated
    trackViewCart // renamed to trackCartViewed
} = useAnalytics()
import { useAnalytics } from '@arfabrands/gatsby-theme-shopify'

const {
    trackClickCollection, // renamed to trackCollectionClicked
    trackClickProduct, // renamed to trackProductClicked
    trackCreateStockRequest, // renamed to trackStockRequestCreated
    trackViewCart // renamed to trackCartViewed
} = useAnalytics()
﻿
Added
The useAnalytics hook returns a number of new methods. Here are all the methods that are now available for use in site code:
Text
import { useAnalytics } from '@arfabrands/gatsby-theme-shopify'

const {
    identify,
    trackCartViewed,
    trackCollectionClicked,
    trackEmailCaptured,
    trackProductClicked,
    trackProductListFiltered,
    trackProductListViewed,
    trackProductViewed,
    trackPromotionClicked,
    trackPromotionViewed,
    trackStockRequestCreated,
    trackUserPasswordResetCompleted,
    trackUserPasswordResetStarted,
    trackUserSignedIn,
    trackUserSignedOut,
    trackUserSignedUp
} = useAnalytics()
import { useAnalytics } from '@arfabrands/gatsby-theme-shopify'

const {
    identify,
    trackCartViewed,
    trackCollectionClicked,
    trackEmailCaptured,
    trackProductClicked,
    trackProductListFiltered,
    trackProductListViewed,
    trackProductViewed,
    trackPromotionClicked,
    trackPromotionViewed,
    trackStockRequestCreated,
    trackUserPasswordResetCompleted,
    trackUserPasswordResetStarted,
    trackUserSignedIn,
    trackUserSignedOut,
    trackUserSignedUp
} = useAnalytics()
﻿
﻿
Updated 03 Aug 2023
Did this page help you?
v4.x to v5.x Migration Guide
React