Price Comparison Table for Squarespace

There are many price comparison table designs available online, but they don't always work well in Squarespace. Here I've taken a simple design by Omar Benka and adapted it for Squarespace. The table is used here to compare three offerings, one of which is called out as the popular option.

Screenshot of price comparison tables

When implemented as three code blocks and some CSS, this is how it appears in Squarespace: 

Option 1

£10

£120/year

  • feature 1
  • 2nd feature
  • 3rd feature
  • 4th feature
  • 5th feature

Option 2

£20

£240/year

  • feature 1
  • 2nd feature
  • 3rd feature
  • 4th feature
  • 5th feature
Most popular

Option 3

£30

£360/year

  • feature 1
  • 2nd feature
  • 3rd feature
  • 4th feature
  • 5th feature

It's pretty simple to implement this on any Squarespace site, just follow this guide. We don't provide technical support for these free guides but we can be hired for at our standard developer rates for freelance work. 

1. To create this table, add three code blocks to your page. Drag the blocks around until they are side by side horizontally across the page. At the moment you should see three "Hello World!" statements across the page. 

Screenshot of three code blocks

2. Next, replace the code in each block. Add the following HTML code to the first block:

<section class="pricing-block planblock">
  <section>
    <section class="pricing-tier" onclick="location.href='#';">
      <h4>Option 1</h4>
      <h5><span class="plan-price">£10</span></h5>
      <p class="annual-price">£120/year</p>
<ul>
 <li>feature 1</li>
 <li><strong>2nd</strong> feature</li>
 <li><strong>3rd</strong> feature</li>
 <li><strong>4th</strong> feature</li>
 <li><strong>5th</strong> feature</li>
</ul>
    </section>
  </section>
</section>

You can start replacing the prices and feature descriptions now, or you can leave them until later.

3. Paste the same code into the third code block. You now have two pricing tiers ready, but their formatting won't be correct yet.

4. Below you'll find some slightly different code. Paste this into the second code block.

<section class="pricing-block planblock">
  <section>
<section class="pricing-tier callout" onclick="location.href='#';">  
  <section class="pricing-tier" onclick="location.href='#';">    
      <h4>Option 1</h4>
      <h5><span class="plan-price">£10</span></h5>
      <p class="annual-price">£120/year</p>
<ul>
 <li>feature 1</li>
 <li><strong>2nd</strong> feature</li>
 <li><strong>3rd</strong> feature</li>
 <li><strong>4th</strong> feature</li>
 <li><strong>5th</strong> feature</li>
</ul>
<h6>Most popular</h6>    
    </section>
  </section>
</section>

This is the code block that represents the pricing tier that you want to call out as the most popular, featured or best value. The code is the same as the previous two blocks, except for two lines that we've added. On the third line, we've added a callout to the section class as shown below:

<section class="pricing-tier callout" onclick="location.href='#';">

On the 15th line (just below the </ul> tag) we've added the most popular label like this:

<h6>Most popular</h6>

5. Save the changes to the Code Blocks and your page. You should see three columns of information but they won't be pretty (see screenshot below).

Screenshot of three code blocks (unformatted)

Next we're going to add the formatting with some Custom CSS. You can add this to the site's Custom CSS area by specifying the page collection or you could wrap it in <style> </style> tags in the Page Header Code Injection. I suggest you do the latter unless you are familiar with identifying collections. If you need help with this, read the Squarespace article about it. So let's add the CSS.

6. Open the Page Settings for this page (click Settings at the top of the page).

7. In the Advanced tab, type style tags like this:

When you type the first one, the second should automatically appear.

8. In between these two tags, add the CSS below. When you paste this in and save your changes, the  tables should be formatted correctly. The code is commented to show where colours can be changed. 

/* Formatting of Price Comparison Table 1 
   Set the page background for this page */
#siteWrapper {
  background: #e7f2f0;
  }
  
  /* create white boxes for tier pricing */
  .pricing-tier {
    /* set background colour of tiers */
    background: white;
    /* rounded edges */
    border-radius: 3px;
    -moz-border-radius: 3px;
    /* make the tier appear clickable */
    cursor: pointer;
    overflow: hidden;
  }  
  
  .pricing-block {
    width: 100%;
  }  

  /* format the title of each tier */
  .pricing-tier h4 {
    font-size: 18pt;
    font-weight: normal;
    text-align: center;
    text-transform: Uppercase;
    /* height of title box */
    padding: 18px 0 15px;
    /* colour of tier title backgrounds */
    background: #00a1ff;
    /* colour of tier title font */
    color: white;
    margin-top: 0;
}

  /* Formatting of annual fee */
  .pricing-tier p {
    line-height: 1.625em;
    text-align: center;    
  }

  /* Formatting of listed items */
  .pricing-tier ul {
    margin: 30px 0 0;
    border-top: 2px solid #e7f2f0;
    /* Remove the bullets from feature list */
    list-style: none;
  }

  /* Tier feature list formatting */
  .pricing-tier li {
    text-align: center;
    height: 20px;
    padding: 18px 0;
    /* alignment for squarespace */
    margin-left: -40px;
    /* formatting of feature dividing lines */
    border-bottom: 2px solid #e7f2f0;
  }
  /* Tier headline price formatting */
  .pricing-tier .plan-price {
    font-size: 5em;
    letter-spacing: -3px;
  }

  /* More formatting of tier headline price */
  .pricing-tier h5 {
    margin-top: 3em;
    font-weight: 500;
    text-align: center;
  }
  
  /* Styling of Annual Fee */
  .pricing-tier .annual-price {
    font-size: 1.1em;
    color: #0091e5;
}
  .plan-tier.callout .annual-price {
  /* annual price on callout */
    color: #78b336;
}
  
  /* Color of call-out title */
  .pricing-tier.callout h4 {
    background-color: #78b336;
  }

  /* Styling of 'Most Popular' call-out */
  .pricing-tier.callout h6 {
    /* background color of Most Popular */
    background: #8dcf3f;
    /* font color of Most Popular */
    color: rgba(39,65,90,.5);
    /* height of Most Popular */
    padding: 15px 0 14px;
    font-size: 1.25em;    
    text-align: center;
    /* adjust margins for Squarespace */
    margin: -1px 0 0 0;
  }

9. Finally, each code block includes a link in the third line of code. Replace the # character with a URL so that when a visitor clicks on the price plan, they can be taken to an explanation or sign-up page.

Copyright: You may use this code to add and style pricing tables on a website. You may not copy or publish this code elsewhere on the internet without our express written permission.