
Custom CSS lets you change the look and feel of your checkout. If you know CSS, this can be a great way to make your checkout yours. Not sure what CSS is or how to use it? [Contact us](mailto:support@checkoutpage.co) for congierge styling services.

## How to add Custom CSS to a checkout page

Open the page you want to customize in the dashboard. Go to the Settings tab and click 'Custom CSS' or scroll down to the 'Custom CSS' field. Write your CSS in the field and hit save, you'll see your changes in the preview right away.
We've created specific CSS classes for you to use, which you can find below.

The following CSS classes are available:

```
// page
.cp_page {}

// pop-up
.cp_pop-up {}
.cp_pop-up-close {}

// checkout
.cp_checkout {}

// card
.cp_card {}

// button
.cp_button {}

// error
.cp_error {}

// loading
.cp_loading-container {}
.cp_spinner {}

// product
.cp_product-wrapper {}
.cp_product-logo {}
.cp_product {}
.cp_product-content {}
.cp_product-title-wrapper {}
.cp_product-title-container {}
.cp_product-title {}
.cp_sold-by-wrapper {}
.cp_sold-by-seller {}
.cp_product-price-wrapper {}
.cp_product-price {}
.cp_product-interval {}
.cp_sold-out {}
.cp_product-description-wrapper {}
.cp_product-description {}
.cp_product-image {}

// divider
.cp_divider {}

// checkout form
.cp_form-wrapper {}

.cp_form {}

.cp_variants {}

.cp_form-item {}
.cp_form-label {}

.cp_form-textinput {}
.cp_form-checkbox {}
.cp_form-textarea {}
.cp_form-select {}
.cp_form-option {}

// coupon
.cp_coupon-wrapper {}
.cp_coupon-form {}
.cp_coupon {}
.cp_coupon-code {}
.cp_coupon-discount {}
.cp_coupon-remove {}

// pay what you want
.cp_paywhatyouwant-input {}

// payment method
.cp_payment-method-switcher {}
.cp_payment-method-button {}
.cp_element-wrapper {}
.cp_stripe-card-element {}
.cp_stripe-ideal-element {}
.cp_bancontact-text {}

// pay button
.cp_pay-button-wrapper {}
.cp_pay-button {}

// processing
.cp_processing {}
.cp_processing-title {}

// status (paid, failed, canceled, pending)
.cp_status-wrapper {}
.cp_status-title {}
.cp_status-content {}
.cp_status-text {}

// downloads
.cp_view-downloads-button {}
```


Add your own styles to make your checkout match your brand

Customize your checkout with custom CSS


## Appearance

Checkout Page makes it easy for your to customize your checkout. 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 match your brand or website design.

### Store settings

**Store settings** are where you can add a store name, logo, site link, and more.

Changes you make in **Store settings** change the look and feel of your checkouts, payment links, emails to customers, and your customer portal.

### Store logo

Shows your logo when you’ve added a logo under **Store settings**.

Checked and visible by default, but you can uncheck it to hide your logo from this checkout.

### Store name

Shows your store name when you’ve added a store name under **Store settings**.

Checked and visible by default, but you can uncheck it to hide your store name from this checkout.

### Product text alignment

Aligns the product text in your checkout.

- Product name
- Price
- Store name
- Description

Left alignment checked by default.

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

### Pay button background-color

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

Pay 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 pay button background and text color combination that has enough contrast to make the text easy to read.

### Pay 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.

### Background color of checkout (not pop-up)

This is the background color of the checkout when viewing your checkout from a payment link or when embedding your checkout on a web page.

Please note, that this is not the background color of your checkout when viewing the checkout pop-up or embed.

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

<hr/>

## Badges

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 ‘Sold with Checkout Page’

The Checkout Page platform badge.

To uncheck and remove this badge, upgrade to our Premium plan.

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

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

<hr/>

## 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:

- [Currency formatting](/help/articles/currency-formatting)
- [Custom CSS](/help/articles/adding-custom-css-to-your-checkout)
- [Custom labels](/help/articles/custom-text-labels)


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

Design your checkout


## Badges

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 ‘Sold with Checkout Page’**

The Checkout Page platform badge.

To uncheck and remove this badge, upgrade to our Premium plan.

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

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

**‘Powered by Stripe’ badge color**

The color of your Stripe badge.

Your Stripe badge color defaults to black.

Choose between a black or white badge.

We recommend using a checkout background color and Stripe badge color combination that has enough contrast to make the badge easy to read.

Click **Save** to see your changes.


In this help article, we’ll cover checkout badges, why we recommend keeping them visible, and how to remove them if you wish to do so.

Badges


## Customizing text labels

Here's how you can customize/translate your checkout text labels:

- Click **Create checkout** from your dashboard
- Add your **Product name**
- Add your **Price**
- Click **Create checkout** to move to the next steps
- Visit the **Design** tab
- Open the **Custom text labels** dropdown
- Scroll down to find the text label you wish to change
- Replace the default text with your new label text
- Click **Save** to see your changes

You can change the following text labels:

- **Sold by**
  - “Sold by”
- **Interval count**
  - “every”
- **Day interval**
  - “day”
- **Week interval**
  - “week”
- **Month interval**
  - “month”
- **Year interval**
  - “year”
- **Sold out**
  - “Sold out”
- **Sold out button**
  - “Sold out”
- **Discount code**
  - “Discount code”
- **Discount code placeholder**
  - “Discount code”
- **Discount code apply**
  - “Apply”
- **Pay what you want**
  - “Pay what you want”
- **Pay what you want placeholder**
  - “Pay what you want placeholder”
- **Card**
  - “Card”
- **Bancontact message**
  - “You’ll be redirected to the banking site to complete your payment.”
- **Pay button**
  - “Pay”
- **Subscribe button**
  - “Subscribe”
- **Submit button**
  - “Submit”
- **Processing payment**
  - “Processing payment”
- **View downloads**
  - “View downloads”

<hr/>

## Translating labels

Whilst we don’t support Checkout Page in any other language than English, it is possible to manually translate your text label into any language.

<hr/>

## Field labels

If you wish the change your checkouts field labels, navigate to **Fields** and you can change the field label text here.

[Learn more about adding custom fields](/help/articles/how-to-add-custom-fields)

<hr/>

## After-payment checkout confirmation and email confirmation

Shown and sent to customers after successful checkout, the text in this message and email can be customized or manually translated into any language.

[Learn more about after-payment messages](/help/articles/how-do-I-display-a-confirmation-message-after-successful-checkout)

[Learn how to send an email confirmation here](/help/articles/how-do-I-send-an-email-confirmation-after-successful-checkout)


In this help article, we’ll cover how you can customize or translate the text labels in your checkout.

Help center

Have a question about
Checkout Page?

Get started

Checkout Page

Platforms

Checkouts for all businesses

Alternatives