Hi everyone,
I’m trying to customize my Shopify store so that on the product pages, if a variant has a price of $0, it displays a message saying “Contact us for pricing” instead of showing the $0 price. Ideally, I’d like this message to include a link to the Contact page.
I’m using the Trade theme. I’ve messed around with the code, and tried changing “snippets/price.liquid” and “sections/main-product.liquid” But i am unsure what exactly to change and what to replace it with. At one point, the changes I made caused the message “Contact us for pricing” to appear on the product tile within the collection page, before clicking to view the individual product page and accessing further information on variants, But I need it to appear in place of the $0 with the individual variants. I am at a loss and not sure how to proceed, would really appreciate some help.
Hi, this can be done by modifying theme code
Hi @EonSupply ,
I’ve reviewed your request to display “Contact us for pricing” instead of $0 prices for specific variants, and I have a solution for you.
The issue requires modifications to a few key files in your Trade theme:
-
Edit snippets/price.liquid: This is the main file that controls how prices are displayed. We need to add a conditional check that looks for zero-priced variants and displays our custom message instead.
-
Update product-form.liquid: To ensure the pricing message updates correctly when customers select different variants, we need to modify the JavaScript that handles variant selection.
-
Add some custom CSS: This will style your “Contact us for pricing” message to match your store’s design.
Code Changes
I’ve prepared the code changes for you. Here’s what you need to do:
- In your Shopify admin, go to Online Store → Themes
- Find your Trade theme and click “Actions” → “Edit code”
- Navigate to snippets/price.liquid and replace the content with:
{% comment %}
Renders a price with a compare_at price and a currency code if enabled.
Accepts:
- variant: {Object} Product variant
- product: {Object} Product (optional)
- show_badges: {Boolean} Show price badges (optional)
- price_class: {String} Class for price element (optional)
- was_price_class: {String} Class for compare_at price element (optional)
Usage:
{% render 'price', variant: product.selected_or_first_available_variant %}
{% endcomment %}
{%- liquid
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
assign money_price = price | money
if product.title
assign product_title = product.title | strip_html
endif
if variant.title
assign variant_title = variant.title | strip_html
endif
if settings.currency_code_enabled
assign money_price = price | money_with_currency
endif
if compare_at_price > price
if settings.currency_code_enabled
assign money_compare_at_price = compare_at_price | money_with_currency
else
assign money_compare_at_price = compare_at_price | money
endif
endif
-%}
<div class="price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if compare_at_price > price %} price--on-sale{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if show_badges and compare_at_price > price or available == false %} price--badges{% endif -%}"
>
{% if price == 0 %}
<span class="contact-for-pricing">
<a href="{{ routes.pages_url }}/contact">Contact us for pricing</a>
</span>
{% else %}
<div class="price__regular">
<span class="visually-hidden visually-hidden--inline">
{{ 'products.product.price.regular_price' | t }}
</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
</div>
<div class="price__sale">
<span class="visually-hidden visually-hidden--inline">
{{ 'products.product.price.sale_price' | t }}
</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
{%- if compare_at_price > price -%}
<span class="visually-hidden visually-hidden--inline">
{{ 'products.product.price.regular_price' | t }}
</span>
<span>
<s class="price-item price-item--regular{% if was_price_class %} {{ was_price_class }}{% endif %}">
{{ money_compare_at_price }}
</s>
</span>
{%- endif -%}
</div>
{% endif %}
</div>
- Next, find your product-form.liquid file (likely in the snippets directory) and add the setAvailability() method to your VariantSelects class:
// Add this method to your VariantSelects class
setAvailability() {
if (!this.currentVariant) return;
// Check if current variant price is zero
if (this.currentVariant.price === 0) {
// Find price elements and hide them
const priceContainer = document.querySelector('.price');
if (priceContainer) {
const regularPrice = priceContainer.querySelector('.price__regular');
const salePrice = priceContainer.querySelector('.price__sale');
if (regularPrice) regularPrice.style.display = 'none';
if (salePrice) salePrice.style.display = 'none';
// Show contact for pricing message if it doesn't exist
let contactElement = priceContainer.querySelector('.contact-for-pricing');
if (!contactElement) {
contactElement = document.createElement('span');
contactElement.className = 'contact-for-pricing';
contactElement.innerHTML = '<a href="/pages/contact">Contact us for pricing</a>';
priceContainer.appendChild(contactElement);
} else {
contactElement.style.display = 'block';
}
}
} else {
// Show regular price elements and hide contact message
const priceContainer = document.querySelector('.price');
if (priceContainer) {
const regularPrice = priceContainer.querySelector('.price__regular');
const salePrice = priceContainer.querySelector('.price__sale');
const contactElement = priceContainer.querySelector('.contact-for-pricing');
if (regularPrice) regularPrice.style.display = 'block';
if (salePrice) salePrice.style.display = 'block';
if (contactElement) contactElement.style.display = 'none';
}
}
}
Also make sure to call this method in the onVariantChange() function.
- Finally, add this CSS to your theme.scss.liquid file or in the theme customizer under Custom CSS:
.contact-for-pricing {
display: block;
font-size: 1rem;
font-weight: 600;
color: #3a3a3a;
margin-bottom: 1rem;
}
.contact-for-pricing a {
color: #0066cc;
text-decoration: underline;
}
.contact-for-pricing a:hover {
color: #004c99;
}
If you experience any issues or need additional help, please don’t hesitate to reach out. I’m happy to troubleshoot or make further adjustments to ensure this works perfectly with your store.
Best regards,
Shubham | Untechnickle
2 Likes
Hello @EonSupply ,
In the Trade theme, you’re right to look at main-product.liquid — that’s where the price updates based on the selected variant. The issue is likely that you’re editing the global price snippet (snippets/price.liquid), which affects not just the product page but also your collection tiles, cart, etc.
What you want to do is this:
1. Open sections/main-product.liquid.
2. Find where the price is rendered for the currently selected variant. It might look like:
{{ current_variant.price | money }}
or it could be wrapped in a render ‘price’ call.
3. Replace that bit with a condition that checks the variant’s price:{% if current_variant.price == 0 %}
Contact us for pricing
{% else %}
{{ current_variant.price | money }}
{% endif %}
That way, you’re only changing what shows up on the product page, and only for variants with a price of $0. The key is not touching the shared snippets like price.liquid unless you want that logic everywhere.
Also, make sure you’re using current_variant or selected_or_first_available_variant, depending on how Trade is set up — it can vary. If it’s not working, drop in {{ current_variant.price }} somewhere just to see what’s being returned.
Hi @EonSupply
If you want a no-code solution to show messages like “Contact us for pricing” instead of $0 for specific variants, you could take a look at the Easify Product Options app. It lets you create custom option such as button with links without editing your theme code, which might save you a lot of time (and headache 
). Could be worth exploring depending on how flexible you want the setup to be! Here’s how it works:
- This is the result: When you select the Contact Button, it will direct you to your website. If you want the $0 to disappear, just reach out to Easify.
You can add your options URL like this:
I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 
Thank you for your help, I was hoping you’d be able to help me further with this. For this step:
“Next, find your product-form.liquid file (likely in the snippets directory) and add the setAvailability() method to your VariantSelects class:”
I was able to find product-form.js, is this possibly the right place?
Can you help me do this to my page i am code illiterate
Hey @apeflake84 ,
Sure, we’d love to implement that in your store. Please email your collaborator code on the email below, we’ll send you the store access request + create a copy of your live theme and add the changes there. Once you’re satisfied, you can publish the theme.
Looking forward to hearing from you,
Shubham | Untechnickle
