Hi everyone, I’m working on my Shopify website and need to enable dual pricing for taxes. I want to display both prices (including and excluding GST) directly in the theme without using third-party apps. Any advice on how to do this? Thanks in advance!
Hi @Arihant ,
Thank you for reaching out! I’ve prepared a complete solution that will help you display both inclusive and exclusive GST prices (at 18%) directly in your theme without requiring any third-party apps.
{% comment %}
product-price-dual.liquid
Displays product price both including and excluding GST (18%)
{% endcomment %}
{%- liquid
# Set GST rate to 18%
assign gst_rate = 0.18
# Calculate prices with and without GST
assign price_with_gst = product.price
assign price_without_gst = product.price | divided_by: 1.18
assign gst_amount = price_with_gst | minus: price_without_gst
-%}
MRP (inc. GST):
{{ price_with_gst | money }}
Base Price (excl. GST):
{{ price_without_gst | money }}
GST Amount (18%):
{{ gst_amount | money }}
{% style %}
.product-pricing {
margin: 1.5rem 0;
font-family: var(--font-body-family);
background: #ffffff;
padding: 1rem;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.price-container {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
padding: 0.5rem;
border-bottom: 1px solid #e5e5e5;
}
.price-label {
font-weight: 500;
color: #333;
}
.price-amount {
font-weight: 600;
color: #2c5282;
}
.gst-amount {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
padding: 0.5rem;
background-color: #f7fafc;
border-radius: 4px;
}
{% endstyle %}
{% schema %}
{
"name": "Dual Pricing Display",
"settings": [
{
"type": "number",
"id": "gst_rate",
"label": "GST Rate (%)",
"default": 18
}
]
}
{% endschema %}
Here’s how to implement this solution:
Step 1: Create the Snippet
- Navigate to your Shopify admin panel
- Go to Online Store → Themes
- Click “Actions” → “Edit code”
- In the Snippets folder, create a new file named “product-price-dual.liquid”
- Copy and paste the code provided above
Step 2: Add to Product Template
- In your theme editor, locate your product template (usually product.liquid)
- Add this line where you want the pricing to appear:
{% render 'product-price-dual' %}
The implementation includes:
- Clear display of both GST-inclusive and exclusive prices
- Separate GST amount display (18%)
- Responsive and clean styling
- Easy customization through theme settings
Please let me know if you need any clarification or run into any issues during implementation. I’m happy to help you customize it further to match your specific needs.
Cheers!
Shubham | Untechnickle