All things Shopify and commerce
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 🙂
Francecsa
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’
<style>
/* 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;
}
</style>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open contact us Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="contact-form form-vertical">
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="note form-success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}
{{ form.errors | default_errors }}
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="ContactFormName">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="ContactFormEmail" class="{% if form.errors contains 'email' %}label--error{% endif %}">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" class="{% if form.errors contains 'email' %}input--error{% endif %}">
</div>
</div>
<label for="ContactFormPhone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[phone]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<label for="ContactFormMessage">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
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.
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?
It applies to all products in your store. I have not tried prestige theme though
Thanks - but can it apply to only a few products? and if so, how do you do this?
Thanks for your code. In that close button (modal close functionality) is not working for me. Can you pls help me on that?
Thank you. It works. I only change include on render
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
Hello Francecsa,
I understand that adjusting the theme code might seem challenging.
Instead of struggling with editing theme code & creating popups by coding, I recommend checking out Popupsmart, a user-friendly popup builder that could simplify the process for you.
Here are some of its top features:
Popupsmart can provide a straightforward process that will enhance the user experience on your product pages. If you have any more questions or need further guidance, feel free to ask! 🤗
User | RANK |
---|---|
44 | |
40 | |
24 | |
24 | |
21 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023