Billflow
  • Quick Start
  • Setup
    • First Time Setup
      • Connect & Setup Stripe
      • Invite Team Members
      • Create Your First Billing Page
      • Embed The Billing Page
      • Activate Live Payments
  • Billing Pages
    • Plan Picker
    • Checkout Form
    • Customer Portal
    • Pricing Page
    • Invoice Portal
  • How-to's
    • Setup Pricing
      • Flat-rate Subscriptions
      • Free Trial
      • Unit-based
      • Meter-based
      • Setup Fees
      • One-Time Payment
      • Payment Plans (Subscription Schedules)
      • Complex Pricing
      • Add-ons
    • Connect to SaaS
      • Using Stripe Webhooks
    • Change Style
      • Plan Picker Style Templates
      • Customer Portal Style Templates
      • Pricing Page Style Templates
      • Checkout Form Style Templates
    • Update Pricing
    • Use Coupons
    • Enable Quantity Management
    • Enterprise Sales Flow
    • Cancellations/Payment Failures
      • Set up Cancellation Feedback
      • Configure Dunning Emails
    • Automated emails
    • Internationalization
      • Support multiple currencies
      • Support multiple languages
    • Upgrade to new Billing Pages
    • Record Usage
    • VAT & Taxes
    • Indian Recurring Payments
  • No-code Integrations
    • No-code App Builders
      • Bubble
        • How to connect Stripe webhooks to Bubble
      • Webflow
      • WordPress
        • Add Widgets
        • Advanced Usage
        • Useful Plugins
      • Notion
      • Drupal
    • Rewardful
    • ChurnKey
  • Developer Docs
    • Embed Configurations
      • Plan Picker Configs
      • Checkout Form Configs
      • Customer Portal Configs
      • Pricing Page Configs
      • Invoice Portal Configs
    • Handling Events
    • Languages & Frameworks
    • Customize Elements
    • Versions & Beta Testing
  • Help
    • Managing Account & Team
      • Reset Your Password
      • Manage Team Members
    • Frequently Asked Questions
    • Changelog
Powered by GitBook
On this page
  • Step 1: Set Default Colors
  • Step 2: Apply Custom Styling
  • Step 1: Determine class
  • Step 2: Override style
  • Templates

Was this helpful?

  1. How-to's

Change Style

How to modify the look of Billing Pages

PreviousUsing Stripe WebhooksNextPlan Picker Style Templates

Last updated 4 years ago

Was this helpful?

The look of all billing pages is highly customizable so that they integrate seamlessly with your website/app. Using CSS, colors and fonts can be changed, and content can be added or removed. Below are the steps to change the style.

Easy style changes coming to the dashboard soon!

Step 1: Set Default Colors

Navigate to your billing page on the Billflow dashboard. There you will see a section for Design changes. Use this section to set your default colors. You can also add custom CSS here. To learn more about adding custom CSS, continue reading below.

Step 2: Apply Custom Styling

You can add custom CSS to the 'CSS Modifications' section of the Design tab.

Step 1: Determine class

The easiest way to determine the CSS class of the piece you wish to change is to inspect element with your browser. Right click on the thing you want to change and select Inspect. We can see the class name of this button is .servicebot-btn-primary

Step 2: Override style

Now we can override the style. You can do this within your browser then copy the style to your CSS file.

Templates

Below are examples & templates for billing page style changes. Just add the CSS to your project to add to your billing page.

Plan Picker Style Templates
Customer Portal Style Templates
Pricing Page Style Templates
Checkout Form Style Templates
Dashboard Design Options
Inspecting Billing Page Style