New in Chargebee: Explore Reveal and understand your payment performance end-to-end.Try Now
Docschargebee docs
HomeBillingPaymentsRevRecGrowthReveal
Support

Product Updates

  • Release Notes

Getting Started

  • Overview
  • Chargebee Billing Data Centers
  • Object Relationship Model
  • Understanding Sites
  • Chargebee Tech Glossary
  • Articles and FAQ

Implementing Chargebee

  • Implementation Guide
  • Go-live Checklist
  • Articles and FAQ

AI in Chargebee

  • Chargebee Agents
  • Chargebee Copilot
  • Chargebee MCP Server (Model Context Protocol)

Developer Resources

  • Developer Resources Overview
  • Articles and FAQ

Product Catalog

  • Product Catalog Overview
  • Coupons
  • Articles and FAQ

Subscriptions

  • Working with Subscriptions
  • Billing
  • Orders
  • Articles and FAQ

Customers

  • Managing Customers
  • Account Hierarchy
  • Email Notifications
  • Branding
  • Configure Multiple Languages
  • Articles and FAQ

Entitlements

  • Entitlements Overview
  • Features Overview
  • Feature Management
  • Managing Product Entitlements
  • Subscription Entitlements
  • Customer Entitlements
  • Grandfathering Entitlements
  • Articles and FAQ

Usage Based Billing

  • Understanding Usages
  • Setting up Usage Based Billing
  • Usage Alerts
  • Metered Billing
  • Articles and FAQ

Chargebee CPQ

  • Chargebee CPQ
  • Chargebee CPQ for Salesforce
  • Chargebee CPQ for HubSpot

Invoices, Credit Notes, and Quotes

  • Invoices
  • Credit Notes
  • Quotes [Legacy]
  • Transactions
  • Articles and FAQ

Taxes

  • Overview
  • Configuring Taxes
  • Country-specific Taxes
  • Articles and FAQ

Hosted Capabilities

  • Overview
  • Hosted Checkout
    • Integration Options
    • Features
      • Customize the Checkout Layout
      • Returning user management
      • Checkout One-Time Payments
      • Checkout Without Payment Details
      • Single step checkout
      • Skip cart
      • Recover Abandoned Carts
    • Configuring Checkout
    • Configuring Fields and Labels
    • Checkout Layout - Feature Comparison
    • FAQ
  • Hosted Self-Serve Portal
  • Hosted Pages Features
  • Additional Hosted Pages
  • Payment Components
  • Pricing Table
  • Managing Payments with Chargebee.js
  • Mobile-Optimized Hosted Pages
  • Articles and FAQ

Site Configuration

  • Users & Roles
  • Custom Fields & Metadata
  • Approvals
  • Mandatory Fields
  • File Attachments & Comments
  • Advanced Filter Options
  • Multicurrency Pricing
  • Multi-decimal Support
  • Configuring Reason Codes
  • Events and Webhooks
  • API Keys
  • Time Zone
  • Time Machine
  • Transfer Configurations
  • Articles and FAQ

Multi Business Entity

  • Multi Business Entity Overview
  • Customer Transfer Overview
  • Articles and FAQ

Mobile Subscriptions

  • Overview
  • Omnichannel Subscriptions
  • Omnichannel One-Time Orders
  • Mobile Subscriptions (Legacy)

Reports and Analytics

  • RevenueStory
  • Home Dashboard
  • Frequently Asked Questions
  • FAQs for Classic Reports Sunset
  • Articles and FAQ

Integrations

  • Sales
  • Customer Support and Success
  • Finance
  • Tax
  • eInvoicing
  • Marketing
  • Stitch
  • Collaboration
  • Contract Management
  • Ecommerce Management
  • Articles and FAQ

Data Privacy & Security

  • Two Factor Authentication
  • SAML Single Sign-On
  • System for Cross-Domain Identity Management (SCIM)
  • EU-GDPR
  • Consent Management
  • Personal Data Management
  • Compliance Certificates
  • HIPAA Guidelines
  • PCI Recommendations and Integration Types
  • Articles and FAQ

