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: building a pure CSS pricing table from scratch, and using our generator to skip the coding entirely.
What Makes a Good Pricing Table
The best pricing tables share a few characteristics: they use visual hierarchy to highlight the recommended plan, they keep feature lists scannable, they work perfectly on mobile without horizontal scrolling, and they have a clear call-to-action for each tier.
The most common mistake is trying to include too much information. Focus on the five to eight features that differentiate your plans.
The Code: A 3-Tier Pricing Table
Add a Code Block to your page, switch it to HTML mode, and paste this markup:
<div class="pricing-grid">
<!-- Starter Tier -->
<div class="pricing-card">
<h3 class="plan-name">Starter</h3>
<div class="plan-price">
<span class="amount">$19</span>
<span class="period">/month</span>
</div>
<ul class="plan-features">
<li>1 website</li>
<li>5 pages</li>
<li>Basic analytics</li>
<li>Email support</li>
</ul>
<a href="/contact" class="plan-cta">Get Started</a>
</div>
<!-- Pro Tier (highlighted) -->
<div class="pricing-card featured">
<div class="badge">Most Popular</div>
<h3 class="plan-name">Professional</h3>
<div class="plan-price">
<span class="amount">$49</span>
<span class="period">/month</span>
</div>
<ul class="plan-features">
<li>3 websites</li>
<li>Unlimited pages</li>
<li>Advanced analytics</li>
<li>Priority support</li>
<li>Custom domain</li>
</ul>
<a href="/contact" class="plan-cta">Get Started</a>
</div>
<!-- Enterprise Tier -->
<div class="pricing-card">
<h3 class="plan-name">Enterprise</h3>
<div class="plan-price">
<span class="amount">$99</span>
<span class="period">/month</span>
</div>
<ul class="plan-features">
<li>Unlimited websites</li>
<li>Unlimited pages</li>
<li>Full analytics suite</li>
<li>Dedicated support</li>
<li>Custom integrations</li>
</ul>
<a href="/contact" class="plan-cta">Contact Sales</a>
</div>
</div>.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.pricing-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 40px 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
/* Highlighted tier */
.pricing-card.featured {
border-color: #1a1a1a;
border-width: 2px;
transform: scale(1.03);
}
.pricing-card.featured:hover {
transform: scale(1.03) translateY(-4px);
}
.badge {
position: absolute;
top: -12px;
background: #1a1a1a;
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 20px;
}
.plan-name {
font-size: 18px;
font-weight: 600;
margin-top: 12px;
}
.plan-price {
margin: 20px 0;
}
.plan-price .amount {
font-size: 48px;
font-weight: 700;
letter-spacing: -2px;
}
.plan-price .period {
font-size: 14px;
color: #888;
}
.plan-features {
list-style: none;
padding: 0;
margin: 20px 0 32px;
width: 100%;
}
.plan-features li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
color: #555;
}
.plan-cta {
margin-top: auto;
display: inline-block;
padding: 14px 32px;
background: #1a1a1a;
color: #fff !important;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: opacity 0.2s;
}
.plan-cta:hover { opacity: 0.85; }Design Best Practices
Adding a Monthly/Annual Toggle
For monthly versus annual pricing, add this JavaScript toggle above your pricing grid:
<!-- Monthly/Annual toggle -->
<div style="text-align: center; margin-bottom: 32px;">
<button id="toggle-monthly" class="toggle-btn active">Monthly</button>
<button id="toggle-annual" class="toggle-btn">Annual (save 20%)</button>
</div>
<script>
const monthly = document.getElementById('toggle-monthly');
const annual = document.getElementById('toggle-annual');
const amounts = document.querySelectorAll('.amount');
const monthlyPrices = ['$19', '$49', '$99'];
const annualPrices = ['$15', '$39', '$79'];
monthly.addEventListener('click', () => {
amounts.forEach((el, i) => el.textContent = monthlyPrices[i]);
monthly.classList.add('active');
annual.classList.remove('active');
});
annual.addEventListener('click', () => {
amounts.forEach((el, i) => el.textContent = annualPrices[i]);
annual.classList.add('active');
monthly.classList.remove('active');
});
</script>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.
Use Our Generator Instead
Our Pricing Table Generator lets you configure everything visually. Set the number of tiers, enter your plan details, choose a color scheme, and highlight your recommended plan. It outputs clean HTML and CSS ready to paste into a Code Block, including responsive behavior, accessibility attributes, hover effects, and the monthly/annual toggle.
