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

[Free template] Pricing Table


tuanphan

Question

Some free code to create Pricing Table.

Table 01.

squarespace-pricing-table03-min.png

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.

squarespace-pricing-table02-min.png

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.

Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 Fea

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

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

Posted Images

13 answers to this question

Recommended Posts

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

 

Link to post
  • 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"

Edited by ShortAngryViking

Still angry, just a little older

Link to post
  • 0
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

Link to post
  • 0
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?

Link to post
  • 0
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?

Screen Shot 2020-09-18 at 8.45.22 PM.png

Add to Code Block

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

 

Link to post
  • 0

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

 

Link to post
  • 0
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>

 

Link to post
  • 0

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

Link to post
  • 0
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.

Link to post
  • 0
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?
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...