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

  • 5

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.

screen-shot-2016-03-28-at-115747.png.e711804791bfa8aa58015109e6344618.png

Edited by Paul2009
Initial Revision

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 6

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

Edited by jasonbarone

  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

following the descriptions above. *sss


💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post
  • 0

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

following the descriptions above. *sss


💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post
  • 0

Check back tomorrow :) sorry.


  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

}

Share this post


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

×
×
  • Create New...