Skip to content

Shopify custom integration setup

This page walks you through how to integrate Braze with a Shopify Hydrogen store or any headless Shopify store by using a custom storefront.

This guide uses Shopify’s Hydrogen framework as an example. However, you can follow a similar approach if your brand uses Shopify for the backend of your store with a “headless” front-end setup.

To integrate your Shopify headless store with Braze, you need to complete these two goals:

  1. Initialize and load the Braze Web SDK to enable onsite tracking

    Manually add code into your Shopify website to enable Braze onsite tracking. By implementing the Braze SDK on your Shopify headless store, you can track onsite activities, including sessions, anonymous user behavior, pre-checkout shopper actions, and any custom events or custom attributes you choose to include with your development team. You can also add any channels supported by the SDKs, such as in-app messages or Content Cards.

2. Install the Braze Shopify integration

After you connect your Shopify store to Braze, you’ll gain access to customer, checkout, order, and product data through Shopify webhooks.

To complete these goals, follow these steps:

Initialize and load the Braze Web SDK

Step 1: Create a Braze website app

In Braze, go to Settings > App Settings > and then select Add App. Name the app as “Shopify”.

Step 2: Add subdomain and environmental variables

  1. Set up your Shopify subdomain to redirect traffic from your online store to Hydrogen.
  2. Add a callback URI for login. (The URI will automatically be added when the domain is added.)
  3. Set up your Shopify environment variables:
    • Create two environment variables using the values from the website app you created in Step 1.
    • BRAZE_API_KEY
    • BRAZE_API_URL

Step 3: Enable onsite tracking

The first step is to initialize the Braze Web SDK. We recommend doing that by installing our NPM package:

1
2
3

npm install --save @braze/web-sdk@5.4.0
# or, using yarn:
# yarn add @braze/web-sdk

Then, include this setting as a top-level key in your vite.config.js file:

1
2
3

optimizeDeps: {
    exclude: ['@braze/web-sdk']
}

After installing the NPM package, you must initialize the SDK within a useEffect hook inside the Layout component. Depending on your Hydrogen version, this component may be located in either the root.jsx or layout.jsx file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Add these imports
import * as braze from "@braze/web-sdk";
import { useEffect } from 'react';

export function Layout({children}) {
  const nonce = useNonce();
  // @type {RootLoader} 
  const data = useRouteLoaderData('root');
  
  // Add useEffect call to initialize Braze SDK
  useEffect(() => {
    if(!braze.isInitialized()) {
      braze.initialize(data.brazeApiKey, {
        baseUrl: data.brazeApiUrl,
      });
      braze.openSession()    
    }
  }, [data]) 

  return (...);
}

The values data.brazeApiKey and data.brazeApiUrl need to be included in the component loader using the environment variables created in Step 2:

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

export async function loader(args) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const {storefront, env} = args.context;

  return {
    ...deferredData,
    ...criticalData,
    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
    // Add the two properties below to the returned value
    brazeApiKey: env.BRAZE_API_KEY,
    brazeApiUrl: env.BRAZE_API_URL,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      withPrivacyBanner: false,
      // Localize the privacy banner
      country: args.context.storefront.i18n.country,
      language: args.context.storefront.i18n.language,
    },
  };
}

Step 4: Add a Shopify Account Login event

Track when a shopper signs into their account and syncs their user information to Braze. This includes calling our changeUser method to identify customers with a Braze external ID.

Before you start, make sure you’ve set up the callback URIs for the customer login to work within Hydrogen. For more information, refer to Using the Customer Account API with Hydrogen.

  1. After setting up the callback URIs, define a function for calling the Braze SDK. Create a new file (such as Tracking.jsx) and import it from your components:
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
34
35

import * as braze from "@braze/web-sdk";

export function trackCustomerLogin(customerData, storefrontUrl) {
  const customerId = customerData.id.substring(customerData.id.lastIndexOf('/') + 1)
  const customerSessionKey = `ab.shopify.shopify_customer_${customerId}`;
  const alreadySetCustomerInfo = sessionStorage.getItem(customerSessionKey);
  
  if(!alreadySetCustomerInfo) {
    const user = braze.getUser()

    // To use Shopify customer ID as Braze External ID, use:
    // braze.changeUser(customerId)

    // To use Shopify customer email as Braze External ID, use:
      // braze.changeUser(customerData.emailAddress?.emailAddress)
        // To use hashing for email addresses, apply hashing before calling changeUser

    // To use your own custom ID as the Braze External ID, pass that value to the changeUser call.

    user.setFirstName(customerData.firstName);
    user.setLastName(customerData.lastName);
    if(customerData.emailAddress.emailAddress) {
      user.setEmail(customerData.emailAddress?.emailAddress);
    }

    if(customerData.phoneNumber?.phoneNumber) {
      user.setPhoneNumber(customerData.phoneNumber?.phoneNumber);
    }
    braze.logCustomEvent(
      "shopify_account_login",
      { source: storefrontUrl }
    )
    sessionStorage.setItem(customerSessionKey, customerId);
  }
}

