Hey there, I added a custom button for product page. It's a popup modal for sizing guide because I had bad experiences with apps.
Now, if I press on the sizing guide button I created, it triggers the add to cart and automatically forwards me to the cart page.
Here is the button's code:
<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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 70%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
height: 70%;
overflow: scroll;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
text-align: center;
padding: 2px 16px;
background-color: #000;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.btnsizguide {
align-items: center;
background-color: #fff;
border-radius: 12px;
box-sizing: border-box;
color: #121212;
cursor: pointer;
display: block;
flex: 1 1 auto;
font-family: Inter,sans-serif;
font-size: 1.0rem;
font-weight: 700;
justify-content: center;
line-height: 1;
margin: 0 auto;
outline: none;
padding: 1rem 1.2rem;
text-align: center;
text-decoration: none;
transition: box-shadow .2s,-webkit-box-shadow .2s;
white-space: nowrap;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
box-shadow: transparent 0 0 0 2px,rgba(0, 0, 0, .1) 0 6px 20px;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="btnsizguide">Sizing Guide</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">× </span>
<h2>Sizing Guide</h2>
</div>
<div class="modal-body">
<p style="text-align: center;"><strong>Taking that not all designs have a 1:1 ratio we are using "length" as a reference.</strong></p>
<p style="text-align: center;"><strong><br></strong></p>
<p style="text-align: center;">For example, we have a vertical image and an horizontal image</p>
<p style="text-align: center;"><strong><br></strong></p>
<p style="text-align: center;"><strong>When you're placing your order, imagine your product's size by the "longest" element of your design.</strong></p>
<p style="text-align: center;"><strong>"Small" = </strong>40cm length</p>
<p style="text-align: center;"><strong>"Medium"</strong> = 80cm length</p>
<p style="text-align: center;"><strong>"Large"</strong> = 120cm length</p>
<p style="text-align: center;"><strong>"ExtraLarge"</strong> = 160cm length</p>
<p style="text-align: center;"><strong>"Custom Size"</strong> <br>Please leave us a note when you are finishing your order.</p>
<p style="text-align: center;"><br></p>
</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>
Shopify Discussion
Partners and Developers
