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

Shopify Discussion
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