Checkout Extensions Widget Price Color: Setting the Color With Shopify's Checkout Branding API

Product prices shown inside a Checkout Extensions widget, such as a checkout cross-sell or upsell block, may no longer match your checkout's accent color. This article explains why and how to set the price color using Shopify's Checkout Branding API. This does not affect Shopify's own order summary, line item, or total prices, only price text rendered inside a Rebuy Checkout Extensions widget. Setting a custom price color requires a Shopify Plus plan.

Why the price color changed

Shopify retired the older checkout technology and rebuilt checkout on its current extensibility system so a recent update to the Checkout Extensions widget renderer changed how widget price text picks up checkout branding colors.

Shopify's checkout editor at Settings > Checkout > Customize checkout has two settings labeled Accent: the Header section's Accent swatch, which colors links and the cart icon, and the Accent and buttons section's Accent swatch, which colors links, selections, and buttons and used to color widget prices as well. Neither Accent swatch, nor any other color in the checkout editor, controls widget price text anymore. Widget prices now follow a separate color that defaults to Shopify's blue (#005BD1) and has no control anywhere in the checkout editor.

Checkout Extensions widget prices display in Shopify default blue - before using the Shopify Checkout Branding API

Checkout Extensions widget prices display in the custom color hex using the Shopify Checkout Branding API

Setting the widget price color

Setting the widget price color can be set with one API call, on Shopify Plus plans only. Set the color using Shopify's GraphiQL app and the following steps.

Step 1: Install the GraphiQL app

Go to shopify.dev's Tools page to install the GraphiQL app on your store. When choosing permissions during setup, include write_checkout_branding_settings.

install the GraphiQL app on your store. When choosing permissions during setup, include write_checkout_branding_settings.

Step 2: Retrieve your checkout profile ID

In GraphiQL, run the following query:

query {
  checkoutProfiles(first: 5) {
    nodes { id name isPublished }
  }
}

Copy the id value from the result where isPublished is true. That ID identifies your live checkout profile.

Step 3: Apply your color

Use your store's accent hex value as the color, and paste your checkout profile ID from Step 2 into the Variables pane.

In the query editor, replace #YOURHEX with your store's accent hex value and run the following mutation:

mutation SetPriceColor($profileId: ID!) {
  checkoutBrandingUpsert(
    checkoutProfileId: $profileId
    checkoutBrandingInput: {
      designSystem: { colors: { global: { decorative: "#YOURHEX" } } }
    }
  ) {
    userErrors { field message }
  }
}

In the separate Query Variables pane, paste your checkout profile ID from Step 2:

{ "profileId": "gid://shopify/CheckoutProfile/PASTE_ID" }

Step 4: Verify the change

Reload your store's checkout page and confirm prices now display in the color you set.

Verified color hex value rendering on the live checkout widget, no longer default blue..

What else to know

The color this mutation sets is not price-specific. It can affect other checkout highlight elements that share the same underlying color, so review your checkout after applying the change.
To revert to Shopify's default blue, run the same mutation from Step 3 with decorative set to null instead of a hex value.
This is available on Shopify Plus plans only, since the Checkout Branding API itself is Plus-gated. Merchants on other plans cannot access this.
Shopify's own support team can also walk you through this process if you run into issues with the GraphiQL app or the mutation.