The Importance of an Effective Pricing Section in Your Shopify Store
A clear and compelling pricing section is crucial for converting visitors into customers on your Shopify store. This section serves as a vital touchpoint where potential customers evaluate the value and affordability of your products or services. An effective pricing table not only highlights the different plans or product options available but also emphasizes the unique features and benefits of each tier, making it easier for customers to make informed decisions.
Key benefits of a well-designed pricing section include:
- Transparency and Trust: By clearly displaying pricing information, you build trust with your customers. Transparency in pricing helps reduce uncertainty and fosters a sense of reliability.
- Ease of Comparison: A structured pricing table allows customers to quickly compare different options. This can highlight the advantages of higher-tier plans or more comprehensive products, encouraging upsells.
- Enhanced User Experience: A clean, intuitive design ensures that visitors can easily navigate through the options. This enhances the overall user experience, reducing friction and helping to guide potential buyers towards making a purchase.
- Highlighting Value Propositions: Use this section to underscore the unique value propositions of each pricing tier. This can include special features, benefits, or exclusive offers that differentiate your products from competitors.
- Driving Conversions: A strategically designed pricing section can effectively drive conversions by appealing to different customer segments. By addressing various needs and budgets, you cater to a broader audience, increasing the likelihood of conversion.
Incorporate these principles into your pricing section to maximize its impact. Remember, the goal is to make it as easy as possible for your customers to see the value you offer and to choose the plan or product that best suits their needs.
To get the Pricing table please use the code below
Below is the style for the pricing table
{% style %}
.pricingTable {
margin: 40px auto;
}
.pricingTable > .pricingTable-title {
text-align: center;
font-size: 3em;
font-size: 300%;
margin-bottom: 20px;
letter-spacing: 0.04em;
}
.pricingTable > .pricingTable-subtitle {
text-align: center;
font-size: 1.8em;
letter-spacing: 0.04em;
margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
.pricingTable > .pricingTable-subtitle {
margin-bottom: 30px;
}
}
.pricingTable-firstTable {
list-style: none;
padding-left: 2em;
padding-right: 2em;
text-align: center;
}
.pricingTable-firstTable_table {
vertical-align: middle;
width: 31%;
display: inline-block;
padding: 0px 30px 40px;
text-align: center;
max-width: 320px;
transition: all 0.3s ease;
border-radius: 5px;
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table {
display: block;
width: 90%;
margin: 0 auto;
max-width: 90%;
margin-bottom: 20px;
padding: 10px;
padding-left: 20px;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table > * {
display: inline-block;
vertical-align: middle;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table > * {
display: block;
float: none;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table:after {
display: table;
content: "";
clear: both;
}
}
.pricingTable-firstTable_table:hover {
transform: scale(1.08);
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table:hover {
transform: none;
}
}
.pricingTable-firstTable_table:not(:last-of-type) {
margin-right: 1.5%;
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table:not(:last-of-type) {
margin-right: auto;
}
}
.pricingTable-firstTable_table:nth-of-type(2) {
position: relative;
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table:nth-of-type(2) h1 {
padding-top: 8%;
}
}
.pricingTable-firstTable_table:nth-of-type(2):before {
content: "Most Popular";
position: absolute;
color: white;
display: block;
background-color: #3bbdee;
text-align: center;
right: 15px;
top: -25px;
height: 65px;
width: 65px;
border-radius: 50%;
box-sizing: border-box;
font-size: 0.5em;
padding-top: 22px;
text-transform: uppercase;
letter-spacing: 0.13em;
transition: all 0.5s ease;
}
@media screen and (max-width: 988px) {
.pricingTable-firstTable_table:nth-of-type(2):before {
font-size: 0.6em;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table:nth-of-type(2):before {
left: 10px;
width: 45px;
height: 45px;
top: -10px;
padding-top: 13px;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table:nth-of-type(2):before {
font-size: 0.8em;
}
}
.pricingTable-firstTable_table:nth-of-type(2):hover:before {
transform: rotate(360deg);
}
.pricingTable-firstTable_table__header {
font-size: 1.6em;
padding: 40px 0px;
border-bottom: 2px solid #fff;
letter-spacing: 0.03em;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__header {
font-size: 1.45em;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__header {
padding: 0px;
border-bottom: none;
float: left;
width: 33%;
padding-top: 3%;
padding-bottom: 2%;
}
}
@media screen and (max-width: 610px) {
.pricingTable-firstTable_table__header {
font-size: 1.3em;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table__header {
float: none;
width: 100%;
font-size: 1.8em;
margin-bottom: 5px;
}
}
.pricingTable-firstTable_table__pricing {
font-size: 3em;
padding: 30px 0px;
border-bottom: 2px solid #fff;
line-height: 0.7;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__pricing {
font-size: 2.8em;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__pricing {
border-bottom: none;
padding: 0;
float: left;
clear: left;
width: 33%;
}
}
@media screen and (max-width: 610px) {
.pricingTable-firstTable_table__pricing {
font-size: 2.4em;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table__pricing {
float: none;
width: 100%;
font-size: 3em;
margin-bottom: 10px;
}
}
.pricingTable-firstTable_table__pricing span:first-of-type {
font-size: 0.35em;
vertical-align: top;
letter-spacing: 0.15em;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__pricing span:first-of-type {
font-size: 0.3em;
}
}
.pricingTable-firstTable_table__pricing span:last-of-type {
vertical-align: bottom;
font-size: 0.3em;
letter-spacing: 0.04em;
padding-left: 0.2em;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__pricing span:last-of-type {
font-size: 0.25em;
}
}
.pricingTable-firstTable_table__options {
list-style: none;
padding: 15px;
font-size: 0.9em;
border-bottom: 2px solid #fff;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__options {
font-size: 0.85em;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__options {
border-bottom: none;
padding: 0;
margin-right: 10%;
}
}
@media screen and (max-width: 610px) {
.pricingTable-firstTable_table__options {
font-size: 0.7em;
margin-right: 8%;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table__options {
font-size: 1.3em;
margin-right: none;
margin-bottom: 10px;
}
}
.pricingTable-firstTable_table__options > li {
padding: 8px 0px;
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__options > li {
text-align: left;
}
}
@media screen and (max-width: 610px) {
.pricingTable-firstTable_table__options > li {
padding: 5px 0;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table__options > li {
text-align: center;
}
}
.pricingTable-firstTable_table__options > li:before {
content: "✓";
display: inline-flex;
margin-right: 15px;
color: white;
background-color: green;
border-radius: 50%;
width: 15px;
height: 15px;
font-size: 0.8em;
padding: 2px;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__options > li:before {
width: 14px;
height: 14px;
padding: 1.5px;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__options > li:before {
width: 12px;
height: 12px;
}
}
.pricingTable-firstTable_table__getstart {
color: white;
border: 0;
background-color: #71ce73;
margin-top: 30px;
border-radius: 5px;
cursor: pointer;
padding: 15px;
box-shadow: 0px 3px 0px 0px #66ac64;
letter-spacing: 0.07em;
transition: all 0.4s ease;
}
@media screen and (max-width: 1068px) {
.pricingTable-firstTable_table__getstart {
font-size: 0.95em;
}
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__getstart {
margin-top: 0;
}
}
@media screen and (max-width: 610px) {
.pricingTable-firstTable_table__getstart {
font-size: 0.9em;
padding: 10px;
}
}
@media screen and (max-width: 480px) {
.pricingTable-firstTable_table__getstart {
font-size: 1em;
width: 50%;
margin: 10px auto;
}
}
.pricingTable-firstTable_table__getstart:hover {
transform: translateY(-10px);
box-shadow: 0px 40px 29px -19px rgba(102, 172, 100, 0.9);
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__getstart:hover {
transform: none;
box-shadow: none;
}
}
.pricingTable-firstTable_table__getstart:active {
box-shadow: inset 0 0 10px 1px #66a564, 0px 40px 29px -19px rgba(102, 172, 100, 0.95);
transform: scale(0.95) translateY(-9px);
}
@media screen and (max-width: 767px) {
.pricingTable-firstTable_table__getstart:active {
transform: scale(0.95) translateY(0);
box-shadow: none;
}
}
{% endstyle %}
Below is the liquid code for the pricing table
<div class="pricingTable gradient color-{{ section.settings.section_color_scheme }}">
<h2 class="pricingTable-title">{{ section.settings.title }}</h2>
<h3 class="pricingTable-subtitle">{{ section.settings.subtitle }}</h3>
<ul class="pricingTable-firstTable">
{% for block in section.blocks %}
<li class="pricingTable-firstTable_table" style="background-color:{{ block.settings.bgcolor }}">
<h1 class="pricingTable-firstTable_table__header">{{ block.settings.title }}</h1>
<p class="pricingTable-firstTable_table__pricing">
<span>$</span><span>{{ block.settings.price }}</span><span>{{ block.settings.interval }}</span>
</p>
<ul class="pricingTable-firstTable_table__options">
{% if block.settings.list-item-1 != blank %}
<li>{{ block.settings.list-item-1 }}</li>
{% endif %}
{% if block.settings.list-item-2 != blank %}
<li>{{ block.settings.list-item-2 }}</li>
{% endif %}
{% if block.settings.list-item-3 != blank %}
<li>{{ block.settings.list-item-3 }}</li>
{% endif %}
{% if block.settings.list-item-4 != blank %}
<li>{{ block.settings.list-item-4 }}</li>
{% endif %}
{% if block.settings.list-item-5 != blank %}
<li>{{ block.settings.list-item-5 }}</li>
{% endif %}
</ul>
<button class="pricingTable-firstTable_table__getstart"><a href="{{ block.settings.button_link }}">{{ block.settings.button }}</a></button>
</li>
{% endfor %}
</ul>
</div>
Below is the Schema for the pricing table
{% schema %}
{
"name": "Pricing Table",
"settings": [
{
"type": "text",
"id": "title",
"default": "Top Title",
"label": "Title"
},
{
"type": "text",
"id": "subtitle",
"default": "Subtitle",
"label": "Subtitle"
},
{
"type": "color_scheme",
"id": "section_color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
}
],
"blocks": [
{
"type": "table",
"name": "Table",
"limit": 3,
"settings": [
{
"type": "text",
"id": "title",
"default": "Title",
"label": "Title"
},
{
"type": "text",
"id": "price",
"default": "Price",
"label": "Price"
},
{
"type": "select",
"id": "interval",
"options": [
{
"value": "monthly",
"label": "Monthly"
},
{
"value": "yearly",
"label": "Yearly"
}
],
"default": "monthly",
"label": "Monthly"
},
{
"type": "text",
"id": "list-item-1",
"default": "List Item 1",
"label": "List Item 1"
},
{
"type": "text",
"id": "list-item-2",
"default": "List Item 2",
"label": "List Item 2"
},
{
"type": "text",
"id": "list-item-3",
"default": "List Item 3",
"label": "List Item 3"
},
{
"type": "text",
"id": "list-item-4",
"default": "List Item 4",
"label": "List Item 4"
},
{
"type": "text",
"id": "list-item-5",
"default": "List Item 5",
"label": "List Item 5"
},
{
"type": "text",
"id": "button",
"default": "Button Title",
"label": "Button Title"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
},
{
"type":"color",
"id":"bgcolor",
"default": "#FFFFFF",
"label":"Background Color"
}
]
}
],
"presets": [
{
"name":"Pricing Table"
}
]
}
{% endschema %}
