Tutorials

Styling checkout and customer-account pages

Your branding renders across four surfaces: checkout, the thank-you (order status) page, customer accounts and sign-in. This guide covers what each one is, what you can change, and the one surface that behaves differently.

The four surfaces

Surface When customers see it What you style
Checkout Paying for an order Colors, type, corners, logo, custom sections
Thank-you Right after purchase (order status) Same brand carried through, custom sections
Customer accounts Managing orders and profile Colors, type, corners, logo
Sign-in Logging in to an account Colors, type, corners, logo

Plan note: every surface - checkout, thank-you and customer-account pages, plus custom sections - is included in the Pro plan. Shopify Plus is required - see Plans and usage.

One brand, every surface

Because branding flows from shared design tokens, setting your color, type and corners once carries them across checkout, thank-you, accounts and sign-in automatically. You do not restyle each page from scratch - you adjust the tokens and every surface follows.

The sign-in surface is special

Sign-in uses its own isolated styling in Shopify - it does not inherit everything the other surfaces do. The editor accounts for this: its preview reflects the sign-in surface's separate cascade, so what you see there is what customers get. If sign-in looks different from checkout, that is expected - check it on its own preview rather than assuming it mirrors checkout.

Custom sections

On Pro, you can add custom sections to bring extra content into checkout and the thank-you page - reassurance, brand messaging or policies - within the slots Shopify allows. Keep them short; checkout works best when it stays focused on completing the order.

Check the component gallery

Alongside the four surfaces, the preview includes a branded component gallery - buttons, fields, headings and more in one place. It is the quickest way to confirm your tokens look right on every element before you scan the full pages.

Next steps