Products without price to display a "send enquiry" button on the COLLECTION page
Hi
We have some products that don't have prices and want to display some text or CTA button on the collection page to encourage people to send enquiries instead of the price.
Example of a product with price and one
without next to it:
So for people not to think the product isn't available, we want to show it is available just have to send enquiry.
Hi @Djani,
You can try using our app, Fordeer Product Labels & Badges, by following these steps:
Step 1: Install the app, enable app embed and create a text label, adjusting it to the desired position.
Step 2: In the label content tab, enter the link of the page you want to direct customers to in the link section.
Please note that if the label doesn't appear in your store, please contact our chat support team via live chat immediately. If you have any further questions, feel free to ask me directly here.
Best wishes.
@Djani ,
To hide the price you can create a new template and hide the price using customizer, please refer the below screenshot.
For request a quote feature request you to refer the below video how you can implement the same.
Hi again,
I've reviewed the related page, and it seems there are some issues or logical inconsistencies.
- Why do some sold-out products show prices while others don't?
- Some products without prices lack the 'sold out' indicator.
These factors need to be considered when coding. The code I provided will display the following image if a product has the 'sold out' status. This code will work if you apply the 'sold out' label to all out-of-stock products. You can look for alternative solutions on your own.
However, addressing such issues requires specialized JavaScript coding expertise. We've successfully resolved similar issues in the past.
In short, a more detailed scenario requires custom development. You can use the provided code if it fulfills your requirements. However, if you seek more comprehensive services, we offer affordable monthly Shopify premium support (advanced CSS + JavaScript) to address these issues and others, provide free apps, and redesign your website as per your preferences. For more information, feel free to send me a private message or reach out via the link in my signature. I hope there's no misunderstanding.
Terence.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.
<style>
.sold-out-overlay {
width: 228px;
height: 98px;
}
</style>
<script>
document.querySelectorAll('.product-index .so.icn').forEach(function(element) {
if (element.textContent.trim() === "SOLD OUT") {
var productIndex = element.closest('.product-index');
productIndex.style.position = 'relative';
var overlay = document.createElement('div');
overlay.classList.add('sold-out-overlay');
overlay.style.backgroundImage = 'url(https://cdn.shopify.com/s/files/1/0589/5887/2735/files/asdasdadasdasdasdasdasdadsasd-removebg-preview_480x480.png?v=1629040175)';
overlay.style.backgroundPosition = 'center';
overlay.style.backgroundRepeat = 'no-repeat';
overlay.style.backgroundSize = 'contain';
overlay.style.position = 'absolute';
overlay.style.top = '50%';
overlay.style.left = '50%';
overlay.style.transform = 'translate(-50%, -50%)';
productIndex.appendChild(overlay);
}
});
</script>
Community Blog Articles
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025