Buy Now Button

Store Design
, , ,

Topic summary

A user seeks to replace the “Buy It Now” button with a “Make an Enquiry” button for products tagged as “POA-Price on Application.” The desired functionality includes triggering a pop-up form where customers can submit their contact information.

Proposed Solution:
One responder provided a complete technical implementation involving:

  • Conditional logic in the product template using Liquid to check for a ‘poa’ tag
  • HTML markup for a modal enquiry form
  • CSS styling for the modal overlay and content box
  • JavaScript to handle modal open/close functionality

The solution includes code snippets for modifying main-product.liquid, adding modal HTML to theme.liquid, styling in CSS files, and JavaScript event handlers.

Alternative Resource:
Another participant recommended a YouTube tutorial (under 5 minutes) as a potential guide for implementation.

The discussion remains open, awaiting feedback on whether the proposed solutions meet the requirements. Screenshots were provided showing the envisioned user flow.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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?

Screenshot 2025-04-18 at 10.20.13.png
Screenshot 2025-04-18 at 10.20.13.png3336×1502 206 KB

Screenshot 2025-04-18 at 10.20.25.png
Screenshot 2025-04-18 at 10.20.25.png3330×1696 215 KB

Screenshot 2025-04-18 at 10.20.35.png
Screenshot 2025-04-18 at 10.20.35.png3328×1684 240 KB

2

Hey @tracy_xoxo ,

  1. Replace Button in main-product.liquid or product.liquid
{% if product.tags contains 'poa' %}
  
{% else %}
  {{ form | form 'product' }}
    
  {{ endform }}
{% endif %}
  1. Enquiry Modal HTML (add near footer or in theme.liquid)

  

    ×
    ## Make an Enquiry
  1. 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;
}
  1. Modal JavaScript (add before in theme.liquid)

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

Best Regards,

Rajat

Shopify Expert

3

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.