A well-designed pricing table can significantly boost conversions for your Shopify store, whether you’re selling subscriptions, digital products, or tiered services. In this guide, you’ll learn how to create a professional pricing table with a monthly/yearly toggle, product links, and mobile-friendly styling—without needing expensive apps.
Why You Need a Pricing Table in Shopify
✅ Improves decision-making – Customers compare plans easily
✅ Boosts conversions – Clear pricing = fewer abandoned carts
✅ Enhances UX – Professional look builds trust
✅ Flexible for subscriptions/services – Supports monthly & yearly billing
Custom Liquid Section (No App Needed)
Step 1: Add a New Custom Liquid Section
Paste this SEO-optimized code:
Go to Online Store > Themes > Edit Code
Under Sections, create a new file: pricing-table.liquid
{%- style -%}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
background-color: {{ section.settings.background_color }};
}
.pricing-table-{{ section.id }} {
max-width: {% if section.settings.full_width %}100%{% else %}1200px{% endif %};
margin: 0 auto;
}
.section-logo-{{ section.id }} {
text-align: {{ section.settings.heading_alignment }};
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.section-logo-{{ section.id }} img {
max-width: {{ section.settings.logo_width }}px;
height: auto;
}
.pricing-table-header-{{ section.id }} {
text-align: {{ section.settings.heading_alignment }};
margin-bottom: 15px;
}
.pricing-table-header-{{ section.id }} .section-heading {
font-size: {% case section.settings.heading_size %}
{% when 'small' %}20px
{% when 'medium' %}28px
{% when 'large' %}36px
{% endcase %};
margin-bottom: 10px;
}
.section-subtitle-{{ section.id }} {
text-align: {{ section.settings.heading_alignment }};
font-size: {% case section.settings.subtitle_size %}
{% when 'small' %}14px
{% when 'medium' %}18px
{% when 'large' %}22px
{% endcase %};
color: {{ section.settings.subtitle_color }};
margin-bottom: 30px;
}
.pricing-plans-{{ section.id }} {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.monthly-plans,
.yearly-plans {
display: flex;
gap: 15px;
overflow: auto;
}
.pricing-plan-{{ section.id }} {
flex: 1;
min-width: 280px;
padding: 30px;
border-radius: 8px;
background: #fff;
{% if section.settings.enable_shadow %}
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
{% endif %}
transition: transform 0.3s ease;
}
.pricing-plan-{{ section.id }}:hover {
transform: translateY(-5px);
}
.plan-price-{{ section.id }} {
font-size: 36px;
font-weight: 700;
margin-bottom: 10px;
color: {{ section.settings.price_color }};
}
.plan-subheading-{{ section.id }} {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: {{ section.settings.subheading_color }};
}
.plan-description-{{ section.id }} {
margin-bottom: 20px;
color: {{ section.settings.description_color }};
}
.plan-button-{{ section.id }} {
display: inline-block;
padding: 12px 24px;
background: {{ section.settings.button_color }};
color: {{ section.settings.button_text_color }};
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: background 0.3s ease;
}
.plan-button-{{ section.id }}:hover {
background: {{ section.settings.button_hover_color }};
}
.plan-toggle-{{ section.id }} {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.toggle-switch-{{ section.id }} {
position: relative;
display: inline-block;
width: 200px;
height: 44px;
}
.toggle-switch-{{ section.id }} input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider-{{ section.id }} {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
transition: .4s;
border-radius: 34px;
}
.toggle-slider-{{ section.id }}:before {
position: absolute;
content: "";
height: 36px;
width: 96px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 34px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.toggle-switch-{{ section.id }} input:checked + .toggle-slider-{{ section.id }}:before {
transform: translateX(96px);
}
.toggle-labels-{{ section.id }} {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
font-weight: 600;
pointer-events: none;
}
@media (max-width: 767px) {
.pricing-plan-{{ section.id }} {
flex: 100%;
}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top_mobile }}px;
padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
}
.section-logo-{{ section.id }} img {
max-width: {{ section.settings.logo_width_mobile }}px;
}
}
{%- endstyle -%}
<div class="pricing-table-{{ section.id }}">
{%- if section.settings.logo != blank -%}
<div class="section-logo-{{ section.id }}">
<img src="{{ section.settings.logo | img_url: '800x' }}"
alt="{{ section.settings.logo.alt | escape }}"
loading="lazy">
</div>
{%- endif -%}
{%- if section.settings.heading != blank -%}
<div class="pricing-table-header-{{ section.id }}">
<h2 class="section-heading">{{ section.settings.heading }}</h2>
</div>
{%- endif -%}
{%- if section.settings.subtitle != blank -%}
<div class="section-subtitle-{{ section.id }}">
{{ section.settings.subtitle }}
</div>
{%- endif -%}
<div class="plan-toggle-{{ section.id }}">
<label class="toggle-switch-{{ section.id }}">
<input type="checkbox" id="plan-toggle-{{ section.id }}">
<span class="toggle-slider-{{ section.id }}"></span>
<div class="toggle-labels-{{ section.id }}">
<span>Monthly</span>
<span>Yearly</span>
</div>
</label>
</div>
<div class="pricing-plans-{{ section.id }}">
<!-- Monthly Plans -->
<div class="monthly-plans">
{%- for block in section.blocks -%}
{%- if block.type == 'monthly_plan' -%}
<div class="pricing-plan-{{ section.id }}" data-plan-type="monthly">
<h3 class="plan-price-{{ section.id }}">{{ block.settings.price }}</h3>
<h4 class="plan-subheading-{{ section.id }}">{{ block.settings.subheading }}</h4>
<div class="plan-description-{{ section.id }}">{{ block.settings.description }}</div>
<a href="{{ block.settings.product.url }}" class="plan-button-{{ section.id }}">{{ block.settings.button_text }}</a>
</div>
{%- endif -%}
{%- endfor -%}
</div>
<!-- Yearly Plans -->
<div class="yearly-plans" style="display: none;">
{%- for block in section.blocks -%}
{%- if block.type == 'yearly_plan' -%}
<div class="pricing-plan-{{ section.id }}" data-plan-type="yearly">
<h3 class="plan-price-{{ section.id }}">{{ block.settings.price }}</h3>
<h4 class="plan-subheading-{{ section.id }}">{{ block.settings.subheading }}</h4>
<div class="plan-description-{{ section.id }}">{{ block.settings.description }}</div>
<a href="{{ block.settings.product.url }}" class="plan-button-{{ section.id }}">{{ block.settings.button_text }}</a>
</div>
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('plan-toggle-{{ section.id }}');
const monthlyPlans = document.querySelector('#shopify-section-{{ section.id }} .monthly-plans');
const yearlyPlans = document.querySelector('#shopify-section-{{ section.id }} .yearly-plans');
toggle.addEventListener('change', function() {
if (this.checked) {
monthlyPlans.style.display = 'none';
yearlyPlans.style.display = 'flex';
} else {
monthlyPlans.style.display = 'flex';
yearlyPlans.style.display = 'none';
}
});
});
</script>
{% schema %}
{
"name": "Pricing Table",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Section logo",
"info": "Recommended size: 200x100px"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 300,
"step": 10,
"unit": "px",
"label": "Logo width (desktop)",
"default": 200
},
{
"type": "range",
"id": "logo_width_mobile",
"min": 50,
"max": 200,
"step": 10,
"unit": "px",
"label": "Logo width (mobile)",
"default": 150
},
{
"type": "richtext",
"id": "heading",
"label": "Section heading",
"default": "<p>Choose Your Plan</p>"
},
{
"type": "select",
"id": "heading_size",
"label": "Heading size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subtitle",
"default": "<p>Select the plan that works best for you</p>"
},
{
"type": "select",
"id": "subtitle_size",
"label": "Subtitle size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle color",
"default": "#666666"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": false
},
{
"type": "checkbox",
"id": "enable_shadow",
"label": "Enable card shadow",
"default": true
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#f9f9f9"
},
{
"type": "color",
"id": "price_color",
"label": "Price color",
"default": "#000000"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading color",
"default": "#333333"
},
{
"type": "color",
"id": "description_color",
"label": "Description color",
"default": "#666666"
},
{
"type": "color",
"id": "button_color",
"label": "Button color",
"default": "#2563eb"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_hover_color",
"label": "Button hover color",
"default": "#1d4ed8"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "padding_top_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding top (mobile)",
"default": 24
},
{
"type": "range",
"id": "padding_bottom_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding bottom (mobile)",
"default": 24
}
],
"blocks": [
{
"type": "monthly_plan",
"name": "Monthly plan",
"limit": 3,
"settings": [
{
"type": "text",
"id": "price",
"label": "Price",
"default": "$19/month"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Basic Plan"
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Perfect for individuals getting started</p><ul><li>Feature 1</li><li>Feature 2</li><li>Feature 3</li></ul>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Get Started"
},
{
"type": "product",
"id": "product",
"label": "Linked product"
}
]
},
{
"type": "yearly_plan",
"name": "Yearly plan",
"limit": 3,
"settings": [
{
"type": "text",
"id": "price",
"label": "Price",
"default": "$179/year"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Pro Plan"
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Best value for long-term commitment</p><ul><li>All Basic features</li><li>Priority support</li><li>Exclusive content</li></ul>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Get Started"
},
{
"type": "product",
"id": "product",
"label": "Linked product"
}
]
}
],
"presets": [
{
"name": "Pricing Table",
"blocks": [
{
"type": "monthly_plan"
},
{
"type": "monthly_plan"
},
{
"type": "monthly_plan"
},
{
"type": "yearly_plan"
},
{
"type": "yearly_plan"
},
{
"type": "yearly_plan"
}
]
}
]
}
{% endschema %}