Design your page

In this help article, we’ll cover designing the look and feel of your checkout or form.

Appearance

Checkout Page makes it easy for you to customize your one-page checkout or form. Add your logo and colors, change the text, or even change the design with CSS.

In just a few clicks, you can make your checkout or form match your brand or website design.

To change the appearance of your one-page checkout or form:

  1. Go to your Checkout Page dashboard and click on your checkout or form
  2. Open the Design tab and go to the Appearance section
image-76c001.png

Business settings

This is where you can add a store name, logo, site link, and more.

First, you have to add this information in your Business settings and then you can choose the information you’d like to show on each individual page.

Your Business settings can change the look and feel of your checkouts, forms, payment links, emails to customers, and your customer portal.

Learn how to add your business settings here

Once you have added your business information, you can choose what to show on your one-page checkout or form by ticking the boxes in the Appearance section.

image-bf03.png

Product text alignment

Aligns the product text in your one-page checkout or form.

  • Product name
  • Price
  • Store name
  • Description

Left alignment checked by default.

Check Center to center and align your product text in your checkout.

image-bf9c.png

Make sure to scroll down to hit Save and save your changes.

Show price breakdown

Tick this box to show your customer the total amount due today.

Please note: This feature is only available for the payment plan and subscription checkouts.

image-748d.png

Make sure to scroll down to hit Save and save your changes.

Button background color

This is the color of your button background and text color in your checkout or form.

The button background defaults to black (#000000).

Use the color picker or type your Hex value to add your color.

If you change the background color, click X to reset the background color back to black (#000000).

We recommend using a button background and text color combination with enough contrast to make the text easy to read.

image-50c0.png

Make sure to scroll down to hit Save and save your changes.

Button text color

The color of the text in your pay button.

Your pay button text color defaults to white.

Choose between white or black text.

image-6f8b.png

Make sure to scroll down to hit Save and save your changes.

Page background color

This is the background color of the checkout when viewing your checkout or form as a page.

The background color of checkout defaults to a light grey (#F9F9F7).

Use the color picker or type your Hex value to add your color.

If you change the background color, click X to reset the background color back to light grey (#F9F9F7).

image-e086.png

Make sure to scroll down to hit Save and save your changes.

Badges (checkouts only)

Badges help establish trust through association with Stripe.

We recommend keeping the Stripe badges visible as your customers are more likely to make purchases when they trust their payment is secure.

Show ‘Payments are secure & encrypted’

Let your customers know that their payments are secure & encrypted.

Checked and visible by default, but you can uncheck it to remove this badge.

image-f3de.png

Make sure to hit Save and save your changes.

Show ‘Powered by Stripe’

Let your customers know that their payments are processed by Stripe.

Checked and visible by default, but you can uncheck it to remove this badge.

image-3fe0.png

Make sure to hit Save and save your changes.

Currency formatting, custom CSS, custom labels

Now that you’ve changed the look and feel of your checkout. It’s time to learn more about the next steps: