Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 3

Creating a pricing table like the Squarespace site?


ste
Go to solution Solved by paul2009,

Question

  • Answers 46
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding 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

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. 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 TwitterInstagram, or Linkedin.

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

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

"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."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 
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

"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."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 
Link to post
  • 0

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 TwitterInstagram, or Linkedin.

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.

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

Link to post
  • 0
Guest

@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
Guest
This topic is now closed to further replies.

×
×
  • Create New...