Subscription plans
Plan cards side by side for comparing subscription tiers, with two tabs, for example monthly and yearly, each carrying its own prices.
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
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.