Jump to content

Creating a pricing table like the Squarespace site?

Recommended Posts

  • Replies 46
  • Views 35.8k
  • Created
  • Last Reply

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?


Link to comment

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

alt text

Link to comment
  • 10 months later...
  • 3 weeks later...
  • 5 weeks later...

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 comment
  • 2 months later...

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 comment
  • 6 months later...

@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 comment
  • 2 months later...

I've described how to create a couple of different customisable pricing plans (for free!) in Squarespace here. An example is:alt text

It's built by adding three code blocks (one for each pricing tier) and some custom CSS to style them.


About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.