Product Comparison

I am trying to make a product comparison block on my website much like the one that you'll see on the squarespace website. I attached a screenshot of what I am trying to accomplish on my squarespace website. I'm not at all sure how to even start with something like this. Is there any easy way of putting something like this together?

If you don't need "pay monthly, pay anually" tab, you can use some code from Codepen.io

Demo: https://codepen.io/adrianjacob/pen/wMGpeX

Add Code Block > Paste this code

<div class="comparison">

  <table>
    <thead>
      <tr>
        <th class="tl tl2"></th>
        <th class="qbse">
          Self-Employed & Freelance
        </th>
        <th colspan="3" class="qbo">
          Small businesses that need accounting, invoicing or payroll
        </th>
      </tr>
      <tr>
        <th class="tl"></th>
        <th class="compare-heading">
          Self-Employed
        </th>
        <th class="compare-heading">
          Simple Start
        </th>
        <th class="compare-heading">
          Essentials
        </th>
        <th class="compare-heading">
          Plus
        </th>
      </tr>
      <tr>
        <th></th>
        <th class="price-info">
          <div class="price-was">Was £6.00</div>
          <div class="price-now"><span>£4<span class="price-small">.20</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £7.00</div>
          <div class="price-now"><span>£5<span class="price-small">.60</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £15.00</div>
          <div class="price-now"><span>£10<span class="price-small">.50</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £25.00</div>
          <div class="price-now"><span>£15<span class="price-small">.00</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td colspan="4">Seperate business from personal spending</td>
      </tr>
      <tr class="compare-row">
        <td>Seperate business/personal</td>
        <td><span class="tickblue">✔</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Estimate tax payments</td>
      </tr>
      <tr>
        <td>Estimate tax payments</td>
        <td><span class="tickblue">✔</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Track deductible mileage</td>
      </tr>
      <tr class="compare-row">
        <td>Track deductible mileage</td>
        <td><span class="tickblue">✔</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Download online banking</td>
      </tr>
      <tr>
        <td>Download online banking</td>
        <td><span class="tickblue">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Works on PC, Mac & mobile</td>
      </tr>
      <tr class="compare-row">
        <td>Multi-device</td>
        <td><span class="tickblue">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Create invoices & estimates</td>
      </tr>
      <tr>
        <td>Create invoices & estimates</td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Manage VAT</td>
      </tr>
      <tr class="compare-row">
        <td>Manage VAT</td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Run payroll</td>
      </tr>
      <tr>
        <td>Run payroll</td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Number of users</td>
      </tr>
      <tr class="compare-row">
        <td>Number of users</td>
        <td class="tickblue">1 user</td>
        <td class="tickgreen">1 user</td>
        <td class="tickgreen">3 users</td>
        <td class="tickgreen">5 users</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Manage bills & payments</td>
      </tr>
      <tr>
        <td>Manage bills & payments</td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Handle multiple currencies</td>
      </tr>
      <tr class="compare-row">
        <td>Handle multiple currencies</td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Create budgets</td>
      </tr>
      <tr>
        <td>Create budgets</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Track employee time</td>
      </tr>
      <tr class="compare-row">
        <td>Track employee time</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Stock control</td>
      </tr>
      <tr>
        <td>Stock control</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
    </tbody>
  </table>

</div>
<style>
  .comparison {
  max-width:940px;
  margin:0 auto;
  font:13px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  padding:10px;
}

.comparison table {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom:1px solid #CCC;
}

.comparison td, .comparison th {
  border-right:1px solid #CCC;
  empty-cells: show;
  padding:10px;
}

.compare-heading {
  font-size:18px;
  font-weight:bold !important;
  border-bottom:0 !important;
  padding-top:10px !important;
}

.comparison tbody tr:nth-child(odd) {
  display:none;
}

.comparison .compare-row {
  background:#F5F5F5;
}

.comparison .tickblue {
  color:#0078C1;
}

.comparison .tickgreen {
  color:#009E2C;
}

.comparison th {
  font-weight:normal;
  padding:0;
  border-bottom:1px solid #CCC;
}

.comparison tr td:first-child {
  text-align:left;
}
  
.comparison .qbse, .comparison .qbo, .comparison .tl {
  color:#FFF;
  padding:10px;
  font-size:13px;
  border-right:1px solid #CCC;
  border-bottom:0;
}

.comparison .tl2 {
  border-right:0;
}

.comparison .qbse {
  background:#0078C1;
  border-top-left-radius: 3px;
  border-left:0px;
}

.comparison .qbo {
  background:#009E2C;
  border-top-right-radius: 3px;
  border-right:0px;
}

.comparison .price-info {
  padding:5px 15px 15px 15px;
}

.comparison .price-was {
  color:#999;
  text-decoration: line-through;
}

.comparison .price-now, .comparison .price-now span {
  color:#ff5406;
}

.comparison .price-now span {
  font-size:32px;
}

