How to create simple price tables in Squarespace
The CSS codes below will help you take basic website sections and turn them into styled pricing tables, complete with text and buttons.
When you create columns inside a Squarespace page, they will be given a “code nickname” that we can use in custom CSS to add borders, shadows, and specific sizes to just those columns. We can also change colors inside those columns, specifying first, second, third and so on.
There are a LOT of customization options with this one, so be sure to watch the tutorial video so you understand what part of the codes you will want to change to make it look amazing on your own site!
This tutorial will work on any version and theme your site is built with, from older Squarespace 7 sites to the latest Squarespace 7.1
Two Option Layout
OPTION ONE
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✗ Not included
✗ Not included
OPTION TWO
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✓ Included feature
✓ Included feature
TWO COLUMN COPY & PASTE CODE
.sqs-col-6 {border: 5px solid #50bdb8; width:40%!important; margin-left: 7%} @media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important; margin-bottom: 5%}}
Three Option Layout
OPTION ONE
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✗ Not included
✗ Not included
OPTION TWO
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✓ Included feature
✗ Not included
OPTION THREE
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✓ Included feature
✓ Included feature
THREE COLUMN COPY & PASTE CODE
.sqs-col-4 {border: 5px solid #50bdb8; width:25%!important; margin-left: 6.25%} @media only screen and (max-width:768px){ .sqs-col-4 {margin-left:0%!important; margin-bottom: 5%}}
Four Option Layout
OPTION ONE
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✗ Not included
✗ Not included
✗ Not included
OPTION TWO
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✓ Included feature
✗ Not included
✗ Not included
OPTION THREE
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✓ Included feature
✓ Included feature
✗ Not included
OPTION FOUR
Details about option one are here. This is filler text so you can quit reading.
✓ Included feature
✓ Included feature
✓ Included feature
✓ Included feature
✓ Included feature
FOUR COLUMN COPY & PASTE CODE
.sqs-col-3 {border: 5px solid #50bdb8; width:20%!important; margin-left:3%} @media only screen and (max-width:768px){.sqs-col-3 {margin-left: 0%!important; margin-bottom: 5%}}
Additional Style Ideas
CHANGE BUTTON COLORS
Replace the number 1 in nth-child(1) to the corresponding section order to change the background color of the button in that section.
Two Columns
.sqs-col-6:nth-child(2) .sqs-block-button-element {background-color:green}
Three Columns
.sqs-col-4:nth-child(2) .sqs-block-button-element {background-color:green}
Four Columns
.sqs-col-3:nth-child(2) .sqs-block-button-element {background-color:green}
ADD A BOX SHADOW ON A HOVER
Change up any of the values or color codes in bold below to change the shadow style.
Two Columns
.sqs-col-6:hover{box-shadow: 2px 5px 15px rgba(0,0,0,0.8)}
Three Columns
.sqs-col-4:hover{box-shadow: 2px 5px 15px rgba(0,0,0,0.8)}
Four Columns
.sqs-col-3:hover{box-shadow: 2px 5px 15px rgba(0,0,0,0.8)}