Styling your checkout page

false

Styling your checkout page

Last updated December 30, 2025 16:17

Align your checkout page with your site’s design.

Style the checkout page to match the aesthetic of your site. You can customize the header alignment and the text, background, and button colors. These changes also apply to the donation block checkout page.

To learn about the other ways you can customize your checkout page, visit Customizing your checkout experience and Creating an accessible Commerce site.

Note: It's not possible to change the checkout page text at this time.

Watch a video

Style the checkout page

To style the checkout page:

  1. Open the Pages panel, scroll to the bottom and click System Pages, then click Checkout.
  2. Use style tweaks to customize different elements of the page.
  3. When you’re finished styling the checkout page, click Save.

Keep in mind, the checkout page for products and services displays in a split screen. Checkout page style changes only apply to the right side of the page. It's not possible to customize the left side.

A banner displays that says Checkout is disabled. This means the changes you’re making aren’t visible yet, but customers can still buy your products while you style the page. Your changes won’t be visible until you save the page.

You can adjust:

  • Background Color- Change the background color of the right half of the checkout page. The left half always displays white behind the customer's checkout details.
  • Show Site Logo
  • Title Color - Change your Site Title color, if Show Site Logo is unchecked.
  • Header Color
  • Header Border Color
  • Header Alignment - Display the title or logo in the Left, Center, or Right of the header.
  • Button Color - Change the buttons on the page, including the Continue and Redeem buttons. We don't recommend changing the color to transparent or white. Since the button text can't change, this hides the button and prevents customers from continuing with the transaction.

Note: It's not possible to change the appearance of your site title on the checkout page.

Add or edit checkout fields

You can add more fields to checkout by creating a custom checkout form. It's not possible to edit the text of the built-in checkout fields.

After checkout

The page that displays after checkout depends on the customer's purchase.

Order status page: physical, digital, and service products

If your customer bought a physical, digital, or service product, the order status page displays. This page includes most order details and the option to create a customer account. It always has a white background and uses a standard font. It's not possible to customize the order status page in Site Styles. To preview the order status page, visit How customers buy your products, or run a test order with a supported product type.

Note: If the order status page doesn't display when you run a test order for a supported product type, it's likely because you added code injection to your site. To learn more, visit Using code injection.

Order confirmation page: subscription, gift cards, and memberships

If your customer bought a subscription, gift card, or membership, a more streamlined order confirmation page displays, which displays the text Order Confirmed and the order number. This page matches your site’s styles. To preview the order confirmed page, run a test order with a supported product.

How you style the order confirmed page text depends on your site's version.

Use the tweaks below to style the order confirmed page. Keep in mind, the color theme of the order confirmed page is the same as your default 404 page.

  • “Order confirmed” font - Follows Heading 1
  • “Order confirmed” color - Follows Heading (Extra Large)
  • Order number and confirmation text font - Follows Paragraph 2
  • Order number and confirmation text color - Follows Paragraph (Medium)
  • “Your purchase includes downloads” font - Follows Heading 3
  • “Your purchase includes downloads” color - Follows Heading (Medium)

In all templates:

  • “Order confirmed” text - Follows Heading 1 text
  • Order number and confirmation text - Follows body text
  • “Your purchase includes downloads” text - Follows Heading 3 text

To learn more about changing fonts and colors, visit Making style changes.

Order confirmation page header content

It's not possible to add images and other content to your checkout page. However, in version 7.0, these template families display content from their default 404 pages on order confirmation pages, shopping carts, and searches:

  • Avenue
  • Farro
  • Five
  • Wexley
  • York

To remove unwanted header content in these template families, edit your default 404 page, or create a custom 404 page.

Next steps

Now that you’ve adjusted the checkout page style, you can customize other elements of the checkout experience:

To learn more, visit Customizing your checkout experience.

Was this article helpful?

Yes No

60 out of 215 found this helpful

Yes No

Styling your checkout page