Pricing Table Generator

Design responsive pricing tables with featured tiers, billing toggles, and custom feature lists.

Why this matters

Clear pricing reduces friction in the buying decision. Highlighting a “most popular” plan steers visitors toward your best value tier. A monthly/yearly toggle lets customers see savings, which increases annual plan sign-ups.

<!-- Pricing Table -->
<style>
  .sqs-pricing-container {
    max-width: 1000px;
    margin: 0 auto;
    font-family: sans-serif;
  }
  .sqs-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
  }
  .sqs-pricing-grid a:hover { opacity: 0.85; }
  @media (max-width: 768px) {
    .sqs-pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  }
  .sqs-pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    font-family: sans-serif;
    font-size: 14px;
    color: #666;
  }
  .sqs-pricing-toggle button {
    background: none;
    border: 2px solid #e5e5e5;
    border-radius: 20px;
    padding: 6px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .sqs-pricing-toggle button.active {
    background: #000000;
    color: #fff;
    border-color: #000000;
  }
</style>

<div class="sqs-pricing-container">
  <div class="sqs-pricing-toggle">
    <button class="sqs-billing-btn active" data-billing="monthly">Monthly</button>
    <button class="sqs-billing-btn" data-billing="yearly">Yearly</button>
  </div>
  <div class="sqs-pricing-grid">
    <div style="position:relative;border:1px solid #e5e5e5;border-radius:8px;padding:32px 24px;text-align:center;background:#fff;">
      <h3 style="font-size:20px;font-weight:700;margin:0 0 16px;color:#1a1a1a;">Starter</h3>
      <div class="sqs-price-monthly" style="display:block;">
        <span style="font-size:48px;font-weight:700;color:#1a1a1a;">$19</span>
        <span style="font-size:14px;color:#999;">/mo</span>
      </div>
      <div class="sqs-price-yearly" style="display:none;">
        <span style="font-size:48px;font-weight:700;color:#1a1a1a;">$15</span>
        <span style="font-size:14px;color:#999;">/mo</span>
      </div>
      <ul style="list-style:none;padding:0;margin:24px 0;">
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">1 Website</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">5 Pages</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Basic SEO</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Email Support</li>
      </ul>
      <a href="#" style="display:block;padding:14px;background:#1a1a1a;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;font-weight:600;transition:opacity 0.2s ease;">Get Started</a>
    </div>
    <div style="position:relative;border:2px solid #000000;border-radius:8px;padding:32px 24px;text-align:center;background:#fff;">
      <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#000000;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 16px;border-radius:20px;">Most Popular</div>
      <h3 style="font-size:20px;font-weight:700;margin:8px 0 16px;color:#1a1a1a;">Professional</h3>
      <div class="sqs-price-monthly" style="display:block;">
        <span style="font-size:48px;font-weight:700;color:#1a1a1a;">$49</span>
        <span style="font-size:14px;color:#999;">/mo</span>
      </div>
      <div class="sqs-price-yearly" style="display:none;">
        <span style="font-size:48px;font-weight:700;color:#1a1a1a;">$39</span>
        <span style="font-size:14px;color:#999;">/mo</span>
      </div>
      <ul style="list-style:none;padding:0;margin:24px 0;">
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">3 Websites</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Unlimited Pages</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Advanced SEO</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Priority Support</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Analytics Dashboard</li>
      </ul>
      <a href="#" style="display:block;padding:14px;background:#000000;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;font-weight:600;transition:opacity 0.2s ease;">Get Started</a>
    </div>
    <div style="position:relative;border:1px solid #e5e5e5;border-radius:8px;padding:32px 24px;text-align:center;background:#fff;">
      <h3 style="font-size:20px;font-weight:700;margin:0 0 16px;color:#1a1a1a;">Enterprise</h3>
      <div class="sqs-price-monthly" style="display:block;">
        <span style="font-size:48px;font-weight:700;color:#1a1a1a;">$99</span>
        <span style="font-size:14px;color:#999;">/mo</span>
      </div>
      <div class="sqs-price-yearly" style="display:none;">
        <span style="font-size:48px;font-weight:700;color:#1a1a1a;">$79</span>
        <span style="font-size:14px;color:#999;">/mo</span>
      </div>
      <ul style="list-style:none;padding:0;margin:24px 0;">
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Unlimited Websites</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Unlimited Pages</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Advanced SEO</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">24/7 Support</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Analytics Dashboard</li>
      <li style="padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:14px;color:#555;">Custom Integrations</li>
      </ul>
      <a href="#" style="display:block;padding:14px;background:#1a1a1a;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;font-weight:600;transition:opacity 0.2s ease;">Contact Us</a>
    </div>
  </div>
</div>
<script>
(function() {
  var btns = document.querySelectorAll('.sqs-billing-btn');
  btns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      btns.forEach(function(b) { b.classList.remove('active'); });
      btn.classList.add('active');
      var billing = btn.getAttribute('data-billing');
      document.querySelectorAll('.sqs-price-monthly').forEach(function(el) {
        el.style.display = billing === 'monthly' ? 'block' : 'none';
      });
      document.querySelectorAll('.sqs-price-yearly').forEach(function(el) {
        el.style.display = billing === 'yearly' ? 'block' : 'none';
      });
    });
  });
})();
</script>

How to add this to Squarespace

1. Copy the code above.
2. On your Squarespace page, add a Code Block (click + → Code).
3. Paste the code and toggle off “Display Source”.
4. Update the CTA button URLs to point to your checkout or contact pages.
5. Save and preview your pricing page.