How can I hide pricing and add a request a quote button on certain products?

Store Design
1

Hi guys!

I am trying to hide pricing on certain products attached to a tag, I would like these certain products to be set up with a “request a quote” button that brings up a pop-up window within the same webpage. I have enclosed some sample images for reference. What coding do I need to achieve this & where would I place it?

catalog page
catalog page1920×1080 354 KB

product page
product page1920×1080 335 KB

pop-up
pop-up1920×1080 231 KB

2

Hi @Alisonbgdiamond

Thanks for the clear explanation, this is certainly doable but would require more involved coding that just a few lines of code that can be pasted here as we need to see your theme and assess how long it would take to get it done.

The process would be as follows:

  1. You would tag a product with “Request Quote”
  2. The logic would check every product’s tags across the Add to Cart displays
  3. When the tag is detected, a new button is displayed for the quote request instead of the Add to Cart
  4. The quote button would then be linked to a Modal where the product’s title auto-fills the start of the message with the product’s title to ensure clarity

Should you want, please share your store’s URL so we can have an initial look and we can then discuss further steps at your convenience.

3

https://biggardiamonds.myshopify.com/collections/gold-chains

Hi there,

Here is our website URL!

Password to enter website is: fuklon

4

Hi @Alisonbgdiamond

We’ve had a look, all clear on our end. Should the execution also include the product’s image and title in the popup?

Also, can you let us know if the process we shared in the previous post makes sense? Thanks!

5

Hi there,

yes - this makes sense!

we would also like the execution to include the product image and title.

6

You can achieve this easily with a Shopify Request a Quote app. It lets you hide prices by product tag, replace the Add to Cart button with a “Request a Quote” button, and display a pop-up form all without custom coding. Quotes can then be managed directly from your Shopify admin.

7

Hi @Alisonbgdiamond

Add This Code to Hide the Price + Add-to-Cart (product template)

Inside main-product.liquid or product.liquid (depends on theme):

Find your price + add-to-cart area and wrap it like this:

{% unless product.tags contains 'quote' %}
  <!-- Show normal price -->
  <div class="product-price">
    {{ product.price | money }}
  </div>

  <!-- Show Add-to-cart button -->
  <button type="submit" class="product-form__submit button">Add to cart</button>
{% endunless %}

Then add your quote button:

{% if product.tags contains 'quote' %}
  <button class="quote-button" id="openQuotePopup">Request a Quote</button>
{% endif %}

2. Add the Pop-up HTML (same product template)

Place this somewhere at the bottom of the same file:

<div id="quotePopup" class="quote-popup">
  <div class="quote-popup-content">
    <span id="closeQuotePopup" class="quote-close">&times;</span>
    <h2>Request a Quote</h2>

    <form id="quoteForm">
      <label>Your Name</label>
      <input type="text" required>

      <label>Email</label>
      <input type="email" required>

      <label>Message</label>
      <textarea required></textarea>

      <button type="submit" class="quote-submit">Send Request</button>
    </form>
  </div>
</div>

3. Add CSS (theme.css or base.css)

.quote-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.quote-popup-content {
  background: #fff;
  padding: 30px;
  width: 400px;
  border-radius: 8px;
  position: relative;
}

.quote-close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 22px;
}

4. Add JavaScript (theme.js or a script tag)

document.addEventListener("DOMContentLoaded", function () {
  const openBtn = document.getElementById("openQuotePopup");
  const closeBtn = document.getElementById("closeQuotePopup");
  const popup = document.getElementById("quotePopup");

  if (openBtn) {
    openBtn.addEventListener("click", function () {
      popup.style.display = "flex";
    });
  }

  if (closeBtn) {
    closeBtn.addEventListener("click", function () {
      popup.style.display = "none";
    });
  }
});

Best regards,
Devcoder :laptop:

8

This is doable with custom code, but it gets hard to maintain once you start scaling or changing themes.

A simpler approach many merchants take is to control this by product tags or collections: hide the price, replace Add to Cart with a Request a Quote button, and show a popup form that already includes the product name, image, and selected options. That way you manage everything from the admin instead of editing Liquid, JS, and CSS together.

I’ve seen this work smoothly using this one. It lets you hide prices only on tagged products, swap the button, and collect quote requests in a popup without breaking the product page layout