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.
Shanif Dhanani, CEO and data scientist at Apteo- Was I able to help? Click Like to let me know!
- If I was able to answer your question, click Accept as Solution
- Want to increase your customer lifetime value with A.I.? Check out
Apteo
