How to Add a Pricing Table to Squarespace
If you sell services, memberships, packages, courses, retainers, or subscriptions, a pricing table can make your offer much easier to understand.
Instead of making visitors read through paragraphs of pricing details, a pricing table lets them compare options at a glance.
That matters because most people are not only looking for the price. They are trying to answer a few quick questions:
Which option is right for me?
What do I get?
What is the difference between each plan?
Where do I click next?
Squarespace does not have one perfect “pricing table” block that works for every use case. But there are several ways to add one, depending on how polished, editable, and interactive you need it to be.
You can build a simple pricing table with native Squarespace sections. You can embed a third-party pricing widget. Or you can use a section library like Kleemt if you want a more designed pricing table without building the layout from scratch.
Option 1: Build a simple pricing table manually in Squarespace
The simplest option is to build your pricing table directly inside Squarespace using sections, columns, text blocks, buttons, and shape/image blocks.
This works best when you have two or three offers.
For example, you might create three side-by-side pricing cards:
Starter
$500
Good for small projects
Includes X, Y, and Z
Button: Book a Call
Growth
$1,500
Good for more complete projects
Includes X, Y, Z, and more
Button: Book a Call
Premium
$3,500
Good for full-service support
Includes everything above plus strategy
Button: Apply Now
This route is nice because everything stays inside Squarespace. You can edit the plan names, prices, descriptions, and buttons without touching code or relying on another platform.
The downside is that it can take some fiddling to make the columns look polished. If one plan has more text than another, the cards may not line up evenly. You also need to check mobile carefully, because columns often stack differently on smaller screens.
Use this option if:
you only need a simple pricing section
you want to keep everything native to Squarespace
you do not need toggles, animations, or advanced comparison features
you want the section to be easy for a client or team member to edit
This is the most practical starting point for a basic Squarespace pricing table.
Option 2: Use a third-party pricing table widget
Another option is to use a third-party widget tool like Elfsight Pricing Table or Common Ninja Pricing Tables.
These tools let you build the pricing table in an external editor, then embed it into Squarespace with a Code Block or Embed Block.
A widget can be useful if you need features like:
pre-designed pricing table templates
column, grid, or table layouts
recommended-plan ribbons
highlighted offers
buttons for each plan
no-code design controls
future edits from a dashboard
The biggest advantage is that you do not have to build the pricing table manually inside Squarespace. You create the table in the widget editor, copy the embed code, paste it into your Squarespace page, and publish.
The tradeoff is that you are now relying on another platform. Free plans may include branding, view limits, or feature limits. Paid plans may be worth it if the widget solves a real business problem, but it is still another tool to manage.
Use this option if:
you want a no-code editor
you need a more structured pricing table
your pricing changes often
you want plan highlights or ribbons
you do not mind using an external widget
you want something faster than building the layout manually
This can be a strong option for SaaS-style pricing, memberships, coaching packages, courses, or tiered offers.
Option 3: Use Kleemt’s Pricing Table section
If you want a pricing table that feels more designed without building the layout yourself, Kleemt is worth looking at.
Kleemt is a Squarespace section and block library. After setup, you can add custom sections directly inside Squarespace, including a Pricing Table section.
This makes it different from a generic external widget. The goal is not only to display pricing information. The goal is to make the section feel like it belongs inside a more polished Squarespace page.
Use a section like this when you want the pricing table to feel more premium than a basic text-and-button layout, but you do not want to custom-code the entire thing.
This is especially useful for:
service packages
creative retainers
memberships
courses
coaching offers
productized services
agency packages
comparison sections on landing pages
A pricing table is not just a design element. It is a decision-making section. The visitor is comparing value, not just price.
That means the section should make the differences between your offers easy to understand.
Use this option if:
you want a more polished pricing section
you are already comfortable working in Squarespace
you want something faster than custom design work
you want the pricing table to sit alongside other custom sections
you are building a more interactive or premium-feeling page
Kleemt is especially useful if you are improving more than one part of the page. For example, you might pair a Pricing Table with testimonials, logo rows, image galleries, countdowns, timelines, expandable lists, or social proof blocks.
Option 4: Use an image-based pricing table
You can also design a pricing table in Canva, Figma, Photoshop, or another design tool, export it as an image, and upload it to Squarespace.
This is usually not the best option.
It may look fine visually, but it creates problems.
Text inside an image is harder to edit. It may not be accessible to screen readers. It can be blurry on some screens. It does not respond as cleanly on mobile. And if your pricing changes, you have to go back to the design file, export a new image, and re-upload it.
Use this option only if:
the pricing table is temporary
the pricing table is mostly decorative
the real pricing details are also written in text elsewhere
you need a quick placeholder while building the real section
For most websites, use live text instead.
What about custom code?
You can create a pricing table with custom HTML, CSS, and JavaScript.
But for most Squarespace users, that is not the most realistic option.
Custom code can work well if you are a developer or if you are building a highly specific layout. But it also means future edits may require editing code. That can become annoying if prices, plan names, features, or buttons change often.
For most people, the better choices are:
build a simple version natively in Squarespace
use a no-code widget like Elfsight or Common Ninja
use a designed section from a library like Kleemt
Custom code is possible, but it is usually not the first route I would recommend for a pricing table.
What should a good pricing table include?
A good pricing table should make the offer easier to choose.
At minimum, each plan should include:
plan name
price
short description
key features or deliverables
who the plan is best for
call-to-action button
If you have one option you want people to choose most often, make that clear.
You can label it:
Most Popular
Best Value
Recommended
Best for Growing Teams
Best for Most Clients
Do not overdo it. One highlighted plan is helpful. Three highlighted plans defeats the purpose.
Keep the pricing table simple
The most common pricing table mistake is trying to say everything.
A pricing table is not the place to explain every policy, edge case, add-on, and exception.
It should help someone choose the next step.
If you need to explain more, add a short FAQ underneath the pricing section.
Useful FAQ questions might include:
What happens after I book?
Can I customize a package?
Do you offer payment plans?
What is not included?
How soon can we start?
What happens if I need more support?
That keeps the pricing table clean while still answering the questions that affect the buying decision.
Which option should you use?
If you want the simplest route, build the pricing cards manually in Squarespace.
If you want a no-code editor with templates and plan highlights, use a widget like Elfsight or Common Ninja.
If you want a polished Squarespace section that feels more designed, use a section library like Kleemt.
If you are building a serious sales page, do not think of the pricing table as decoration.
Think of it as the moment where the visitor decides whether your offer makes sense.
The clearer that section is, the easier the next step becomes.
Related Squarespace resources
If you are improving a sales page or service page, these may help too:
