Shopify Checkout Personalization

The Dynamic Yield Shopify Checkout integration enables merchants to deliver personalized content and experiences inside Shopify Checkout using Dynamic Yield campaigns, without custom checkout code.

Using this integration, you can place Dynamic Yield campaign banners and content blocks at strategic positions throughout the Shopify checkout flow. Campaign content is rendered as native Shopify checkout UI components, and engagement events (impressions, clicks) are automatically tracked back to Dynamic Yield for reporting and attribution.

How it works

The checkout extension uses the Dynamic Yield identifiers already present on the storefront (via the Dynamic Yield Shopify integration) to call the Choose API with a configured selector name. It renders the returned campaign variation as native Shopify checkout components and tracks engagement back to Dynamic Yield.

Storefront (Dynamic Yield Shopify Store integration active)
    │
    ├─ Dynamic Yield identifiers synced to Shopify cart attributes
    │
    ▼
Checkout Page
    │
    ├─ Dynamic Banner extension reads identifiers from checkout attributes
    ├─ Calls the Dynamic Yield Choose API with the configured selector
    ├─ Renders the returned campaign content as native checkout UI
    └─ Tracks impressions and clicks back to Dynamic Yield

Prerequisites

Before setting up checkout personalization, ensure the following are in place:

• Dynamic Yield Shopify integration installed and configured: The Dynamic Yield Shopify Store integration must be implemented with your Dynamic Yield API key and section ID configured. The DY Cookie Sync theme extension must be enabled so that user and session identifiers (_dyid_server, _dy_app_jsession) are synced to Shopify cart attributes. See the [Shopify Store integration](https://dy.dev/docs) article for more information.
• Shopify Plus: Checkout UI extensions require a Shopify Plus plan.
• At least one Dynamic Yield campaign configured in Experience OS with a selector name intended for checkout (for example, checkout-top or checkout-bottom).

Adding dynamic banners to checkout

You can place one or more Dynamic Banner blocks at different positions within the Shopify checkout.

1. In your Shopify admin, go to Settings › Checkout.
2. Click Customize checkout.
3. In the checkout editor, navigate to the section where you want to add a banner (for example, the top of the checkout page or the order summary sidebar).
4. Click Add app block and select Dynamic Banner.
5. In the block settings, enter a Selector Name. This must match the selector name configured in your Dynamic Yield campaign (for example, checkout-top).
6. Drag the block to your desired position.
7. Click Save.

Repeat this process to add banners at multiple positions, each with a different selector name.

🚧

Selector names must match your Dynamic Yield campaigns

The selector name you enter in the checkout editor must exactly match a selector configured in your Dynamic Yield campaign. If they don't match, no content will be rendered for that position.

Creating campaigns in Experience OS

With the integration installed and configured, you create and manage your checkout personalization campaigns entirely in Experience OS — no code changes needed.

Campaign setup

1. In Experience OS, create a new Experience API campaign.
2. Set the selector name to match the one you configured in the checkout editor (for example, checkout-top).
3. Design your variation using the supported component structure (see Supported Components in the following section).
4. Configure your targeting rules. For example, target users based on cart value, audience segment, device type, or geography.
5. Activate the campaign.

The Dynamic Banner extension calls the Dynamic Yield Choose API on each checkout page load, passing the selector name, user identity, session, device information, and locale. Dynamic Yield evaluates targeting rules and returns the winning variation, which is rendered as native Shopify checkout UI.

Supported components

Campaign content is defined as a JSON structure in Dynamic Yield and rendered as native Shopify checkout components. The following component types are supported:

Example campaign payload

The following JSON structure in a Dynamic Yield campaign variation renders a success banner in the Shopify checkout:

{
  "type": "banner",
  "heading": "🎉 You qualify for free shipping!",
  "tone": "success",
  "children": [
    {
      "type": "text",
      "content": "Your order of $75+ ships free. No promo code needed."
    }
  ]
}

A more complex layout with a promotional banner and a call-to-action:

{
  "type": "blockStack",
  "spacing": "base",
  "children": [
    {
      "type": "banner",
      "heading": "Limited Time Offer",
      "tone": "warning",
      "children": [
        {
          "type": "inlineStack",
          "spacing": "base",
          "blockAlignment": "center",
          "children": [
            {
              "type": "text",
              "content": "Add one more item to get 15% off your entire order."
            },
            {
              "type": "button",
              "content": "Browse Products",
              "kind": "secondary",
              "url": "/collections/all"
            }
          ]
        }
      ]
    }
  ]
}

Engagement tracking

The integration automatically tracks engagement events back to Dynamic Yield:

• Impressions: Tracked when a campaign variation renders in the checkout. Each variation is reported once per checkout session.
• Clicks: Tracked when a user interacts with a button in the rendered campaign.

These events are sent to the Dynamic Yield Engagement API with the variation ID and decision ID from the original Choose API response, enabling accurate attribution and reporting in Experience OS.

Targeting context

The checkout extension sends the following context to the Dynamic Yield API, enabling rich targeting rules in Experience OS:

• User and session identity: Inherited from the storefront via cart attributes, ensuring consistent targeting across the full shopping journey. For Buy It Now flows, identifiers are passed via line item properties.
• Device type: Detected as DESKTOP, TABLET, or MOBILE based on the user agent.
• Browser: Detected as Chrome, Safari, Firefox, Edge, or Other.
• Locale: The buyer's language and country (for example, en_US) as determined by Shopify's localization settings.

This enables you to create campaigns that target specific devices, browsers, or regions. For example, showing a mobile-specific banner or a region-specific promotion.

Use cases

Here are some common ways merchants use this integration:

Troubleshooting

No content appears at checkout

• Confirm that the selector name in the checkout editor exactly matches the selector in your Dynamic Yield campaign.
• Verify that the base Dynamic Yield Shopify integration is properly configured (API key, section ID, cookie sync enabled).
• In the browser developer tools, look for network requests to direct.dy-api.com and inspect the responses.

Content appears on some visits but not others

• The Dynamic Yield campaign might have targeting rules that exclude certain users or sessions. Check your campaign targeting in Experience OS.
• The campaign might be in a test state. Verify that it's active and published.

Limitations

• Shopify Plus required: Checkout UI extensions are only available on Shopify Plus plans.
• Component types: Only the component types listed in Supported Components are rendered. Unsupported types in the campaign payload are ignored.
• No custom CSS: The rendered components use Shopify's native checkout UI styles. Custom CSS is not supported in checkout UI extensions.
• Single campaign per selector: Each Dynamic Banner block renders the result of one Choose API call for one selector. To show multiple campaigns, add multiple Dynamic Banner blocks with different selectors.