Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Styling your checkout page

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.

Note: It isn't possible to change the checkout page text at this time.

Watch a video

Style the checkout page

  1. In the Home menu, click Design, then click Checkout Page.
  2. Use style tweaks to customize different elements of the page.
  3. When you’re finished styling the checkout page, click Save.

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
  • 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.

checkout-page-styles3.png

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

Review the order confirmation page

Your Order Confirmed page matches your site’s styles. You can see what it looks like by running a test order.

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

  • "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 digital downloads" font - Follows Heading 3
  • "Your purchase includes digital 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 digital 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?
12 out of 53 found this helpful
Styling your checkout page