.comparison .price-small {
    font-size: 18px !important;
    position: relative;
    top: -11px;
    left: 2px;
}

.comparison .price-buy {
  background:#ff5406;
  padding:10px 20px;
  font-size:12px;
  display:inline-block;
  color:#FFF;
  text-decoration:none;
  border-radius:3px;
  text-transform:uppercase;
  margin:5px 0 10px 0;
}

.comparison .price-try {
  font-size:12px;
}

.comparison .price-try a {
  color:#202020;
}

@media (max-width: 767px) {
  .comparison td:first-child, .comparison th:first-child {
    display: none;
  }
  .comparison tbody tr:nth-child(odd) {
    display:table-row;
    background:#F7F7F7;
  }
  .comparison .row {
    background:#FFF;
  }
  .comparison td, .comparison th {
    border:1px solid #CCC;
  }
  .price-info {
  border-top:0 !important;
  
}
  
}

@media (max-width: 639px) {
  .comparison .price-buy {
    padding:5px 10px;
  }
  .comparison td, .comparison th {
    padding:10px 5px;
  }
  .comparison .hide-mobile {
    display:none;
  }
  .comparison .price-now span {
  font-size:16px;
}

.comparison .price-small {
    font-size: 16px !important;
    top: 0;
    left: 0;
}
  .comparison .qbse, .comparison .qbo {
    font-size:12px;
    padding:10px 5px;
  }
  .comparison .price-buy {
    margin-top:10px;
  }
  .compare-heading {
  font-size:13px;
}
}
</style>

On 7/9/2020 at 11:48 PM, tuanphan said:

If you don't need "pay monthly, pay anually" tab, you can use some code from Codepen.io

Demo: https://codepen.io/adrianjacob/pen/wMGpeX

Add Code Block > Paste this code

<div class="comparison">

  <table>
    <thead>
      <tr>
        <th class="tl tl2"></th>
        <th class="qbse">
          Self-Employed & Freelance
        </th>
        <th colspan="3" class="qbo">
          Small businesses that need accounting, invoicing or payroll
        </th>
      </tr>
      <tr>
        <th class="tl"></th>
        <th class="compare-heading">
          Self-Employed
        </th>
        <th class="compare-heading">
          Simple Start
        </th>
        <th class="compare-heading">
          Essentials
        </th>
        <th class="compare-heading">
          Plus
        </th>
      </tr>
      <tr>
        <th></th>
        <th class="price-info">
          <div class="price-was">Was £6.00</div>
          <div class="price-now"><span>£4<span class="price-small">.20</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £7.00</div>
          <div class="price-now"><span>£5<span class="price-small">.60</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £15.00</div>
          <div class="price-now"><span>£10<span class="price-small">.50</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £25.00</div>
          <div class="price-now"><span>£15<span class="price-small">.00</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td colspan="4">Seperate business from personal spending</td>
      </tr>
      <tr class="compare-row">
        <td>Seperate business/personal</td>
        <td><span class="tickblue">✔</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Estimate tax payments</td>
      </tr>
      <tr>
        <td>Estimate tax payments</td>
        <td><span class="tickblue">✔</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Track deductible mileage</td>
      </tr>
      <tr class="compare-row">
        <td>Track deductible mileage</td>
        <td><span class="tickblue">✔</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Download online banking</td>
      </tr>
      <tr>
        <td>Download online banking</td>
        <td><span class="tickblue">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Works on PC, Mac & mobile</td>
      </tr>
      <tr class="compare-row">
        <td>Multi-device</td>
        <td><span class="tickblue">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Create invoices & estimates</td>
      </tr>
      <tr>
        <td>Create invoices & estimates</td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Manage VAT</td>
      </tr>
      <tr class="compare-row">
        <td>Manage VAT</td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Run payroll</td>
      </tr>
      <tr>
        <td>Run payroll</td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Number of users</td>
      </tr>
      <tr class="compare-row">
        <td>Number of users</td>
        <td class="tickblue">1 user</td>
        <td class="tickgreen">1 user</td>
        <td class="tickgreen">3 users</td>
        <td class="tickgreen">5 users</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Manage bills & payments</td>
      </tr>
      <tr>
        <td>Manage bills & payments</td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Handle multiple currencies</td>
      </tr>
      <tr class="compare-row">
        <td>Handle multiple currencies</td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Create budgets</td>
      </tr>
      <tr>
        <td>Create budgets</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Track employee time</td>
      </tr>
      <tr class="compare-row">
        <td>Track employee time</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Stock control</td>
      </tr>
      <tr>
        <td>Stock control</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen">✔</span></td>
      </tr>
    </tbody>
  </table>

</div>
<style>
  .comparison {
  max-width:940px;
  margin:0 auto;
  font:13px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  padding:10px;
}

.comparison table {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom:1px solid #CCC;
}

.comparison td, .comparison th {
  border-right:1px solid #CCC;
  empty-cells: show;
  padding:10px;
}

