Skip to content

Shopify checkout.liquid deprecation

Shopify has informed all merchants about the deprecation of checkout.liquid, and the migration to Checkout Extensibility, a new foundation for building customized checkout experiences.

Shopify will deprecate checkout.liquid in two phases:

  1. August 13, 2024: Deadline to upgrade your information, shipping, and payment pages.
  2. August 28, 2025: Deadline to upgrade your thank you and order status pages, including your apps using script tags and additional scripts.

For general information on upgrading to Checkout Extensibilty, see Shopify’s upgrade guide.

Impact to your integration

The Braze and Shopify integration uses Shopify ScriptTags to load the Braze Web SDK for non-headless sites. We are planning to launch a new version of the integration before the 2025 deadline to support all customers before checkout.liquid is fully deprecated.

For the upcoming changes on August 13, 2024, check the details below to see if you will be impacted by your development team.

Phase one: August 13, 2024

The default Braze and Shopify integration doesn’t use the information, shipping, and payment pages within the checkout experience. As a result, the default integration will not be impacted.

Shopify Plus

For Shopify Plus customers, any custom SDK code snippets that modify checkout.liquid for the information, shipping, or payment pages will become inactive after this date. For example, custom code that logs events from these pages will no longer work. If you have custom SDK code, view our developer guidance for migration.

Non-Shopify Plus

For non-Shopify Plus customers, if you need to customize the information, payment, and shipping pages you need to upgrade to Shopify Plus and then follow the developer guidance.

Phase two: August 28, 2025

Shopify will deprecate support for ScriptTags on checkout.liquid pages, which are used in the integration. In response, we are actively building a new version of the Shopify integration which we plan to release well in advance of the August 2025 deadline. Stay tuned for more information from the Braze product team.

Developer guidance

This guidance applies to Shopify Plus customers who have added custom SDK code snippets to the information, shipping, or payment pages in checkout.liquid. If you haven’t made these customizations, you can disregard this guidance.

Guidance for Shopify 2.0 theme stores (such as Liquid)

When migrating to Checkout Extensibility, follow these steps to maintain usage of Braze during checkout.

  1. Set up the Braze web SDK on the storefront pages.
  2. Retrieve the deviceID from the Braze web SDK.

  3. Publish custom events from the theme app extension with the Braze deviceID in the payload.
1
2
3
4
5
// After initializing the Braze WebSDK
let event_data = {
	device_id: braze.getDeviceId()
}
Shopify.analytics.publish("custom_event", event_data);
  1. Create a web pixel and load it in checkout.

  2. Subscribe to custom_event and save the Braze deviceID as a cookie.

  3. Send a request to the Braze SDK or REST API depending on your use case.

    • Send requests to a proxy URL that will call server-side code to call the Braze REST API.
    • Fetch the shopify/email_user_reconcile endpoint and supply the URL parameter with the deviceId and email.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
register(({analytics, browser, settings, init}) => {

  // subscribe to the custom events
  analytics.subscribe("custom_event", (event) => {
    // save braze deviceId in cookie
    browser.cookie.set('device_id', event.device_id);
  });

  // reconcile user by email after user enters contact info
  analytics.subscribe('checkout_contact_info_submitted', (event) => {
    // retrieve email from checkout
    const checkout = event.data.checkout;
    const email = checkout.email;

    // retrieve deviceId from cookies
    const deviceId = browser.cookie.get('device_id')

    fetch(
      'https://'
        + SDK_URL
        + `/api/v3/shopify/email_user_reconcile`
        + `?email=${encodeURIComponent(email)}`
        + `&device_id=${deviceId}`
        + `&api_key=${API_KEY}`
        + `&shop=${SHOP_DOMAIN}`,
      {method: 'POST'}
    ).then(response => {
      console.log(`Successfully reconciled email ${email} with device ID ${deviceId}`);
    }).catch(error => {
      console.error('There was a problem with the operation:', error);
    });
  });
});

Guidance for Shopify hydrogen (headless)

When migrating to Checkout Extensibility, follow these steps to maintain usage of Braze during checkout.

  1. Set the checkout page as a subdomain of the main storefront.
    • For example, if your hydrogen store is hosted at myshop.com, the checkout must be on checkout.myshop.com or similar.
  2. Set up the Braze web SDK on the storefront pages.
    • Load and initialize the Braze SDK via NPM.
  3. Retrieve the deviceID from the Braze web SDK.

  4. Create a first-party cookie and set the value as the Braze deviceID.
1
2
3
4
const SHOP_DOMAIN = "SHOP_DOMAIN"; // shopify shop domain

// Set first party cookie to hold Braze deviceId on shop domain
document.cookie = "device_id={{ braze.getDeviceId() }}; domain={{ SHOP_DOMAIN }}; path=/";
  1. Create a web pixel and load it in checkout.

  2. Subscribe to checkout events and retireve the Braze deviceID from the first-party cookie.

  3. Send a request to the Braze SDK or REST API depending on your use case:

    • Send requests to a proxy URL that will call server-side code to call the Braze REST API.
    • Fetch the shopify/email_user_reconcile endpoint and supply the URL parameter with the deviceId and email.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
register(({analytics, browser, settings, init}) => {

  // reconcile user by email after user enters contact info
  analytics.subscribe('checkout_contact_info_submitted', (event) => {
    // retrieve email from checkout
    const checkout = event.data.checkout;
    const email = checkout.email;

    // retrieve deviceId from cookies
    const deviceId = browser.cookie.get('device_id')

    fetch(
      'https://'
        + SDK_URL
        + `/api/v3/shopify/email_user_reconcile`
        + `?email=${encodeURIComponent(email)}`
        + `&device_id=${deviceId}`
        + `&api_key=${API_KEY}`
        + `&shop=${SHOP_DOMAIN}`,
      {method: 'POST'}
    ).then(response => {
      console.log(`Successfully reconciled email ${email} with device ID ${deviceId}`);
    }).catch(error => {
      console.error('There was a problem with the operation:', error);
    });
  });
});
HOW HELPFUL WAS THIS PAGE?
New Stuff!