2. In the same useEffect hook that initializes the Braze SDK, add the call to this function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { trackCustomerLogin } from './Tracking';

export function Layout({children}) {
  const nonce = useNonce();
  // @type {RootLoader}
  const data = useRouteLoaderData('root');

  useEffect(() => {
    if(!braze.isInitialized()) {
      braze.initialize(data.brazeApiKey, {
        baseUrl: data.brazeApiUrl,
        enableLogging: true,
      });
      braze.openSession()    
    }

    // Add call to trackCustomerLogin function
    data.isLoggedIn.then((isLoggedIn) => {
      if(isLoggedIn) {
        trackCustomerLogin(data.customerData, data.publicStoreDomain)
      }
    })

  }, [data])

3. Fetch the customer email address and phone number in your Customer API GraphQL query, located in the file app/graphql/customer-account/CustomerDetailsQuery.js:

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
34
35

export const CUSTOMER_FRAGMENT = `#graphql
  fragment Customer on Customer {
    id
    firstName
    lastName
    emailAddress {
      emailAddress
    }
    phoneNumber {
      phoneNumber
    }
    defaultAddress {
      ...Address
    }
    addresses(first: 6) {
      nodes {
        ...Address
      }
    }
  }
  fragment Address on CustomerAddress {
    id
    formatted
    firstName
    lastName
    company
    address1
    address2
    territoryCode
    zoneCode
    city
    zip
    phoneNumber
  }
`;

4. Finally, load the customer data in your loader function:

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
34
35
36
37
38
39
40
41
42
43
44
45
46

// Add import for GraphQL Query 
import { CUSTOMER_DETAILS_QUERY } from './graphql/customer-account/CustomerDetailsQuery';

export async function loader(args) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const {storefront, env} = args.context;

  // Add GraphQL call to Customer API
  const isLoggedIn = await deferredData.isLoggedIn;
  let customerData;
  if (isLoggedIn) {
    const { data, errors } = await args.context.customerAccount.query(
        CUSTOMER_DETAILS_QUERY,
    );
    customerData = data.customer
  } else {
    customerData = {}
  }

  return {
    ...deferredData,
    ...criticalData,
    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
    brazeApiKey: env.BRAZE_API_KEY,
    brazeApiUrl: env.BRAZE_API_URL,
    // Add the property below to the returned value 
    customerData: customerData,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      withPrivacyBanner: false,
      // Localize the privacy banner
      country: args.context.storefront.i18n.country,
      language: args.context.storefront.i18n.language,
    },
  };
}

Step 5: Add tracking for Product Viewed and Cart Updated events

Product Viewed events

  1. Add this function to your Tracking.jsx file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export function trackProductViewed(product, storefrontUrl) {
  const eventData = {
    product_id: product.id.substring(product.id.lastIndexOf('/') + 1),
    product_name: product.title,
    variant_id: product.selectedOrFirstAvailableVariant.id.substring(product.selectedOrFirstAvailableVariant.id.lastIndexOf('/') + 1),
    image_url: product.selectedOrFirstAvailableVariant.image?.url,
    product_url: `${storefrontUrl}/products/${product.handle}`,
    price: product.selectedOrFirstAvailableVariant.price.amount,
    currency: product.selectedOrFirstAvailableVariant.price.currencyCode,
    source: storefrontUrl,
    type: ["price_drop", "back_in_stock"],
    metadata: {
    sku: product.selectedOrFirstAvailableVariant.sku
  }

  }
  braze.logCustomEvent(
    "ecommerce.product_viewed",
    eventData 
  )
}

2. To call the prior function whenever a user visits a product page, add a useEffect hook to the Product component within the file app/routes/products.$handle.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { trackProductViewed } from '~/tracking';
import { useEffect } from 'react';

export default function Product() {
  // @type {LoaderReturnData} 
  // retrieve storefrontUrl to be passed into trackProductViewed 
  const {product, storefrontUrl} = useLoaderData();
  
  // Add useEffect hook for tracking product_viewed event 
  useEffect(() => {
    trackProductViewed(product, storefrontUrl)
  }, [])

  return (...)
}

