Designing a Pricing Page That Sells

Selling products and services online requires an intuitive and informative pricing page design that gets across the benefits, pricing, and value that you provide in a clear and concise design.

Selling products and services online requires an intuitive and informative pricing page that gets across the benefits, pricing, and value that each of your plans provide in a clear and concise design. A/B testing your various designs as well as copy will steer you in the direction of what pricing page converts the most website visitors into paying customers.

Below is the HTML, CSS, and JavaScript to add a pricing page to your website.

Step 1 - Add the HTML below to where you'd like to add your pricing plans

<section class="company-heading intro-type" id="parallax-one">
  <div class="container">
    <div class="row product-title-info">
      <div class="col-md-12">
        <h1>PRICING PAGE</h1>
      </div>
    </div>
  </div>
  <div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/pricing/company-hero2.jpg);"></div>
</section>
<div class="container">
  <div class="pricing-table row">
    <div class="col-sm-4 pricing-container">
      <div class="pricing-table-item">
        <h2 class="item-header">Personal</h2>
        <div class="item-cta-block" style="height: 213px;">
          <div id="js__block-price" class="block-price currency-container" style="display: inline-block;" data-country="usd">$1,000</div>
            <div class="block-sub-text">
              <div id="js__block-price" class="currency-container" style="display: none;" data-country="cad">USD</div>
              Per Month
            </div>
            <div class="pricing-toggle-holder">
              <button class="pricing-toggle">
                <span class="pricing-toggle-open">See Standard Features <span class="glyphicon glyphicon-plus"></span></span>
                <span class="pricing-toggle-close">Hide Standard Features <span class="glyphicon glyphicon-minus"></span></span>
              </button>
            </div>
            <!-- /.pricing-toggle-holder -->
            <a class="button orange-button outbound" href="" target="_blank">Buy Personal</a>
          </div>
          <div class="item-details-block">
            <div class="plus-header">Includes the following features:</div>
            <div class="separator"></div>
            <ul>
              <li><i class="fa fa-check" aria-hidden="true"></i> Proin placerat justo vitae</li>
              <li><i class="fa fa-check" aria-hidden="true"></i> Sed vehicula dolor vitae felis</li>
              <li><i class="fa fa-check" aria-hidden="true"></i> Curabitur at arcu ullamcorper</li>
              <li><i class="fa fa-check" aria-hidden="true"></i> Nulla ut mauris malesuada</li>
              <li>Nam pharetra ante et dictum</li>
              <li>Vivamus at elit et purus</li>
              <li>Donec at eros vitae orci pulvinar</li>
              <li>Vivamus at elit et purus</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 pricing-container">
      <div class="pricing-table-item">
        <h2 class="item-header">Pro</h2>
        <div class="item-cta-block" style="height: 213px;">
          <div id="js__block-price" class="block-price currency-container" style="display: inline-block;" data-country="usd">$2,000</div>
            <div class="block-sub-text">
              <div id="js__block-price" class="currency-container" style="display: none;" data-country="cad">USD</div>
                Per Month
              </div>
              <div class="pricing-toggle-holder">
                <button class="pricing-toggle">
                  <span class="pricing-toggle-open">See Pro Features <span class="glyphicon glyphicon-plus"></span></span>
                  <span class="pricing-toggle-close">Hide Pro Features <span class="glyphicon glyphicon-minus"></span></span>
                </button>
              </div>
              <!-- /.pricing-toggle-holder -->
              <a class="button orange-button outbound" href="" target="_blank">Buy Pro</a>
            </div>
            <div class="item-details-block">
              <div class="plus-header">Includes the following features:</div>
                <div class="separator"></div>
                <ul>
                  <li><i class="fa fa-check" aria-hidden="true"></i> Proin placerat justo vitae</li>
                  <li><i class="fa fa-check" aria-hidden="true"></i> Sed vehicula dolor vitae felis</li>
                  <li><i class="fa fa-check" aria-hidden="true"></i> Curabitur at arcu ullamcorper</li>
                  <li><i class="fa fa-check" aria-hidden="true"></i> Nulla ut mauris malesuada</li>
                  <li>Nam pharetra ante et dictum</li>
                  <li>Vivamus at elit et purus</li>
                  <li>Donec at eros vitae orci pulvinar</li>
                  <li>Vivamus at elit et purus</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 pricing-container">
      <div class="pricing-table-item">
        <h2 class="item-header">Enterprise</h2>
        <div class="item-cta-block" style="height: 213px;">
          <div id="js__block-price" class="block-price currency-container" style="display: inline-block;" data-country="usd">$3,000</div>
          <div class="block-sub-text">
            <div id="js__block-price" class="currency-container" style="display: none;" data-country="cad">USD</div>
              Per Month
            </div>
            <div class="pricing-toggle-holder">
              <button class="pricing-toggle">
                <span class="pricing-toggle-open">See Ultimate Features <span class="glyphicon glyphicon-plus"></span></span>
                <span class="pricing-toggle-close">Hide Ultimate Features <span class="glyphicon glyphicon-minus"></span></span>
              </button>
            </div>
            <!-- /.pricing-toggle-holder -->
            <a class="button orange-button outbound" href="" target="_blank">Buy Enterprise</a>
          </div>
          <div class="item-details-block">
            <div class="plus-header">Includes the following features:</div>
              <div class="separator"></div>
              <ul>
                <li><i class="fa fa-check" aria-hidden="true"></i> Proin placerat justo vitae</li>
                <li><i class="fa fa-check" aria-hidden="true"></i> Sed vehicula dolor vitae felis</li>
                <li><i class="fa fa-check" aria-hidden="true"></i> Curabitur at arcu ullamcorper</li>
                <li><i class="fa fa-check" aria-hidden="true"></i> Nulla ut mauris malesuada</li>
                <li>Nam pharetra ante et dictum</li>
                <li>Vivamus at elit et purus</li>
                <li>Donec at eros vitae orci pulvinar</li>
                <li>Vivamus at elit et purus</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2 - Add the CSS below to the main stylesheet of your website

