ste 67 Share Posted April 23, 2014 (edited) I would really like to create a pricing table like the one on the Squarespace Pricing page. How have they achieved this? Is there a way to create something similar without lots of coding? Cheers Edited August 16, 2016 by erich retag sssupers, torsgrantham, JiDe1570047796 and 2 others 5 Link to post
5 paul2009 29,902 Solution Share Posted March 28, 2016 (edited) I've described how to create a couple of different customisable pricing plans (for free!) in Squarespace here. An example is: It's built by adding three code blocks (one for each pricing tier) and some custom CSS to style them. Edited March 28, 2016 by Paul2009 Initial Revision Hi, I'm Paul, founder of SF Digital, building the features that Squarespace didn't include™, including a range of Squarespace extensions.I value honesty, integrity, transparency and respect.Links in my posts may refer to SF Digital products or may be affiliate links. Link to post
6 jasonbarone 12,837 Share Posted April 24, 2014 (edited) I created a CSS addon for any template that will convert Menu Blocks into Price Charts. Try this: http://squarefront.com/addons/price-charts-squarespace-menu-block-version I'm in the process of rewriting a lot of addons, so this is sort of beta, but hopefully it can help. I'm redoing the code to support titles and additional prices. The Menu Block is a bit quirky in how it converts text/numbers into code. Here's an example of one done with Code Blocks. The website template is a prototype for one that will be available for sale at Squarefront.com http://coreviewtech.com/pricing/ Jason Barone Designer, Developer, Squarespace ExpertFounder, Squarefront, Talk SquarespaceHost, Talking Squarespace, Unauthorized Squarespace Show Edited April 24, 2014 by jasonbarone Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. Need help with Squarespace? Send me an email! Otherwise connect with me on Twitter, Instagram, or Linkedin. Link to post
0 Scoobie 16,462 Share Posted April 23, 2014 Without customisation code I think not, as the inverted white on black coloured blocks will be tricky. As will the lines. Link to post
0 ste 67 Author Share Posted April 23, 2014 Hi Scoobie, Thanks for your thoughts, next question... Looking at the source code for the page it's just a straight forward table so it must be CSS and possibly Javascript. Does anyone have any idea about how to create this with CSS/Javascript? Cheers Link to post
0 Lis7 0 Share Posted April 24, 2014 I have the same question, has anyone created a price table in Squarespace? Link to post
0 Lis7 0 Share Posted April 24, 2014 Jason, this is very exciting news, thank you! Will try the beta code. Have subscribed at your website too. Link to post
0 JiDe1570047796 0 Share Posted April 30, 2014 Thanks a lot Jason for this very useful pricing tab! I don't understand why SquareSpace team doesn't provide such feature/section as it is a must have... Link to post
0 sssupers 2,478 Share Posted March 9, 2015 Hi Jason, just want to thank you… let the good times roll ! "Yes the preview window expanding randomly is annoying isn't it? We were just having a laugh about how long it has been like that." Link to post
0 nystartup 0 Share Posted March 28, 2015 I cannot figure out how to get these menu blocks to form three columns in the Five template! Link to post
0 sssupers 2,478 Share Posted March 28, 2015 @nystartup: you have to place three menu blocks next to each other and fill the content following the descriptions above. *sss "Yes the preview window expanding randomly is annoying isn't it? We were just having a laugh about how long it has been like that." Link to post
0 sssupers 2,478 Share Posted March 28, 2015 @nystartup: you have to place three menu blocks next to each other and fill the content following the descriptions above. *sss "Yes the preview window expanding randomly is annoying isn't it? We were just having a laugh about how long it has been like that." Link to post
0 nystartup 0 Share Posted March 28, 2015 I'm sorry to bother you about this further, but how exactly can you place 3 menu blocks next to each other? Link to post
0 nystartup 0 Share Posted March 28, 2015 I'm sorry to bother you about this further, but how exactly can you place 3 menu blocks next to each other? Link to post
0 sssupers 2,478 Share Posted March 28, 2015 "Yes the preview window expanding randomly is annoying isn't it? We were just having a laugh about how long it has been like that." Link to post
0 sssupers 2,478 Share Posted March 28, 2015 "Yes the preview window expanding randomly is annoying isn't it? We were just having a laugh about how long it has been like that." Link to post
0 hthdesign 238 Share Posted April 26, 2015 Hi sssuperguy! Is the code for this missing from this thread now? Jasons link is password protected. Love to get my grubby hands on this CSS Link to post
0 jasonbarone 12,837 Share Posted April 26, 2015 Check back tomorrow :) sorry. Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. Need help with Squarespace? Send me an email! Otherwise connect with me on Twitter, Instagram, or Linkedin. Link to post
0 hthdesign 238 Share Posted April 26, 2015 Thanks jasonbarone, I will check back tomorrow! Love the look of these packages. Link to post
0 jandmco 0 Share Posted April 27, 2015 Through a google search I was able to find help on how to make a basic pricing table (not as spiffy as the ones above) from a site called coveloping. You create your price table using their generator (http://coveloping.com/tools/pricing-tables) and then paste the CSS code in the custom css section of the style editor. You then take the html code they provide and drop that in a code box on any page that you want the pricing table to appear. You'll need both codes for this to work. They explain how to do this here: https://coveloping.com/embed-pricing-table-squarespace-site For an example of a simple pricing table that I made you can check out our site here: http://www.j-and-m.org/social-media-management Hope this helps. Link to post
0 Kozanno1570047785 22 Share Posted July 15, 2015 Jason I've created a separate thread for my question and emailed you as well, but I can't get answers anywhere. I love the above pricing blocks and use them on several websites, however I need to place buttons (for purchase or linking elsewhere) in the bottom of the menu block. I don't want to add a button below each one because on mobile they all scale and clump on top of each other and don't relate to the service that its respective block is speaking to. Can you help with this???? Link to post
0 nichola_e1 0 Share Posted January 16, 2016 Does anyone have the CSS for creating a pricing table from the Menu block. The link takes me to a password protected website.Thanks! Link to post
0 nichola_e1 0 Share Posted January 16, 2016 Does anyone have the CSS for creating a pricing table from the Menu block. The link takes me to a password protected website.Thanks! Link to post
0 Guest Share Posted January 16, 2016 @Nichola_e1 Here you go. You'll have to play with your colors. /* PRICE CHARTS-----------------------------------------------*/.menu-wrapper { background: #F5F5F5; border: 1px solid #ffffff; &.menu-style-simple { .menu-section { margin-top: 0; } .menu-item { margin-bottom: 0; &:first-child { .menu-item-title { padding: 12px 0 10px; line-height: 1em; font-size: 32px; } .menu-item-description { padding: 0 0 15px; line-height: 1em; font-size: 16px; } .menu-item-price-bottom { padding: 5px 0 0; line-height: 1em; background: #fc7c54; color: #FFFFFF; font-size: 82px; .currency-sign { display: inline-block; vertical-align: middle; margin-top: -60px; margin-left: -12px; line-height: 1em; font-size: 22px; } } .menu-item-options { position: relative; padding: 0 0 10px; line-height: 1em; background: #fc7c54; color: #FFFFFF; font-size: 14px; &:after { position: absolute; content: ""; left: 50%; margin-left: -6px; bottom: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #333333; } } } &:not(:first-child) { .menu-item-title { padding: 16px 0; line-height: 1em; border-bottom: 1px solid #EEEEEE; } } &:last-child { .menu-item-title { border-bottom: none; } } } } } Link to post
Question
ste 67
I would really like to create a pricing table like the one on the Squarespace Pricing page.
How have they achieved this? Is there a way to create something similar without lots of coding?
Cheers
Edited by erichretag
Link to post
Top Posters For This Question
5
5
3
Popular Days
Mar 28
7
Jan 16
4
Apr 23
3
Apr 26
3
Top Posters For This Question
paul2009 5 posts
sssupers 5 posts
nichola_e1 3 posts
Popular Days
Mar 28 2015
7 posts
Jan 16 2016
4 posts
Apr 23 2014
3 posts
Apr 26 2015
3 posts
Posted Images
46 answers to this question
Recommended Posts