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: https://codepen.io/kmidkiff/pen/vYOXKOX

Yearly Discount Example: https://codepen.io/kmidkiff/pen/JjdRKbd

Varying Discount Example: https://codepen.io/kmidkiff/pen/eYNdzva

Change Font & Color Example: https://codepen.io/kslung/pen/qBOXeWW

Change Signup Button Text Example: https://codepen.io/kmidkiff/pen/qBOxXez

.servicebot-row.__tier-plan:after{
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

Description

Example Values

sb_pricing_tier_order

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

1

sb_pricing_plan_order

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

5