How can I customize the color of a checkout extension app?

Shopify Apps
,

Topic summary

Main issue: customizing colors (e.g., a pink background) for a Checkout UI Extension block in Shopify, similar to what was possible with checkout.liquid.

Constraints: Checkout UI Extensions restrict arbitrary CSS; developers must use predefined components and their limited styling options.

Available options:

  • Branding API: lets merchants set brand colors that extensions can inherit, but does not allow per-block arbitrary colors.
  • Component props: certain components expose limited color variants. Example: Banner status can be ‘info’, ‘success’, ‘warning’, or ‘critical’ (affecting its color).
  • View component backgrounds: only ‘transparent’, ‘base’, or ‘subdued’ are available.

Outcome: Direct custom CSS (e.g., background-color: pink) is not supported at this time. Styling is limited to predefined variants and brand settings via the Branding API.

Status: Effectively resolved with the clarification that arbitrary color customization is not currently possible; use the limited presets or Branding API where applicable.

Summarized with AI on December 27. AI used: gpt-5.
1

Hello,

I’m trying to build just simple app to display a message in checkout page using checkout UI extension and I notice that if I want to change the color of this block, It just very simple with checkout.liquid before.

But for now, we only need to stick with the components here https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components

Is there anyway I can custom like using background-color: pink or something like that?

Thank you and I’m very appreciated for your time with this question.

1 Like
2

The Branding API has an option to add colors or you can add colors with limitations using this Prop,
Status: ‘info’ | ‘success’ | ‘warning’ | ‘critical’

Here is an example:

{translate('welcome', {target: extension.target})}
3

At the moment you can’t do that. You can use for example View component with ‘transparent’ | ‘base’ | ‘subdued’ values only.