Products without price to display a "send enquiry" button on the COLLECTION page

Djani
Tourist
11 0 1

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: 

Djani_0-1717574960552.png

So for people not to think the product isn't available, we want to show it is available just have to send enquiry.

Replies 8 (8)

Rahul_dhiman
Shopify Expert
107 20 36

@Djani  As this would need some custom coding.I have sent you the details in Inbox , please check.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

Amanda0128
Shopify Partner
46 3 17

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.

Amanda0128_0-1717584492637.png

Step 2: In the label content tab, enter the link of the page you want to direct customers to in the link section.

Amanda0128_1-1717584653557.png

 

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. 

 

If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.
Djani
Tourist
11 0 1

Hi And this button shows up in the collection view where products are displayed?

We already have a button on the products page

Amanda0128
Shopify Partner
46 3 17

Hi @Djani, sorry for my late response. yes you can. after setting up, please select show on "collection pages" in the display section. If you encounter any difficulties, you can contact our chat support team through live chat. 

If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.

gr_trading
Shopify Partner
1807 143 189

@Djani ,

 

To hide the price you can create a new template and hide the price using customizer, please refer the below screenshot.

gr_trading_0-1717584802975.png

 

For request a quote feature request you to refer the below video how you can implement the same.

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

TerenceKEANE
Shopify Partner
511 86 78

Hi,

 

What you want can be done. However, on which pages will the button appear? Also, how will the button redirection work? Additionally, what is the website link?

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Djani
Tourist
11 0 1

Hi

So the goal is to show a cta in the collection view. Don't want some people to think the product ins't available if it doesn't display a price in the collection view. As some products don't have prices. We have a enquery button on the product view

https://millenniummachinery.ie/collections/bandsaws

 

TerenceKEANE
Shopify Partner
511 86 78

Hi again,

 

I've reviewed the related page, and it seems there are some issues or logical inconsistencies.

 

  1. Why do some sold-out products show prices while others don't?
  2. 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>

 

shopify.head.jpg

 

TerenceKEANE_0-1717759640825.png

 

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites