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

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