[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

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

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

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

It worked perfectly. Thank you so much.

[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

16 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

Create an account or sign in to comment

Support

Community

Developers

Resources