Customize your checkout with custom CSS

Add your own styles to make your checkout match your brand

Custom CSS lets you change the look and feel of your one page 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 for concierge styling services.

How to add Custom CSS to a checkout page

1. Open your Checkout Page dashboard and click on the checkout you want to customize
2. Go to the Design tab and scroll down to the Custom CSS field

3. 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_variant {}
.cp_variant-label {}
.cp_variant-items {}
.cp_variant-item {}
.cp_variant-name {}
.cp_variant-price-wrapper {}
.cp_variant-price {}
.cp_variant-soldout {}

.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 {}