Buy me a coffee

Free answer within 24 hours. Send your questions now ->

Squarespace Templates: Pricing Table

Use this tool to find block ID.

Ask me a question if you need help.

Pricing Table 01. Gradient

Demo

How to

1. Add Markdown Block for 3 boxes

3 boxes use same syntax. Replace Standard with Pro, Agency

#### Standard
$19

Per Month

* 24/7 support
* 50GB banwidth
* 10 Themes

[Get Started][1]

[1]: https://beaverhero.com

2. Add Code Block & Paste these code

<style>
/* space between boxes */
.markdown-block {
    margin: 15px;
    padding-bottom: 50px !important;
    padding-top: 30px !important;
}
/* Box 2 color */
div#block-5eacd1ae534ec14df09aac78+.row>.col:nth-child(2) .markdown-block {
    background: #f4f5f6;
    border-color: #f4f5f5;
}
/* Box 3 */
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child .markdown-block {
    background: #008aff;
    background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    background: -o-linear-gradient(bottom right, #6B02FF, #985BEF);
    background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd);
    background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
}
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child * {
    color: white;
}
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child a {
    border: 2px solid #fff;
}
/* Set border - corner */
.markdown-block {
    border: 2px solid #f8f8f8;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
/* set zoom on hover */
.markdown-block:hover {
    transform: scale(1.03,1.03);
    -ms-transform: scale(1.03,1.03);
    -webkit-transform: scale(1.03,1.03);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove list dots */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
/* Price */
.markdown-block h4 + p {
    font-weight: 500;
    font-size: 3em;
    letter-spacing: 1px;
}
/* Space between title-price */
.markdown-block h4 {
    margin-bottom: 1px;
}
/* Links */
.markdown-block a {
    background: #008aff;
    background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    background: -o-linear-gradient(bottom right, #6B02FF, #985BEF);
    background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd);
    background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    color: #fff;
    border-radius: 5px;
    padding: 10px 30px;
    margin-top: 20px;
    display: inline-block;
    border: 2px solid transparent;
}
</style>

div#block-5eacd1ae534ec14df09aac78 is the Text Block ID above the 3 boxes

Pricing Table 02. Simple Dark Columns

This style I purchased from Codecanyon

How to

1. Add 2 Markdown Blocks

& use 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

& use 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>

Pricing Table 03. Simple Hover

How to

1. Add 2 Markdown Blocks

and use this 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

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

Pricing Table 04. Different Columns Colors

1. Add 2 Markdown Blocks

and use 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

and

#### Pro
$59

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

<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;
}
  /* space between 2 markdowns */
  .markdown-block {
    padding: 0 !important;
    margin-left: -1px;
}
  /* Box 2 title */
  .span-11>.row>.col:nth-child(2) .markdown-block h4 {
    background: #0082B9;
}
  /* box 2 price */
  .span-11>.row>.col:nth-child(2) .markdown-block>div>p:nth-child(-n+3) {
    background: #0091CE;
}
  /* box 2 button */
  .span-11>.row>.col:nth-child(2) .markdown-block p a {
  	background: #00A8EE;
  }
  .span-11>.row>.col:nth-child(2) .markdown-block p a:hover {
  	background: #0098D9;
  }
  /* border between 2 boxes */
  .markdown-block ul, .markdown-block p:last-child {
    margin-left: -1px;
    border-width: 0 1px;
    border-left: 1px solid #293341;
}
</style>

Pricing Table 05. Strike Price

1. Add 3 Markdown Blocks

with syntax

Block 1

#### Standard
*$19* $9

Per Month

* 24/7 support
* 50GB banwidth
* 10 Themes

[Get Started][1]

[1]: https://beaverhero.com

Block 2

#### Pro
*$29* $19

Per Month

* 24/7 support
* 50GB banwidth
* 10 Themes

[Get Started][1]

[1]: https://beaverhero.com

Same for Block 3

2. Add Code Block

<style>
/* space between boxes */
.markdown-block {
    margin: 15px;
    padding-bottom: 50px !important;
    padding-top: 30px !important;
}
/* Box 2 color */
div#block-5eacd1ae534ec14df09aac78+.row>.col:nth-child(2) .markdown-block {
    background: #f4f5f6;
    border-color: #f4f5f5;
}
/* Box 3 */
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child .markdown-block {
    background: #008aff;
    background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    background: -o-linear-gradient(bottom right, #6B02FF, #985BEF);
    background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd);
    background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
}
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child * {
    color: white;
}
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child a {
    border: 2px solid #fff;
}
/* Set border - corner */
.markdown-block {
    border: 2px solid #f8f8f8;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
/* set zoom on hover */
.markdown-block:hover {
    transform: scale(1.03,1.03);
    -ms-transform: scale(1.03,1.03);
    -webkit-transform: scale(1.03,1.03);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove list dots */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
/* Price */
.markdown-block h4 + p {
    font-weight: 500;
    font-size: 3em;
    letter-spacing: 1px;
}
  /* Strike */
  .markdown-block h4 + p em {
    font-style: normal;
    text-decoration: line-through;
    color: gray;
    font-size: 0.7em;
}
/* Space between title-price */
.markdown-block h4 {
    margin-bottom: 1px;
}
/* Links */
.markdown-block a {
    background: #008aff;
    background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    background: -o-linear-gradient(bottom right, #6B02FF, #985BEF);
    background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd);
    background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    color: #fff;
    border-radius: 5px;
    padding: 10px 30px;
    margin-top: 20px;
    display: inline-block;
    border: 2px solid transparent;
}
</style>

 

Share this post:

6 thoughts on “Squarespace Templates: Pricing Table”

  1. I tried using the Gradient style, but whenever I inject it all the markdown boxes are the same color as the first. If I delete “div#block-5eacd1ae534ec14df09aac78+.row>.col:nth-child(2)” then all the boxes are the same #f4f5f6 and so on if I repeat. What am I doing wrong? I changed the block ID to match my text box and I only have the text, code, and the 3 markdown boxes on my page so the grid shouldn’t be affected.

    Reply

  2. Hi. Same question about the gradient, having trouble changing the purple color to making it something else. This is the color I found that I was changing: 6B02FF
    Seemed to have no effect. Thank you.

    Reply

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder