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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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