Creating a pricing table like the Squarespace site?

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

Without customisation code I think not, as the inverted white on black coloured blocks will be tricky. As will the lines.

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

I have the same question, has anyone created a price table in Squarespace?

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 Expert
Founder, Squarefront, Talk Squarespace
Host, Talking Squarespace, Unauthorized Squarespace Show

Jason, this is very exciting news, thank you! Will try the beta code. Have subscribed at your website too.

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

Hi Jason, just want to thank you… let the good times roll !

I cannot figure out how to get these menu blocks to form three columns in the Five template!

@nystartup: you have to place three menu blocks next to each other and fill the content

following the descriptions above. *sss

@nystartup: you have to place three menu blocks next to each other and fill the content

following the descriptions above. *sss

I'm sorry to bother you about this further, but how exactly can you place 3 menu blocks next to each other?

I'm sorry to bother you about this further, but how exactly can you place 3 menu blocks next to each other?

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

Check back tomorrow :) sorry.

Thanks jasonbarone,

I will check back tomorrow! Love the look of these packages.

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.

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

Does anyone have the CSS for creating a pricing table from the Menu block. The link takes me to a password protected website.Thanks!

Does anyone have the CSS for creating a pricing table from the Menu block. The link takes me to a password protected website.Thanks!

@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; 
           }
       }
   }
}

}

Thanks so much Kozanno~

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.