3. Add the value for “storefrontUrl” (because it’s not in the component loader by default):

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

async function loadCriticalData({context, params, request}) {
  const {handle} = params;
  const {storefront} = context;

  if (!handle) {
    throw new Error('Expected product handle to be defined');
  }

  const [{product}] = await Promise.alll([
    storefront.query(PRODUCT_QUERY, {
      variables: {handle, selectedOptions: getSelectedProductOptions(request)},
    }),
    // Add other queries here, so that they are loaded in parallel
  ]);

  if (!product?.id) {
    throw new Response(null, {status: 404});
  }

  return {
    product,
   // Add this property to the returned value
    storefrontUrl: context.env.PUBLIC_STORE_DOMAIN,
  };
}

Cart Updated events

In addition to tracking the cart_updated event, you need to send the cart token value over to Braze. We use the cart token value to process order webhooks received from Shopify. This is done by creating a user alias with the Shopify cart token as its name.

  1. Define functions for tracking the cart_updated event and setting the cart token:
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
34
35
36
37
38
39
40
41

export function trackCartUpdated(cart, storefrontUrl) {
  const eventData = {
    cart_id: cart.id,
    total_value: cart.cost.totalAmount.amount,
    currency: cart.cost.totalAmount.currencyCode,

    products: cart.lines.nodes.map((line) => {
      return {
        product_id: line.merchandise.product.id.toString(),
        product_name: line.merchandise.product.title,
        variant_id: line.merchandise.id.toString(),
        image_url: line.merchandise.image.url,
        product_url: `${storefrontUrl}/products/${line.merchandise.product.handle}`,
        quantity: Number(line.quantity),
        price: Number(line.cost.totalAmount.amount / Number(line.quantity))
      }
    }),
    source: storefrontUrl,
    metadata: {},
  };
  
  braze.logCustomEvent(
    "ecommerce.cart_updated",
    eventData 
  )
}

export function setCartToken(cart) {
  const cartId = cart.id.substring(cart.id.lastIndexOf('/') + 1) 
  const cartToken = cartId.substring(0, cartId.indexOf("?key="));
  if (cartToken) {
    const cartSessionKey = `ab.shopify.shopify_cart_${cartToken}`;
    const alreadySetCartToken = sessionStorage.getItem(cartSessionKey);

    if (!alreadySetCartToken) {
      braze.getUser().addAlias("shopify_cart_token", `shopify_cart_${cartToken}`)
      braze.requestImmediateDataFlush();
      sessionStorage.setItem(cartSessionKey, cartToken);
    }
  }
}

2. Return the cart object from the fetcher action so Braze can access its properties by going to your app/routes/cart.jsx file an adding the following to the action function:

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
34
35
36
37

export async function action({request, context}) {
  const {cart} = context;

  ...

  switch (action) {
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    ... 
  }

  const cartId = result?.cart?.id;
  const headers = cartId ? cart.setCartId(result.cart.id) : new Headers();
  const {cart: cartResult, errors, warnings} = result;

  const redirectTo = formData.get('redirectTo') ?? null;
  if (typeof redirectTo === 'string') {
    status = 303;
    headers.set('Location', redirectTo);
  }
  
  return data(
    {
      cart: cartResult,
      // Add these two properties to the returned value 
      updatedCart: await cart.get(),
      storefrontUrl: context.env.PUBLIC_STORE_DOMAIN,
      errors,
      warnings,
      analytics: {
        cartId,
      },
    },
    {status, headers},
  );
}

For more information on Remix fetchers, refer to useFetcher.

3. Hydrogen stores usually define a CartForm component that manages the cart object state, which gets used when adding, removing, and changing quantity of items in a cart. Add another useEffect hook in the AddToCartButton component that will call the trackCartUpdated function whenever the form fetcher state changes (whenever the user cart is updated):

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
34
35
36
37
38
39
40
41
42
43
44
45
46

// Add imports 
import { trackCartUpdated, setCartToken } from '~/tracking';
import { useEffect } from 'react';
import { useFetcher } from '@remix-run/react';

