Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

HeyKK
Shopify Partner
3 0 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.

Replies 2 (2)

Vishal2141
Shopify Partner
1 0 0

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: 

 <Banner title="checkout-ui" status='info'>
      {translate('welcome', {target: extension.target})}
    </Banner>

 

 

 

CodieApps
Shopify Partner
7 1 3

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