.pricing-table {
  margin-top: 0;
}
.pricing-table {
  margin-top: 30px;
  margin-bottom: 30px;
}
.pricing-table .pricing-table-item {
  border-bottom: 0;
}
.pricing-table .item-header {
  background-color: #696969;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
h2, .header-two {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.3;
  text-transform: uppercase;
}
.pricing-table .item-cta-block {
  background-color: #d3d3d3;
  padding: 30px;
  text-align: center;
  position: relative;
}
.pricing-table .block-price {
  color: #000;
  font-size: 45px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.pricing-table .block-sub-text {
  text-transform: uppercase;
  font-size: 15px;
  color: #000;
  line-height: 26px;
  margin-bottom: 10px;
}
.pricing-table .pricing-toggle-holder {
  display: none;
}
.pricing-table .pricing-toggle-holder button {
  padding-left: 0;
  padding-right: 0;
}
.item-cta-block .button.orange-button {
  display: inline-block;
}
button.orange-button, 
input[type="button"].orange-button, 
input[type="reset"].orange-button, 
input[type="submit"].orange-button, 
a.button.orange-button {
  background-color: #d2282e;
  color: #fff;
  padding: 12px 20px;
  box-shadow: 0 3px 0 0 rgba(24, 24, 25, 0.1);
  -webkit-transition: all .75s;
  transition: all .75s;
  margin-bottom: 6px;
}
button .glyphicon-menu-right, 
input[type="button"] .glyphicon-menu-right, 
input[type="reset"] .glyphicon-menu-right, 
input[type="submit"] .glyphicon-menu-right, 
a.button .glyphicon-menu-right {
  top: -1px;
  margin-left: 5px;
  font-size: 9px;
}
.pricing-table .item-details-block {
  background-color: #f7f7f7;
  padding: 38px 30px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.pricing-table .plus-header {
  text-align: center;
  font-size: 18px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.pricing-table .separator {
  margin-bottom: 38px;
}
.separator {
  background-color: #d2282e;
  height: 3px;
  width: 100px;
  margin: 0 auto;
  margin-top: 27px;
  margin-bottom: 48px;
}
.pricing-table .item-details-block {
  min-height: 525px;
}
.pricing-table .item-details-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-table .item-details-block ul li {
  line-height: 2;
}
li {
  text-align: center;
  margin-bottom: 10px;
  line-height: 120%;
}
.separator-type, 
.title-type, 
.intro-type, 
.content-type .intro-type p {
  position: relative;
}
.intro-type .container {
  padding: 107px 0 102px !important;
}
.company-heading h1 {
  margin-bottom: 40px;
  line-height: 80px;
  color: #fff;
  font-weight: 700 !important;
  text-align: center;
}
.seo-header, 
.product-header, 
.intro-type .container h1.white, 
.company-heading h1 {
  font-weight: 100 !important;
  text-transform: capitalize;
  font-size: 55px;
  margin-bottom: 20px;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
  background-repeat: repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -10;
}

Step 3 - Add the includes below to the page where your pricing section is

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Download from Github

Share on Facebook Tweet It