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

Question

  • Answers 46
  • Created
  • Last Reply

Recommended Posts

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

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 comment

@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

@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

Link to comment

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

Link to comment

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

Wedding Photographer based in Northern Ireland - Belfast, Lisburn, County Antrim & County Down offering professional Wedding Photography. [Northern Ireland Wedding Photographers][1] [1]: http://www.purephotoni.com

Link to comment

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

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 comment

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

Archived

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

Guest
This topic is now closed to further replies.

×
×
  • Create New...