[Free template] Pricing Table

tuanphan · May 20, 2020

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.

meltyogastudio · May 20, 2020

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

tuanphan · May 20, 2020

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

ShortAngryViking · September 9, 2020

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"

Edited September 9, 2020 by ShortAngryViking

tuanphan · September 9, 2020

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

jcsport123 · September 15, 2020

@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

tuanphan · September 18, 2020

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?

jcsport123 · September 19, 2020

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

tuanphan · September 21, 2020

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>

saschakaus · October 13, 2020

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

tuanphan · October 14, 2020

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>

hanna38 · October 24, 2020

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

tuanphan · October 25, 2020

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.

tuanphan · May 1, 2021

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?

michael2019 · September 27, 2021

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.

tuanphan · September 29, 2021

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

michael2019 · September 29, 2021

It worked perfectly. Thank you so much.

Ciodensky · November 2, 2021

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.

tuanphan · November 4, 2021

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.

Ciodensky · November 4, 2021

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.

TinaP · January 20

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.

tuanphan · January 21

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.

TinaP · January 22

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.

Edited January 22 by TinaP

tuanphan · January 25

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?

Edited January 25 by tuanphan

MRBFin · March 14

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

tuanphan · March 14

7 hours ago, MRBFin said:

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

#1. Change this

✓ Customer Service

to this

<span style="color:green;">✓</span> Customer Service

#2. Not possible. You will need another approach to recreate table then use accordion to achieve see more.

[Free template] Pricing Table

Question

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

27 answers to this question

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Support

Community

Developers

Resources