[Free template] Pricing Table

Some free code to create Pricing Table.

Table 01.

1. Add 2 Markdown Blocks with syntax

#### Standard
$19

Per Month

* Free custom domain
* SS Security
* Unlimited Storage
* SEO Features
* Premium Templates
* Contributors
* Premium Extensions

[Sign Up][1]

[1]: https://beaverhero.com

2. Add Code Block & Insert this code

<style>
  .markdown-block {
    background: #F2F5F7;
    margin-left: 17px;
    margin-right: 17px;
    transition: all 0.25s;
}
  .markdown-block:hover {
    transform: scale(1.04);
  }
/* title */
.markdown-block h4 {
    font-family: monospace;
    margin-bottom: 5px;
    padding-top: 20px;
}
/* price */
.markdown-block p:nth-child(-n+4) {
    font-family: monospace;
}
  .markdown-block h4+p {
    font-size: 2em;
}
/* list */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.markdown-block ul li {
    color: #626262;
    padding: 5px;
}
  /* Line between price - list */
  .markdown-block ul li:first-child:before, .markdown-block ul li:last-child:after {
    content: "";
    background: rgba(255,255,255,0.75);
    height: 1px;
    width: 50%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}
  .markdown-block ul li:last-child:after {
    margin-top: 20px;
    margin-bottom: 0;
}
/* buttons */
.markdown-block p:last-child {
    padding: 20px;
}
.markdown-block a {
    background: #0091CE;
    color: #fff;
    border-radius: 3px;
    padding: 10px 30px;
    display: inline-block;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
</style>

Table 02.

1. Add 2 Markdown Blocks with syntax

#### Standard
$19

Per Month

* Free custom domain
* SS Security
* Unlimited Storage
* SEO Features
* Premium Templates
* Contributors
* Premium Extensions

[Sign Up][1]

[1]: https://beaverhero.com

2. Add Code Block & Insert code

<style>
/* title */
.markdown-block h4 {
    background: #0098D9;
    color: #fff;
    padding-bottom: 5px;
    font-family: monospace;
    margin-bottom: 0;
}
/* price */
.markdown-block p:nth-child(-n+3) {
    background: #00A8EE;
    color: white;
    font-family: monospace;
}
  .markdown-block h4+p {
    font-size: 2em;
}
/* list */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
    background: #354153;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #293341;
    color: #A0ABBF;
}
.markdown-block ul li {
    border-bottom: 1px solid #293341;
    border-top: 1px solid #424F64;
    padding: 5px;
}
/* buttons */
.markdown-block p:last-child {
    background: #354153;
    border-top: 1px solid #424F64;
    padding: 20px;
}
.markdown-block a {
    background: #0091CE;
    color: #fff;
    border-radius: 3px;
    padding: 10px 30px;
    display: inline-block;
}
/* buttons hover */
.markdown-block a:hover {
    background: #0082B9;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
</style>

Code by Tuan.

Table style from Codecanyon

Will update many other tables soon.

This is AMAZING! Thank you sooo much. How would I change the font for the title? 

10 minutes ago, meltyogastudio said:

This is AMAZING! Thank you sooo much. How would I change the font for the title? 

If you use same syntax, Edit or Add this

.markdown-block h4 {
    background: #0098D9;
    color: #fff;
    padding-bottom: 5px;
    font-family: monospace;
    margin-bottom: 0;
}

WOW...exactly what I have had trouble with...excellent thank you very much

what is the best way to have an image inserted into the coding? I am trying to place an image between "standard and $19"

40 minutes ago, ShortAngryViking said:

WOW...exactly what I have had trouble with...excellent thank you very much

what is the best way to have an image inserted into the coding? I am trying to place an image between "standard and $19"

Try this syntax: https://support.squarespace.com/hc/en-us/articles/206543587-Markdown-cheat-sheet#toc-images

@tuanphan Thank you!  You are the best!  Is there a way to tweak your code so all of the rows are spaced out evenly for me?

elevateptr.com/cost

On 9/15/2020 at 9:06 AM, jcsport123 said:

@tuanphan Thank you!  You are the best!  Is there a way to tweak your code so all of the rows are spaced out evenly for me?

elevateptr.com/cost

I see fine here. Can you describe in more detail?

@tuanphan since the one markdown has additional text the boxes ended up being different sizes.  Is it possible to pad the other one somehow?

On 9/19/2020 at 7:46 AM, jcsport123 said:

@tuanphan since the one markdown has additional text the boxes ended up being different sizes.  Is it possible to pad the other one somehow?

Add to Code Block

<style>
  .markdown-block h4 {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}
</style>

Thanks so much this is great. Is there a way to add some spacing on mobile between different pricing tables? On mobile they overlap which looks a bit confusing and you can't see where a package starts and ends. Thank you!

www.saschakaus.com/real-estate-videography

16 hours ago, saschakaus said:

Thanks so much this is great. Is there a way to add some spacing on mobile between different pricing tables? On mobile they overlap which looks a bit confusing and you can't see where a package starts and ends. Thank you!

www.saschakaus.com/real-estate-videography

 

Add to Code Block

<style>
/* space between pricing tables */
@media screen and (max-width:767px) {
.markdown-block {
    margin-bottom: 10px;
}
}
</style>

This pricing tables look great! I've just tried to use the first ones for template 7.1 but it seems it's not working there. Is there a way I can use it for 7.1 as well? best regards, hanna

22 hours ago, hanna38 said:

This pricing tables look great! I've just tried to use the first ones for template 7.1 but it seems it's not working there. Is there a way I can use it for 7.1 as well? best regards, hanna

Above code tested on SS 7.1 demo site. Can you share link to page where you inserted the code? We can check easier.

20 hours ago, Christel_NZ said:

Amazing! I have created the exact layout which I wanted! Only issue now is I don't seem to be able to link it to the products which I've created. I'd like the pricing from my products to flow through, and the button to link to the cart.

You mean click button

• It redirects to product detail page?
• or it added products into cart?
• or it redirects to checkout page?

On 10/14/2020 at 7:51 AM, tuanphan said:

Add to Code Block

<style>
/* space between pricing tables */
@media screen and (max-width:767px) {
.markdown-block {
    margin-bottom: 10px;
}
}
</style>

 

Thank you so much for this. This is exactly what I was looking for and I love how simple you made the code.

Is there away to style the middle section on its own? Ideally I would like the left and right to have a white background with a border, and the middle to be have a gradient fill to match my branding. Is this possible?

This is the page I am working on - https://www.fueldigitalmarketing.ca/pricing

My website is a work in progress.

On 9/28/2021 at 5:45 AM, michael2019 said:

Thank you so much for this. This is exactly what I was looking for and I love how simple you made the code.

Is there away to style the middle section on its own? Ideally I would like the left and right to have a white background with a border, and the middle to be have a gradient fill to match my branding. Is this possible?

This is the page I am working on - https://www.fueldigitalmarketing.ca/pricing

My website is a work in progress.

 

 

 

Add to Design > Custom CSS

/* Pricing Tables */
/* column 1-3 */
div#block-yui_3_17_2_1_1632779613584_5731+.row .span-4 .markdown-block {
    background-color: white;
    border: 1px solid black;
}
/* middle column */
div#block-yui_3_17_2_1_1632779613584_5731+.row .span-8 .span-4:last-child .markdown-block {
    background-image: url(https://images.squarespace-cdn.com/content/v1/5fcb8b6187f5a174fa2e1093/f9399b4e-c2d3-4dea-b75b-e8086a534a69/Service-background-Fuel-Digital-Marketing-v3.jpg?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
	border: none;
}
div#block-yui_3_17_2_1_1632779613584_5731+.row .span-8 .span-4:last-child .markdown-block * {
    color: white;
}

