Customize Style & Features of Pricing Page

Add Tier Descriptions

You are able to customize the Subscription Portal 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.

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:

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.