Data Operations

  • Bulk Operations
  • Migration
  • Articles and FAQ
  1. Billing
  3. Hosted Capabilities
  5. Hosted Checkout
  7. Features
  8. Customize the Checkout Layout
  1. Billing
  3. Hosted Capabilities
  5. Hosted Checkout
  7. Features
  8. Customize the Checkout Layout

Customize the Checkout Layout

Chargebee Checkout helps you create a seamless user experience by allowing you to customize its layout to match your existing brand. You can align your checkout page with your website's fonts, colors, and design principles. You can also adjust other user interface elements using an intuitive editor.

Note

You can't customize the Checkout experience based on the plan or other items selected from the product catalog.

Customize Layout

See also

Chargebee's branding feature allows you to customize the look and feel of your billing and subscription pages to match your brand identity. Learn more about branding.

To customize your branding on the full-page layout of the Checkout page, follow the steps below:

  1. Navigate to Configure Chargebee > Checkout & Self Serve Portal > Layout.

  2. In the Full Page Checkout, click Customize.

    image

Customize the Checkout page to suit your website branding using the various options available such as colors, typography and shapes.

image

Let us see how to customize Checkout pages using these settings.

Color

Choose different colors for the below elements on your customer-facing essentials. Pick a color from the range of available options:

  • Accent Color for buttons and links. The accent color drives the theme of your Checkout pages and will reflect on the call-to-action prompts within the Checkout pages.
  • Header Colorfor the top header banner.
  • Highlight Panel Color for the order summary recommended add-ons and success message panel.

Advanced Colors

The font color will change based on the selection.

Warning

While customizing these advanced colours, the readability aspect should be considered, as it may affect the user's experience.

  • Checkout page color for the background of the page.
  • Cards color: cards with the order details, and payment method options.
  • Input components color for the fields, radio selections, checkboxes, and quantity selectors.

You can also select the font family, font size from the Typography section, and Shape of the cards to match your design principles.

Product Images

You can add product images to your product catalog items to display them on the checkout pages.

Preview and Confirm

To preview and confirm your changes on the Customize Checkout page, follow these steps:

  1. Click Preview to view the sample Checkout page and verify your configuration.

  2. Click Undo Changes if you wish to undo the last changes. In the case of simultaneous editing, a warning message will appear. You can either Dismiss or Confirm your changes.

    image

  3. Click Update to save your configurations.

Let us see some variations from the preview of the Checkout pages after applying various color schemes.

Checkout variation 1:

image

Checkout variation 2:

image

Reset Defaults

You can reset to Chargebee default color schemes by clicking Reset to defaults on the customization page.

image

Note

You will not be able to retrieve your changes if you proceed with the reset.

Articles & FAQs

How to customize the In-app checkout pages (HPv3) in Chargebee?
I would like to re-direct my customer to the Edit Subscription (Customer Portal) page directly from my website. What API call can I use?
What is the difference between Tracking Pixels and Google Analytics in Chargebee?
Tracking code / Pixel tracking
Is it possible to change the order in which the payment methods are displayed in checkout?
“Wrong format” error while passing email id in checkout
How to make the billing address mandatory in the self-serve portal when my customer reactivates his subscription?
'Google Analytics: track_info_error on Checkout V3'
How can I make a subscription change immediately and pay later using the customer portal?
Can I let my customers set the Auto collection status at the self-serve portal?
How to hide the discount prompt from displaying?
How to remove the "Ship to my billing address" option in Checkout?
How to make“invoicing payment” optional for customers?
How to discarded or retain payment method when an invoice is created?
What can be customized as part of the legal terms shown in the portal?
How can my customers set a password for their self serve portal?
How to add shipping address?
How to validate the login of a user for the website using Chargebee's login credentials?
Allow customers to add addons on Self serve portal
How to navigate to the specific step in the Portal popup using JS/PHP?
Configuring Single Page checkout - Hosted pages V2
Checkout URL is not working
Unable to generate checkout URL in HubSpot Q2C

Show more

Was this article helpful?