Buy Now Button

[tracy_xoxo]

I have a question regarding customization on our theme. Is it possible to replace the "Buy It Now" button on certain products which are products with 
"POA-Price on Application" with a "Make an Enquiry" button? The idea would be for customers to click the "Make an Enquiry" button, which would trigger a pop-up form where they can submit their information. We would then reach out to them after receiving the form.

I've attached a file for reference on how we envision this working.

Could you let me know if this is something that can be set up on our theme, and if so, what steps I would need to take to implement it?

[rajweb]

Hey @tracy_xoxo ,

1. Replace Button in main-product.liquid or product.liquid

{% if product.tags contains 'poa' %}
  <button class="enquiry-button" onclick="openEnquiryForm()">Make an Enquiry</button>
{% else %}
  {{ form | form 'product' }}
    <!-- Your regular Add to Cart / Buy Now buttons -->
  {{ endform }}
{% endif %}

 2. Enquiry Modal HTML (add near footer or in theme.liquid)

<div id="enquiryFormModal" class="enquiry-modal" style="display:none;">
  <div class="enquiry-modal-content">
    <span class="enquiry-close" onclick="closeEnquiryForm()">&times;</span>
    <h2>Make an Enquiry</h2>
    <form method="POST" action="/contact#contact_form">
      <input type="hidden" name="form_type" value="contact">
      <input type="hidden" name="contact[tags]" value="product-enquiry">
      <input type="text" name="contact[name]" placeholder="Your Name" required>
      <input type="email" name="contact[email]" placeholder="Your Email" required>
      <textarea name="contact[body]" placeholder="Your Message" required></textarea>
      <button type="submit">Send</button>
    </form>
  </div>
</div>

3. Modal CSS (add in base.css or theme.css) css Copy Edit

.enquiry-modal {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
}

.enquiry-modal-content {
  background: #fff;
  max-width: 500px;
  margin: 10% auto;
  padding: 2rem;
  position: relative;
  border-radius: 8px;
}

.enquiry-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

4. Modal JavaScript (add before </body> in theme.liquid)

<script>
  function openEnquiryForm() {
    document.getElementById("enquiryFormModal").style.display = "block";
  }

  function closeEnquiryForm() {
    document.getElementById("enquiryFormModal").style.display = "none";
  }

  window.onclick = function(event) {
    var modal = document.getElementById("enquiryFormModal");
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

If you want to implement this by me, please feel free to connect me. Thanks!

Best Regards,

Rajat

Shopify Expert

[Bundler-Manuel]

Hi there Tracy @tracy_xoxo  I highly recommend that you watch this short YouTube tutorial which is less than 5 minutes long here https://m.youtube.com/watch?v=tGnRKNDMnJw 

Let me know how much this helps you if possible.