export function AddToCartButton({
  analytics,
  children,
  disabled,
  lines,
  onClick,
}) {
	
  // Define a new Fetcher to be used for tracking cart updates 
  const fetcher = useFetcher({ key: "cart-fetcher" });
  
  // Add useEffect hook for tracking cart_updated event and setting cart token alias
  useEffect(() => {
    if(fetcher.state === "idle" && fetcher.data) {
      trackCartUpdated(fetcher.data.updatedCart, fetcher.data.storefrontUrl)
      setCartToken(fetcher.data.updatedCart);
    }
  }, [fetcher.state, fetcher.data])

  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm route="/cart" inputs= fetcherKey="cart-fetcher" action={CartForm.ACTIONS.LinesAdd}>
      {(fetcher) => (
        <>
          <input
            name="analytics"
            type="hidden"
            value={JSON.stringify(analytics)}
          />
          <button
            type="submit"
            onClick={onClick}
            disabled={disabled ?? fetcher.state !== 'idle'}
          >
            {children}
          </button>
        </>
      )}
    </CartForm>
  );
}

4. Use the same fetcherKey for the actions responsible for updating an existing product from your cart. Add the following to the CartLineRemoveButton and CartLineUpdateButton components (located by default in the file app/components/CartLineItem.jsx):

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

function CartLineRemoveButton({lineIds, disabled}) {
  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm
      fetcherKey="cart-fetcher"
      route="/cart"
      action={CartForm.ACTIONS.LinesRemove}
      inputs=
    >
      <button disabled={disabled} type="submit">
        Remove
      </button>
    </CartForm>
  );
}

function CartLineUpdateButton({children, lines}) {
  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm
      route="/cart"
      fetcherKey="cart-fetcher"
      action={CartForm.ACTIONS.LinesUpdate}
      inputs=
    >
      {children}
    </CartForm>
  );
}

Install the Braze Shopify integration

Step 1: Connect your Shopify store

Go to the Shopify partner page to start your setup. First, select Begin Setup to install the Braze application from the Shopify App Store. Follow the guided steps to complete the installation process.

Shopify integration setup page on the Braze dashboard.

2단계: Enable Braze SDKs

For Shopify Hydrogen or headless stores, select the Custom setup option.

Before continuing with the onboarding process, confirm that you’ve enabled the Braze SDK on your Shopify website.

Setup step to enable Braze SDKs.

3단계: Track Shopify data

Enhance your integration by adding more Shopify events and attributes, which will be powered by Shopify webhooks. For detailed information on the data tracked through this integration, refer to Shopify Data Features.

Setup step to track Shopify data.

4단계: Historical backfill (optional)

Through the custom setup, you have the option to load your Shopify customers and orders from the past 90 days before connecting your Shopify integration. To include this initial data load, check the box for the initial data load option.

If you prefer to perform the backfill later, you can complete the initial setup now and return to this step at a later time.

Section to set up historical data backfill.

This table contains the data that will be initially loaded through the backfill.

Step 5: Custom data tracking setup (advanced)

With the Braze SDKs, you can track custom events or custom attributes that go beyond supported data for this integration. Custom events capture unique interactions in your store, such as:

Custom events Custom attributes
  • Using a custom discount code
  • Interacting with a personalized product recommendation
  • Favorite brands or products
  • Preferred shopping categories
  • Membership or loyalty status

The SDK must be initialized (listening for activity) on a user’s device to log events or custom attributes. To learn more about logging custom data, refer to User object and logCustomEvent.

6단계: 사용자 관리 방법 구성(선택 사항)

Select your external_id type from the dropdown.

“Collect subscribers” section.

기본값으로 Braze는 Shopify의 이메일을 외부 ID로 사용하기 전에 소문자로 자동 변환합니다. 이메일 또는 해시된 이메일을 외부 ID로 사용하는 경우 이메일 주소를 외부 ID로 할당하기 전이나 다른 데이터 소스에서 해시하기 전에 이메일 주소도 소문자로 변환되었는지 확인하세요. 이렇게 하면 외부 ID의 불일치를 방지하고 Braze에서 중복된 고객 프로필이 생성되는 것을 방지할 수 있습니다.

Step 6.1: braze.external_id 메타필드 만들기

  1. Shopify 관리자 패널에서 설정 > 메타필드로 이동합니다.
  2. 고객 > 정의 추가를 선택합니다.
  3. For Namespace and key, enter braze.external_id.
  4. 유형에서 ID 유형을 선택합니다.

메타필드가 생성되면 고객을 위해 메타필드를 채웁니다. 다음과 같은 방법을 권장합니다:

  • 고객 제작 웹훅을 들어보세요: customer/create 이벤트를 수신하도록 웹훅을 설정합니다. 이를 통해 새 고객이 생성될 때 메타필드를 작성할 수 있습니다.
  • 기존 고객을 다시 채우세요: 관리자 API 또는 고객 API를 사용하여 이전에 생성한 고객의 메타필드를 다시 채우세요.

Step 6.2: 외부 ID를 검색할 엔드포인트 만들기

