Creating a pricing table like the Squarespace site?

There are many solutions out there, but you'll need to do some Googling to find some "Squarespace Pricing Tables". Basically, you need to create a Code Block and have some Less (CSS) to handle the visual design of said HTML.

Devon Stank @ Devonstank.com (Squarespace Tips & Tricks)

How did you get you contact us button to be filled at first then hollow when hovering over it?

Your link doesn't work Paul

Thanks for letting me know. I've repaired the broken link now - http://www.soundfocus.co.uk/squarespace/price-comparison-table-1

But you are selling this rather than answering the question free. That's not within the terms of use of this forum

@paul2009 How would I change the color of the option box to black, instead of a blue or green?

If you look through the code you'll see

background: #00a1ff

for the blue behind option 1 and option 3. You'll also see

background-color: #78b336

for green behind option 2 title. You can change the colors by selecting a different hex value. If you're not sure what they are, Google for CSS hex values. Black is

#000

or just black (without the symbol).

I could kiss you Paul! I know nothing about technology and your links and replies are helping me start my website for my business. Thank you, thank you!

@paul2009- Thanks for this great example. I tried to implement today and fro some reason the CSS is not being applied to the html columns.

Any thoughts as to why this may be?

I went through the steps and everything seems to line up.cheers

It could be anything. Do you see any red errors in the Custom CSS? It's probably just a bracket missing or something silly like that. If you post a link I could take a quick look.

Yes they have been of great help in my website too . I love there work .

Removing this answer as it advertises paid services without first providing helpful information. Please see the terms FAQ here.

Care sharing a screenshot of what it looks like? Tried using this code in vain.

@paul2009 How do you change the background of the table from white to a very light gray like the squarespace one. I tried changing the text white to lightgrey which sort of works but still quite dark grey.

Also is there any way to put a 1px black border around the boxes?

Hi Jason, what is the password to access: http://squarefront.com/addons/price-charts-squarespace-menu-block-version

Thank you

This is great! I've added a border and it looks great on my website. Thank you very much!

Is there a way to remove the space between the columns? I haven't been able to figure this out. I have 3 code blocks lined up side by side if that helps...

Hey Paul

I found this post and looked at your site, you have loads of really helpful items on there, thanks for your work.

I tried using your tables and they look great on the full site render in the CMS, and they look OK (Fonts are a little of an issue being too big for the frame, but solvable) on the Phone sized render, however on the tablet sized render the three table mash into one another.

Has anyone else had this experience? Or have I missed something?

Cheers

Galli

I get 404 for this

This works great, thanks!

My only dilemma is, it doesn't work if the page is part of an index. It only works if I take the page out of the index.

Could anybody please help me with tweaks to this code or there's a way I can make a page in an index display the contents of a page that has this code?

TIA

While I found these templates useful, I very quickly outgrew them. For an easy way to find, create and test different styles of Pricing tables. head over to https://codepen.io/. (I am not associated with them in any way)

You can easily play with the HTML and CSS styling to get just the right look for your website. I used this method to easily add multiple design cues to a few sites.

You can see how they look at https://www.effortlessdigital.com/ and https://www.denverlikealocaltours.com/

Just use a pricing table plugin

Exhubrant