Subscription plans

Plan cards side by side for comparing subscription tiers, with two tabs, for example monthly and yearly, each carrying its own prices.

Subscription plans section in the Sublime theme

At a glance: Add it to any page with Add section. Holds up to 4 blocks.

Good for

Comparing subscription tiers side by side
Monthly and yearly prices on two tabs
Highlighting a recommended plan with a badge

How to add the section

From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
Open the page you want to edit from the dropdown at the top of the editor.
In the left sidebar, click Add section.
Search for Subscription plan and select it.
Drag it into position, adjust the settings below, and click Save.

Section settings

Content

Caption	Small label above the heading, used for eyebrow text like a category or a date.
Heading	The section title. Leave it empty to hide the heading row entirely and let the content start at the top.
Heading size	Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.Choose Default (default), H1, H2, H3, H4, H5 or H6.
Description	Body copy shown under the heading. Supports bold, italic and links.
Text alignment	Aligns the heading and body text left, center or right.Default: Left.

Tab labels

Tab label 1	The name of the first pricing tab, such as Monthly. The tabs only appear when both labels are filled in; otherwise every card shows its Tab 1 price.
Tab label 2	The name of the second pricing tab, such as Yearly. Leave it empty to hide the tabs.

Appearance

Color scheme

Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it.

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Blocks

Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.

Plan card block

Content

Plan name	The plan's name at the top of the card, such as Starter or Pro.
Heading size	Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.Choose Default (default), H1, H2, H3, H4, H5 or H6.
Plan description	A line under the plan name saying who the plan is for.

Badge

Show badge	Adds a badge above the card.Off by default.
Badge text	Text inside the badge. One or two words.Only appears when Show badge is on.
Badge icon	An icon shown before the badge text. Uploading a Custom badge icon replaces it.Choose None (default), Store, Phone, Heart, User, Check, Check circle, Star, Lab, Info, Truck, Free shipping, Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid or Logout. Only appears when Show badge* is on.*
Custom badge icon	Overrides the selected icon. Use a transparent .svg or .png.Only appears when Show badge is on.

Pricing

Tab 1	The price shown while the first tab is selected, typed exactly as it should appear, such as $29/month. It is plain text and isn't linked to a product's price.
Tab 2	The price shown while the second tab is selected, such as $290/year. Leave it empty to reuse the Tab 1 price.

Button

Button label	Text on the button. Leave it empty to hide the button. Two or three words reads best.
Button link	Where the button goes. A button with no link is not shown.
Open link in new tab	Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.Off by default.
Button style	Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.Choose Primary (default), Secondary or Tertiary.
Button icon	Optional icon shown after the button label.Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye.

Features

Feature list

Format as a bulleted list. Each bullet becomes a table row.

Appearance

Color scheme	Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it.
Alternate row color	Background color of every other row, for easier scanning.Default: #F0F0ED.
Alternate row text color	Text color on alternating rows.Default: #0D0D0F.

Tips

Three plans is the classic setup, with the middle one badged as Most popular.
Write the same features in the same order on every card. Each line becomes a row, so matching lines line up across plans.
Show the saving on the yearly tab, such as $290/year (save $58).

Troubleshooting

Problem	Fix
The Monthly/Yearly tabs aren't showing	Tabs only appear when both Tab label 1 and Tab label 2 are filled in.
The price doesn't change when I switch tabs	Fill in Tab 2 on each plan card. When it's empty, the card shows its Tab 1 price on both tabs.
Does this section sell the subscription?	No. It displays plans and prices only. Point each card's Button link to the product or page where your subscription app handles the sign-up.

Heads up: Prices here are typed text, not product prices. Update them by hand when your prices change.