외부 ID를 검색하기 위해 Braze가 호출할 수 있는 공용 엔드포인트를 만들어야 합니다. 이를 통해 Shopify에서 braze.external_id 메타필드를 직접 제공할 수 없는 시나리오에서 Braze가 ID를 가져올 수 있습니다.

엔드포인트 사양

Method: GET

Braze는 다음 매개변수를 엔드포인트로 전송합니다:

엔드포인트 예시
1

GET https://mystore.com/custom_id?shopify_customer_id=1234&[email protected]&shopify_storefront=dev-store.myshopify.com
예상 응답

Braze는 외부 ID JSON을 반환하는 200 상태 코드를 기대합니다:

1
2
3

{
  "external_id": "my_external_id"
}
검증

shopify_customer_id 및 email_address (있는 경우)이 Shopify의 고객 값과 일치하는지 확인하는 것이 중요합니다. Shopify 관리자 API 또는 고객 API를 사용하여 이러한 매개 변수의 유효성을 검사하고 올바른 braze.external_id 메타필드를 검색할 수 있습니다.

실패 동작 및 병합

200 이외의 상태 코드는 모두 실패로 간주됩니다.

  • 의미 병합: 엔드포인트가 실패하면(200 가 아닌 반환되거나 시간 초과), Braze는 외부 ID를 검색할 수 없습니다. 따라서 Shopify 사용자와 Braze 사용자 프로필 간의 병합은 해당 시점에 이루어지지 않습니다.
  • 로직을 다시 시도합니다: Braze는 표준 즉시 네트워크 재시도를 시도할 수 있지만, 실패가 지속되면 다음 적격 이벤트(예: 사용자가 프로필을 업데이트하거나 결제를 완료할 때)까지 병합이 연기됩니다.
  • 지원 가능성: 적시에 사용자 병합을 지원하려면 엔드포인트의 가용성이 높고 email_address 필드를 원활하게 처리하는지 확인하세요.

Step 6.3: 외부 ID를 입력하세요.

6단계를 반복하고 Braze 외부 ID 유형으로 커스텀 외부 ID를 선택한 후 엔드포인트 URL을 입력합니다.

고려 사항
  • Braze가 엔드포인트에 요청을 보낼 때 외부 ID가 생성되지 않은 경우 통합은 changeUser 함수가 호출될 때 기본값으로 Shopify 고객 ID를 사용합니다. 이 단계는 익명 사용자 프로필을 식별된 사용자 프로필과 병합하는 데 매우 중요합니다. 따라서 일시적으로 워크스페이스 내에 여러 유형의 외부 ID가 존재할 수 있습니다.
  • braze.external_id 메타필드에서 외부 ID를 사용할 수 있으면 통합에서 이 외부 ID에 우선순위를 지정하여 할당합니다.
    • 이전에 Shopify 고객 ID가 Braze 외부 ID로 설정된 경우 braze.external_id 메타필드 값으로 대체됩니다.

Step 6.4: Collect your email or SMS opt-ins from Shopify (optional)

You have the option to collect your email or SMS marketing opt-ins from Shopify.

If you use the email or SMS channels, you can sync your email and SMS marketing opt-in states into Braze. If you sync email marketing opt-ins from Shopify, Braze will automatically create an email subscription group for all users associated with that specific store. You need to create a unique name for this subscription group.

“Collect subscribers” section with option to collect email or SMS marketing opt-ins.

Step 7: Sync products (optional)

You can sync all products from your Shopify store to a Braze catalog for deeper messaging personalization. Automatic updates occur in near real-time so your catalog always reflects the latest product details. To learn more, check out Shopify product sync.

Setup step to sync product data to Braze.

8단계: Activate channels

To activate in-app messages, Content Cards, and Feature Flags using the Shopify direct integration, add each channel to your SDK. Follow the documentation links provided for each channel below:

  • In-app messages: For enabling in-app messages for lead capture form use cases, refer to In-app messages.
  • Content Cards: For enabling Content Cards for inbox or website banner use cases, refer to Content Cards.
  • Feature flags: For enabling Feature Flags for site experimentation use cases, refer to Feature flags.

Step 9: Finish setup

After you’ve gone through all the steps, select Finish Setup to return to the partner page. Then, enable the Braze app embed in your Shopify admin page as indicated by the banner that displays.

Banner that says to activate the Braze app embed in Shopify so that you can finish setting up your integration.

코드 예제

shopify-hydrogen-example is an example Hydrogen app that contains all the code covered in the prior steps.
Github   GitHub 에서 이 페이지를 편집합니다.
New Stuff!