Customize Pricing Page

Learn how to customize your Plan Picker 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.

View live example: https://jsfiddle.net/tvhek9ju/

.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 plan';
}
.__tier.__tier-2 .servicebot-row.__tier-plan.__plan-1:after {
content: 'Description of tier 2 plan';
}
.__tier.__tier-3 .servicebot-row.__tier-plan.__plan-1:after {
content: 'Description of tier 3 plan';
}
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