How to create a simple, code-free pricing table
Table of Contents Show
If you’re a service provider or have a membership, –anything where you have different levels of package pricing, you’ve probably struggled with how to display those details on your website.
Ya gotta create some kind of package name, then list the details, and add a button… but shouldn’t it look more appealing? So maybe you add an image, and then… –what? How do you place all of these elements so they work together & look like they’re supposed to go together?
It can be a bit tricky, especially when you view your perfectly laid out design on Mobile and realize everything is messed up. The responsive layout has f*cked it all up & now the design is crap. 🤦🏻♀️
You might like how pricing tables look, but if you’re not a web designer or even a graphic designer, –how the hell do you do that?!
Yes. You can buy a plugin, embed their code, edit their code (trial-and-error-style), and make it work really well!
In fact, my pricing tables on my Services page are done with Markdown blocks & custom CSS! It can definitely be done & if that’s what you wanna do, –more power to ya! (Need to see an example? You can check that out over here.)
But us webbies (that is, web designers –ie: “nerds”), totally understand that not everyone is just dying to fool with HTML and CSS or Markdown language in order to get one that ‘pretty.’
Luckily there are 2 ways you can create your own DIY pricing table with little-to-no code at all.
Actually, one of these methods uses ZERO code. Nada. Zip.
But first, let's talk about how you’re displaying your Package Pricing on your website now:
Are you listing prices with tons of text, –maybe even paragraphs of it?
Do you have your pricing simplified, but stuck on the design of it?
Did you carefully set up a spreadsheet or design something in Canva/Illustrator & upload it because you have to be able to control every little aspect of the way it looks?
Don't even have pricing on your website, because you're overwhelmed or scared to put it ‘out there?' 😳
I've been in ALL of those places once, and I'm here to tell you RIGHT now that it truly doesn't have to be so complicated, scary, wordy, or overwhelming.
Want to learn more about pricing your services? Read these posts too:
Did I just hear a sigh of relief? Good!
Now let's talk about how to simplify this thang! 👇🏻
method #1
Create a pricing table with Image Blocks
The simplest & easiest way to create a pricing table in Squarespace is to simply use an Image Layout Block. You can use the text customization areas to put your package pricing info & choose what Call To Action you want for each package, using that block’s button link.
Here’s a few examples I created with the Image Layout blocks:
Image Stack
PACKAGE DETAIL #1
PACKAGE DETAIL #2
PACKAGE DETAIL #3
INVESTMENT:
$2,000
TIMELINE: 2 weeks
Image Collage
PACKAGE DETAIL #1
PACKAGE DETAIL #2
PACKAGE DETAIL #3
INVESTMENT:
$2,000
TIMELINE: 2 weeks
Image Overlap
PACKAGE DETAIL #1
PACKAGE DETAIL #2
PACKAGE DETAIL #3
INVESTMENT:
$2,000
TIMELINE: 2 weeks
see how I did it:
I did use the SquareKicker plugin to tweak some of the text & add the shadow behind the Image Stack block option.
READ MORE: learn more about SquareKicker (the best no-code plugin for Squarespace!)
method #2
Create a pricing table with Canva
This is a really fun way to have it completely customized however you like! With Canva’s embed feature, you can now copy the embed code for that design, including any clickable links you’ve added to it, and embed the whole thing on your site as an interactive image.
Two things first:
You don’t need a paid plan with Canva in order to do it this way.
You can start with any/all of my 4 templates used in this tutorial for FREE! (Grab it at the black button below 👇🏻)
