Pricing Table Tutorial

If you are looking to add a simple or advanced pricing table to your Squarespace website, below is a tutorial and example you can use.

  1. Add a new page to your Squarespace website that will contain the pricing table

  2. Add a Code block to the page, then add the code from the example below. The code will be for the data of your pricing table (plans, features, button, etc).

  3. Click the gear icon for your pricing table page to access the settings of your page, then click the Advanced tab. Add the code from the example below. The code will be for the look & feel of your pricing table.


Step 2 Code Example

<div class="st-price-section">
<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">Simple</li>
    <li>1 Feature</li>
    <li>1 User</li>
    <li class="grey"><a href="#" class="st-button">Order</a></li>
  </ul>
</div>

<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">Basic</li>
    <li>2 Features</li>
    <li>1 User</li>
    <li class="grey"><a href="#" class="st-button">Order</a></li>
  </ul>
</div>

<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">Pro</li>
    <li>3 Features</li>
    <li>2 Users</li>
    <li class="grey"><a href="#" class="st-button">Order</a></li>
  </ul>
</div>

<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">Advanced</li>
    <li>All Features</li>
    <li>5 Users</li>
    <li class="grey"><a href="#" class="st-button">Order</a></li>
  </ul>
</div>
</div>
 

Step 3 Code Example

<style>
.st-price-section * {box-sizing: border-box;}
.st-price-columns {float: left;width: 25%;padding: 8px;}
.st-price-price {list-style-type: none;border: 1px solid #eee;margin: 0;padding: 0;-webkit-transition: 0.3s; transition: 0.3s;}
.st-price-price:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}
.st-price-price .st-price-header {background-color: #FFA227;color: white;font-size: 25px;}
.st-price-price li {border-bottom: 1px solid #eee;padding: 20px;text-align: center;}
.st-price-price .grey {background-color: #eee;font-size: 20px;}
.st-button {background-color: #5CD0DB;border: none;color: white;padding: 10px 25px;text-align: center;text-decoration: none;font-size: 18px;}

@media only screen and (max-width: 925px) {.st-price-columns {width: 50%;}
}
@media only screen and (max-width: 600px) {.st-price-columns {width: 100%;}
}

</style>

Pricing Table Example

  • Simple
  • 1 Feature
  • 1 User
  • Order
  • Basic
  • 2 Features
  • 1 User
  • Order
  • Pro
  • 3 Features
  • 2 Users
  • Order
  • Advanced
  • All Features
  • 5 Users
  • Order