.compare-heading {
  font-size:18px;
  font-weight:bold !important;
  border-bottom:0 !important;
  padding-top:10px !important;
}

.comparison tbody tr:nth-child(odd) {
  display:none;
}

.comparison .compare-row {
  background:#F5F5F5;
}

.comparison .tickblue {
  color:#0078C1;
}

.comparison .tickgreen {
  color:#009E2C;
}

.comparison th {
  font-weight:normal;
  padding:0;
  border-bottom:1px solid #CCC;
}

.comparison tr td:first-child {
  text-align:left;
}
  
.comparison .qbse, .comparison .qbo, .comparison .tl {
  color:#FFF;
  padding:10px;
  font-size:13px;
  border-right:1px solid #CCC;
  border-bottom:0;
}

.comparison .tl2 {
  border-right:0;
}

.comparison .qbse {
  background:#0078C1;
  border-top-left-radius: 3px;
  border-left:0px;
}

.comparison .qbo {
  background:#009E2C;
  border-top-right-radius: 3px;
  border-right:0px;
}

.comparison .price-info {
  padding:5px 15px 15px 15px;
}

.comparison .price-was {
  color:#999;
  text-decoration: line-through;
}

.comparison .price-now, .comparison .price-now span {
  color:#ff5406;
}

.comparison .price-now span {
  font-size:32px;
}

.comparison .price-small {
    font-size: 18px !important;
    position: relative;
    top: -11px;
    left: 2px;
}

.comparison .price-buy {
  background:#ff5406;
  padding:10px 20px;
  font-size:12px;
  display:inline-block;
  color:#FFF;
  text-decoration:none;
  border-radius:3px;
  text-transform:uppercase;
  margin:5px 0 10px 0;
}

.comparison .price-try {
  font-size:12px;
}

.comparison .price-try a {
  color:#202020;
}

@media (max-width: 767px) {
  .comparison td:first-child, .comparison th:first-child {
    display: none;
  }
  .comparison tbody tr:nth-child(odd) {
    display:table-row;
    background:#F7F7F7;
  }
  .comparison .row {
    background:#FFF;
  }
  .comparison td, .comparison th {
    border:1px solid #CCC;
  }
  .price-info {
  border-top:0 !important;
  
}
  
}

@media (max-width: 639px) {
  .comparison .price-buy {
    padding:5px 10px;
  }
  .comparison td, .comparison th {
    padding:10px 5px;
  }
  .comparison .hide-mobile {
    display:none;
  }
  .comparison .price-now span {
  font-size:16px;
}

.comparison .price-small {
    font-size: 16px !important;
    top: 0;
    left: 0;
}
  .comparison .qbse, .comparison .qbo {
    font-size:12px;
    padding:10px 5px;
  }
  .comparison .price-buy {
    margin-top:10px;
  }
  .compare-heading {
  font-size:13px;
}
}
</style>

 

This is great...how do you change the links on the buttons? that's the only thing i cannot figure out

1 hour ago, emjay333 said:

This is great...how do you change the links on the buttons? that's the only thing i cannot figure out

You can share link to page where you added the code, we can check & adjust link code easier

This code was very helpful thank you @tuanphan! The only thing I couldn't figure out is how to have the hyperlink appear as clickable. I used the code below and it works (i.e. a new tab opens up), but it appears as normal text when I want to make it clear it's a hyperlink

        <td><a href="https://www.gocrayon.com/program" target="_blank">Financial Baby Prep Program</a></td>

Any assistance would be much appreciated (it's for a launch on in three days!). Thank you 

On 3/15/2024 at 7:48 AM, Kapow said:

This code was very helpful thank you @tuanphan! The only thing I couldn't figure out is how to have the hyperlink appear as clickable. I used the code below and it works (i.e. a new tab opens up), but it appears as normal text when I want to make it clear it's a hyperlink

        <td><a href="https://www.gocrayon.com/program" target="_blank">Financial Baby Prep Program</a></td>

Any assistance would be much appreciated (it's for a launch on in three days!). Thank you 

You can use this code to Website > Website Tools > Custom CSS to change its color or make it underline

td a {
	text-decoration: underline !important;
	color: blue !important;
}

Hello, the code given is very useful. Btw how to add a group like this ? Thank you very much for the effort !

5 hours ago, Seet said:

Hello, the code given is very useful. Btw how to add a group like this ? Thank you very much for the effort !

Do you use above code or you want to create a same layout like as screenshot?

28 minutes ago, tuanphan said:

Do you use above code or you want to create a same layout like as screenshot?

I have used the code above, just curious how to break into different group. Thank you.

On 4/2/2024 at 5:27 PM, Seet said:

I have used the code above, just curious how to break into different group. Thank you.

Not sure, if you share link to a page where you use the code, I will try testing new HTML code.

Or you can find a code on Codepen, if you can find it, you can share link, I will convert it to Squarespace Code Block.