Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 3
ste

Creating a pricing table like the Squarespace site?

Question

Recommended Posts

  • 0

Your link doesn't work Paul


Wedding Photographer based in Northern Ireland - Belfast, Lisburn, County Antrim & County Down offering professional Wedding Photography. [Northern Ireland Wedding Photographers][1] [1]: http://www.purephotoni.com

Share this post


Link to post
  • 0

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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0

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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0

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).

Edited by Paul2009
Initial Revision

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0
Guest

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

Share this post


Link to post
  • 0

@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.


Wedding Photographer based in Northern Ireland - Belfast, Lisburn, County Antrim & County Down offering professional Wedding Photography. [Northern Ireland Wedding Photographers][1] [1]: http://www.purephotoni.com

Share this post


Link to post
  • 0

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


Wedding Photographer based in Northern Ireland - Belfast, Lisburn, County Antrim & County Down offering professional Wedding Photography. [Northern Ireland Wedding Photographers][1] [1]: http://www.purephotoni.com

Share this post


Link to post
  • 0
Guest

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...

Edited by Guest
Initial Revision

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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/

Share this post


Link to post
  • -2

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)

Edited by Vexsoft
Added the image of the pricing table.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...