How can I create a popup contact form on product pages?

Shopify Discussion

Topic summary

Goal: Add a pop-up contact form on product pages using the theme’s default form (Debut), avoiding apps.

Proposed solution: Create a modal snippet (e.g., “my-popup”) with CSS/HTML/JS and embed Shopify’s contact form inside it using {% form ‘contact’ %}. Insert the snippet on product pages via the product-template.liquid file. Basic JS handles open/close; CSS styles the modal.

Alternative: A video tutorial was shared to add a contact form that includes product context (title and SKU—Stock Keeping Unit) without apps or coding.

Recent updates/issues:

  • One user reported the modal close (X) not working and requested help; no specific fix provided in-thread.
  • Another user confirmed it works after changing {% include ‘my-popup’ %} to {% render ‘my-popup’ %} (preferred in newer themes).

Scope/targeting: A user asked to show the pop-up only on selected products (Prestige theme). The shared approach applies to all products; no confirmed method for limiting to some products, and Prestige compatibility wasn’t verified.

Status: Partially resolved. The core pop-up approach works for some; selective application and the close-button issue remain open.

Summarized with AI on February 2. AI used: gpt-5.
1

Hi,

I am trying to add a link to all my product pages which, when it’s clicked on, a popup window appears with a contact form. This is for customers that need help are able to enquire about a product.

I would like to use the default contact form on my theme (Debut theme) instead of an app but I don’t really know how to create this popup window with the form, can anyone help?

Thanks in advance for your help :slightly_smiling_face:

Francecsa

2

Hi @FBalit , I’d love to elaborate on what you’re actively looking to know about how to create this popup window with the form. I hope you should be able to resolve your issue by adding the given code below:

1: Go to Online Store > Actions > Edit Code > Snippets

2:Click on Add New Snippet

3: Insert a name for snippet but for this case using “my-popup”

4: Click on “ Create Snippet ” 5: Paste this code in the new file ‘my-popup’

/* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

Modal Example

Open contact us Modal

×

{% form ‘contact’ %}

{% if form.posted_successfully? %}

{{ ‘contact.form.post_success’ | t }}

{% endif %}

{{ form.errors | default_errors }}

{{ ‘contact.form.name’ | t }}

{{ ‘contact.form.email’ | t }}

{{ ‘contact.form.phone’ | t }}

{{ ‘contact.form.message’ | t }}

{% if form.body %}{{ form.body }}{% endif %}

{% endform %}

6: Click on Save Button

7: ( Optional for your case, You can skip to the next point ) Now your pop-up is ready and you can use this where you want by writing this line of code

{% include ‘my-popup’ %}

8: For your case open “product-template.liquid” code file and paste this code where you want

{% include ‘my-popup’ %}

Now it will be visible for every product page. Hopefully, that solves your problem. If not, please let me know if you’re seeing any other issues.

2 Likes
3

Hi,

I assume you want a contact form with the SKU and the title of the product to be included to be able to respond to the question correctly right? Check this video tutorial with instructions. No app needed and it is free. No coding experience needed either

4

Can you use this for some products only?

I’m using Prestige theme and want an enquiry pop up for only some products.

Can you help?

5

It applies to all products in your store. I have not tried prestige theme though

6

Thanks - but can it apply to only a few products? and if so, how do you do this?

7

Thanks for your code. In that close button (modal close functionality) is not working for me. Can you pls help me on that?

8

Thank you. It works. I only change include on render