How to Apply custom css to Billing info form, Order summary section in checkout page

Store Design

Topic summary

Applying targeted custom CSS to native checkout sections (Contact and shipping, Order summary, Billing information) on a Shopify Plus store. Checkout.liquid will be deprecated on August 13, 2024, pushing customization toward Checkout UI Extensions and Advanced Checkout Branding.

Key issue: Merchants can add global CSS to the checkout, but it’s unclear how to scope styles specifically to default forms/sections through UI Extensions or branding options.

Context: UI Extensions allow adding components to the checkout, yet posters could not find documentation on styling the existing native sections directly.

References reviewed: Shopify docs for Advanced Checkout Branding and Checkout UI Extensions extension points.

Current status: No solution or implementation details have been provided. Another participant confirms the same need. The thread remains open with unanswered questions on whether and how targeted CSS can be applied to default checkout sections under the new approach.

Summarized with AI on January 22. AI used: gpt-5.
1

We know that for plus store checkout page customization is possible.
as checkout.liquid will deprecate on August 13, 2024 we have to consider checkout UI extension. This extension enables us to include additional components on checkout page.
But how can we apply custom CSS to default forms and sections like (Contact and shipping, Order summary, billing information etc.)?

I know that we can add some custom CSS on the checkout page as a whole but I want to apply CSS more specifically on (Contact and shipping, Order summary, billing information etc.)

How can I achieve that?
I’ve already checked advanced-checkout-branding and checkout-ui-extension .

2

I have the same question.
If anyone can provide some useful info, it would be much appreciated.