Customize Style & Features of Pricing Page

You are able to customize the Pricing Page greatly, adding styles and text with CSS. One popular thing to do is to add tier descriptions or features to the Plan Picker. Your customers see this when they view the subscription portal without a subscription, or when they select 'Change Plan' when they have a subscription.

You can add the following example CSS to the page where you have your subscription portal. Tier columns are numbered chronologically.

Looking to change the text on a Servicebot page? That can be done with the Internationalization feature. Below is an example, to learn more read here.

CSS Style not working for you on your site? Try to add !important; to the CSS values.

Added Features Example:

Yearly Discount Example:

Varying Discount Example:

Change Font & Color Example:

Change Signup Button Text Example:

font-weight: 300;
text-align: center;
display: block;
padding: 20px 0;
.__tier.__tier-1 .servicebot-row.__tier-plan.__plan-1:after {
content: 'Description of tier 1 \A Description 2 of tier 1';
white-space: pre;
.__tier.__tier-2 .servicebot-row.__tier-plan.__plan-1:after {
content: 'Description of tier 2 \A Description 2 of tier 2';
white-space: pre;
.__tier.__tier-3 .servicebot-row.__tier-plan.__plan-1:after {
content: 'Description of tier 3 \A Description 2 of tier 3';
white-space: pre;
Description added into Plan Picker

Change Tier and Plan Order

You can modify the order that tiers appear from their default ordering by price. Metadata tags are used in Stripe to do this.

Metadata Key


Example Values


Add this metadata property to a Stripe Product. The lowest value tier appears left-most on your Pricing page.



Add this metadata property to a Stripe Plan. The lowest value plan appears higher on a tier with multiple pricing plans.