Creating a pricing table like the Squarespace site?

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.

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

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

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

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

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

Thank you

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~

@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

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

Just use a pricing table plugin

Exhubrant

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

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

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.

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

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.

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

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.