Subscription pricing on Squarespace allows you to offer recurring billing for your services or products, where users pay a fixed amount regularly (e.g., monthly or annually). Setting up a subscription pricing table can enhance your site by clearly displaying the options available to users.

Subscription Pricing

1. Add Code Block:

In Squarespace, navigate to the page where you'd like to add the pricing table. Use the "Edit" button, then insert a "Code Block" in your chosen section.

2. Insert HTML & CSS:

Copy and paste the provided HTML structure and CSS styling into the code block. The HTML defines the pricing plans, while the CSS customizes the appearance of the table.

How To Set Up

Customising the Code:
- To change the background colour, modify background-colour in .pricing-card. For example, change #cff0c0 to a different colour hex code.
- Adjust the font size of the price by editing the font-size in .pricing-card .price. You can change 24px to a different size, such as 28px for larger text.
- To update button colors, edit the background-colour in .cta-button and .cta-button:hover to match your site's branding.
Save and Preview:
- Once you’ve added and customised the code, save the page and preview it to see how the pricing grid behaves.

div.header-title a:after {
    content: "<!-- Pricing Table HTML -->
<div class="pricing-table-container">
  <div class="pricing-card">
    <h3>Basic Plan</h3>
    <p class="price">£10/month</p>
    <ul class="features">
      <li>Share x 1 codes</li>
    </ul>
    <a href="#" class="cta-button">Choose Plan</a>
  </div>

  <div class="pricing-card">
    <h3>Pro Plan</h3>
    <p class="price">£25/month</p>
    <ul class="features">
      <li>Share x 5 codes</li>
    </ul>
    <a href="#" class="cta-button">Choose Plan</a>
  </div>

  <div class="pricing-card">
    <h3>Premium Plan</h3>
    <p class="price">£50/month</p>
    <ul class="features">
      <li>Share x 20 codes</li>
    
    </ul>
    <a href="#" class="cta-button">Choose Plan</a>
  </div>
</div>

<!-- CSS for Pricing Table -->
<style>
  .pricing-table-container {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .pricing-card {
    background-color: #cff0c0;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 900px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .pricing-card h3 {
    margin-bottom: 15px;
    color: #333;
  }

  .pricing-card .price {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
  }

  .features {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
  }

  .features li {
    margin-bottom: 10px;
  }

  .cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  .cta-button:hover {
    background-color: #2980b9;
  }
</style>";
    font-size: 20px;
    display: inline-block;
    margin-left: 10px; /* Adjust this value to add spacing between the logo and the text */
    font-family: 'Lora', serif; /* Ensure Lora font is applied */
}


.sqs-block-accordion .accordion-item:hover {
    border-left: 5px solid #33d63e; /* Change border color on hover */
}

.sqs-block-accordion .accordion-item-title {
    font-size: 1.2em;
    color: #333;
}

.sqs-block-accordion .accordion-item-content {
    color: #555;
}

Customise

Need Custom Solutions?

All of our pre-built codes are completely free to use! If you need a more bespoke solution or want additional customisations, feel free to get in touch for a free quote. Don’t pay extortionate agency fees—our team of designers charge by the hour and can deliver tailor-made solutions for your Squarespace website.

Subscription Pricing

1. Add Code Block:

2. Insert HTML & CSS:

How To Set Up

Customising the Code:

Save and Preview:

Customise

Need Custom Solutions?

No.1 For Free Squarespace Plugins

Subscription Pricing

1. Add Code Block:

2. Insert HTML & CSS:

How To Set Up

Customising the Code:

Save and Preview:

Customise

Need Custom Solutions?

Logo Text

No.1 For Free Squarespace Plugins