Pricing Table for Squarespace (Part 2)

Following my post giving instructions on how to build a price comparison table in Squarespace, here's a second example, built on a standard CSS/HTML idea by Alireza.

Basic
£10
Free 30-day trial

  • 5 team members
  • 3 team playlists
  • Unlimited public playlists



Best
£30
Free 7-day trial

  • Unlimited team members
  • Unlimited team playlists
  • Unlimited public playlists
  • Team analytics
  • Send files
Regular
£20
Free 14-day trial

  • 8 team members
  • 6 team playlists
  • Unlimited public playlists



Like the previous example, this shows the visitor three price plans, one of which is called out as the best option. Each option is built in its own code block, which means they remain responsive according to the Squarespace LayoutEngine. So here's how to add it to your Squarespace site.

 

Font Awesome

This example relies on Font Awesome to display the checkmarks/ticks. It's an excellent free service and some Squarespace templates have it built in. If your template doesn't, you can easily add to your site using code injection like this:

1. Go to Settings > Advanced > Code Injection.

2. Add the following code to the Header section and save the changes:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

Your site can now access a range of awesome icons! We'll use them in the code below. Look out for the references to the FontAwesome font family.

 

Adding three pricing blocks

1. Add three new Code Blocks to your page, lined up horizontally across the page.

2. Replace the HTML in the first and third code blocks, with the following HTML:

<div class='price-compare-wrapper'>
  <div class='price-compare-package'>
    <div class='name'>Basic</div>
    <div class='price'>£10</div>
    <div class='trial'>Free 30-day trial</div>
    <hr>
    <ul>
      <li>
        <strong>5</strong>
        team members
      </li>
      <li>
        <strong>3</strong>
        team playlists
      </li>
      <li>
        <strong>Unlimited</strong>
        public playlists
      </li>
    </ul>
<br>
<br>
<br>    
  </div>
</div>

3. In the second code block, add the following HTML:

<div class='price-compare-wrapper'>
  <div class='price-compare-package best'>
    <div class='name'>Best</div>
    <div class='price'>£30</div>
    <div class='trial'>Free 7-day trial</div>
    <hr>
    <ul>
      <li>
        <strong>Unlimited</strong>
        team members
      </li>
      <li>
        <strong>Unlimited</strong>
        team playlists
      </li>
      <li>
        <strong>Unlimited</strong>
        public playlists
      </li>
      <li>
        Team analytics
      </li>
      <li>
        Send files
      </li>
    </ul>
  </div>
  </div>

So what's different about the HTML in the second block? There are two small changes. The first change is the addition of best in the second line. This is used to indicate which of the price tiers is the highlighted option. The only other difference is that there are more features listed, each one in a line item (li). This means there aren't any line breaks (<br>) padding out the box at the end of the feature list. 

4. Save your changes and then we'll add the Custom CSS to format the content of the code blocks.

  --color-scheme: #00C1F4;

  .price-compare-wrapper {
    font-weight: 400;
    color: #9f9f9f;
    font-size: 15px;
  }

  .price-compare-package {
    box-sizing: border-box;
    border: 3px solid #e8e8e8;
    border-radius: 7px;
    padding: 24px;
    text-align: center;
    -webkit-transition: margin-top 0.5s linear;
    transition: margin-top 0.5s linear;
    position: relative;
  }

  /* Shift it up when visitor hovers on this option */
  .price-compare-package:hover {
    margin-top: -30px;
    -webkit-transition: margin-top 0.3s linear;
    transition: margin-top 0.3s linear;
  }

  /* Formatting of Option name */ 
  .price-compare-wrapper .name {
    color: #565656;
    font-weight: 300;
    font-size: 3rem;
    margin-top: -5px;
  }
  /* Formatting of price */
  .price-compare-wrapper .price {
    margin-top: 23px;
    font-weight: bold;
  }
  
  .price-compare-wrapper .price::after {
    content: " / month per user";
    font-weight: normal;
  }
  /* horizontal rule */  
  hr {
    background-color: #dedede;
    border: none;
    height: 1px;
  }
  /* Formatting of trial bubble */
  .price-compare-wrapper .trial {
    font-size: .9rem;
    font-weight: 600;
    padding: 0px 16px 6px 16px;
    color: var(--color-scheme);
    border: 1px solid #e4e4e4;
    display: inline-block;
    border-radius: 15px;
    background-color: white;
    position: relative;
    bottom: -23px;
    height: 22px;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-top: 29px;
  }
  .price-compare-wrapper li {
    margin-bottom: 15px;
  }
  .checkIcon {
    font-family: "FontAwesome";
    content: "\f00c";
  }
  .price-compare-wrapper li::before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 1.3rem;
    color: var(--color-scheme);
    margin-right: 3px;
  }
  .best {
    border-color: var(--color-scheme);
  }
  /* Triangle */
  .best::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 64px 64px 0 0;
    border-color: var(--color-scheme) transparent transparent transparent;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
  }
  .best::after {
    font-family: "FontAwesome";
    content: "\f00c";
    color: white;
    position: absolute;
    left: 9px;
    top: 6px;
    font-size: 1.4rem;
  }