Pricing page similar to ERPNext

Frappe Framework Website
1

I want to create a pricing page similar to ERPNext Pricing pricing page.

image
image1032×592 52.7 KB

But I couldn’t find a Page Builder Item something like that. So, I’ve 2 questions?

  • How do you manage pricing on your websites?
  • How does ERPNext gurus created that page?
1 Like
2

I’m sure this was done using custom css and html so you may have to do this yourself as well.

3

Hi @TurkerTunali,

If you want to create a page using HTML/CSS then check it.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ERPNext Pricing</title>
<style>
  .pricing-plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .plan {
    flex-basis: calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
  }
  
  h2 {
    margin: 0;
  }
</style>
</head>
<body>
<div class="price-container">
  <h1>Pricing</h1>
  <div class="pricing-plans">
    <div class="plan">
      <h2>Plan 1</h2>
      <p>Plan description here</p>
      <p>Price: $XX per month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <a class="btn btn-primary btn-sm primary-action" href="#" style="width: 100%;">Choose Plan</a>
    </div>

    <div class="plan">
      <h2>Plan 2</h2>
      <p>Plan description here</p>
      <p>Price: $YY per month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <a class="btn btn-primary btn-sm primary-action" href="#" style="width: 100%;">Choose Plan</a>
    </div>

    <div class="plan">
      <h2>Plan 3</h2>
      <p>Plan description here</p>
      <p>Price: $ZZ per month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <a class="btn btn-primary btn-sm primary-action" href="#" style="width: 100%;">Choose Plan</a>
    </div>
    <!-- Add more plan sections as needed -->
  </div>
</div>
</body>
</html>

Output:

image
image1844×914 59.8 KB

I hope this helps.

Thank You!

2 Likes