It worked perfectly. Thank you so much.

Hi Tuan,

I like you code here but I am still struggling to get a code that would toggle switch between monthly and yearly pricing. Is there a way in your code that you can switch between the 2 price plans?

Thank you.

On 11/2/2021 at 7:08 AM, Ciodensky said:

Hi Tuan,

I like you code here but I am still struggling to get a code that would toggle switch between monthly and yearly pricing. Is there a way in your code that you can switch between the 2 price plans?

Thank you.

This will need to use some customize code. You can add 2 tables first, then add a Code Block above table. I will try testing some code.

6 minutes ago, tuanphan said:

This will need to use some customize code. You can add 2 tables first, then add a Code Block above table. I will try testing some code.

I think I have solved this already in squarespace. Thanks for getting back.

I would like to know how to make the button add the product directly to the cart, rather than take them to another page or to the catalog.   

17 hours ago, TinaP said:

I would like to know how to make the button add the product directly to the cart, rather than take them to another page or to the catalog.   

You can add product block under table, then we will give the code to hide title/price/info & use script code to replace table button with product block add to cart button.

On 1/21/2022 at 12:53 AM, tuanphan said:

You can add product block under table, then we will give the code to hide title/price/info & use script code to replace table button with product block add to cart button.

Ok, I don't know how to do that.  Can you explain further?  I have currently used image blocks and want to know how /  where to do that.  I didn't find the creation through CSS/ markdown until after I already did this with images.  I can change it, but if it can be done from here, that would be easiest.  Here is the page. https://www.yoursongmaker.com/new-index  Any help would be appreciated.  If it has to be done through markdown, please let me know and I'll write that first then add the part I'm asking.  I appreciate your help.

On 1/22/2022 at 11:23 PM, TinaP said:

Ok, I don't know how to do that.  Can you explain further?  I have currently used image blocks and want to know how /  where to do that.  I didn't find the creation through CSS/ markdown until after I already did this with images.  I can change it, but if it can be done from here, that would be easiest.  Here is the page. https://www.yoursongmaker.com/new-index  Any help would be appreciated.  If it has to be done through markdown, please let me know and I'll write that first then add the part I'm asking.  I appreciate your help.

Ghost has a table (( think it is free code) with add to cart button, you can consider using them.

In my case, the only way is you add product block under each table, then I will give code to replace table button with add to cart button

--

You mean, click on each image >>> product will be add to cart?

Hi @tuanphan Thank you so much the code has been super helpful!

I want to ask for some details:

1. Is it possible to change the check icon (✓) into green color?

2. Right now all the lists are too long, can it only preview upto 3 first list in the Extra Bonus section, and have a "See more" button? So only when people click on it, it will display all lists. 

My website link is here: 

https://www.mrbfinance.com/

Thank you for your help!
Ika