Squarespace does not include a pricing table block. For a platform used by thousands of service businesses, freelancers, and SaaS companies, this is a surprising omission. But you can build a professional pricing table with custom code that looks better than most third-party solutions.
This tutorial covers two approaches: a pure CSS pricing table you can build from scratch, and using our Pricing Table Generator to skip the coding entirely.
What Makes a Good Pricing Table
Before writing any code, let us define what makes a pricing table effective. The best pricing tables share a few characteristics. They use visual hierarchy to highlight the recommended plan. They keep feature lists scannable with consistent formatting. They work perfectly on mobile without horizontal scrolling. And they have a clear call-to-action button for each tier.
The most common mistake is trying to include too much information. A pricing table should help visitors make a decision quickly. If every plan has fifteen features listed, the comparison becomes overwhelming. Focus on the five to eight features that differentiate your plans.
Approach 1: Code Block Method
The simplest way to add a pricing table to Squarespace is with a Code Block. Add a Code Block to your page, switch it to HTML mode, and paste your pricing table markup.
Structure your HTML as a flex or grid container with one card per pricing tier. Each card should contain the plan name, the price, the feature list, and the call-to-action button. Use semantic HTML: an unordered list for features, a heading for the plan name, and an anchor tag styled as a button for the CTA.
The CSS goes into the same Code Block, wrapped in a style tag. This keeps everything self-contained. Use CSS Grid for the layout so the cards automatically adjust from three columns on desktop to one column on mobile.
Key CSS Techniques
Highlighting the recommended plan. Make one tier visually stand out by giving it a different background color, a slight scale transform, or a top border accent. This draws the eye and anchors the comparison. Most visitors will choose the highlighted plan, so put your most profitable option there.
Responsive behavior. Use grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) for the container. This creates a three-column layout on desktop that automatically collapses to fewer columns as the screen narrows. No media queries needed.
Equal card heights. In a grid layout, cards naturally stretch to the height of the tallest card. This keeps everything aligned. If you use flexbox instead, add align-items: stretch to the container.
Button placement. Push the CTA button to the bottom of each card using flexbox with margin-top: auto on the button. This ensures buttons align horizontally across cards even when feature lists have different lengths.
Approach 2: Use Our Generator
Our Pricing Table Generator lets you configure everything visually. Set the number of tiers, enter your plan names, prices, and features, choose a color scheme, and highlight your recommended plan. The tool outputs clean HTML and CSS ready to paste into a Code Block.
The generator handles all the responsive behavior, accessibility attributes, and hover effects. It also supports annual versus monthly toggle pricing, which is a common pattern for SaaS pricing pages.
Design Best Practices
Three tiers is the sweet spot. Behavioral research consistently shows that three options lead to higher conversion than two or four. The middle option becomes the natural choice, especially when you visually highlight it.
Use specific numbers, not ranges.Instead of writing features like “up to 10 users,” say “10 users.” Ranges introduce uncertainty, which creates friction in the buying decision.
Put your best value tier in the center.People read pricing tables left to right. The center position gets the most attention. Highlight it with a different background, a “Most Popular” badge, or a slight scale increase.
Show the price prominently. The price should be the largest number on each card. Use a large font size and strong font weight. If you offer monthly and annual pricing, show the annual price with the monthly equivalent, because the smaller number feels more affordable.
Adding a Pricing Toggle
For monthly versus annual pricing, you need a small JavaScript snippet. The toggle switches the visible price and updates the billing period text. This is a common pattern that visitors understand intuitively.
Keep the toggle at the top of the pricing section, above the cards. Label it clearly: “Monthly” and “Annual (save 20%)” is a standard format. The annual option should be pre-selected since it represents better value for both the customer and your business.
SEO Considerations
Your pricing page is often one of the most visited pages on your site. Optimize it with proper heading hierarchy, a meta description that includes your price range, and Product schema markup if you sell specific plans. Our Schema Builder can generate the right markup.
Browse all of our free Squarespace tools for more ways to enhance your site.