Popup is an awesome feature of any online store for an eCommerce business. It helps you to increase the conversion rate. With Popup, you can reduce abandoned carts and promote all significant events of the store to customers.
In this tutorial, You can learn. How to add Modal Popup to Shopify without App. You no need to hire any Shopify Developer. Watch my video tutorial for easy understanding.
Types of Popup
- Newsletter Popup
- Video Popup
- Coupon Popup
- Countdown Popup
- Product Popup
Newsletter Popup
- This template will convert your visitors into subscribers & customers.
- You can add MailChimp, Aweber, GetResponse, Constant Contact, Benchmark Email Newsletter
Video Popup
- This will play a video.
- Support Youtube, MP4
Coupon Popup
- If you want to offer customers a discount or special gifts with the coupon, please use this popup.
- Add Countdown.
Checkout popup
- Encourage customers to checkout by limited offers
Discount Popup
- Discount order by coupon
Product Popup
- Show a product with a special price and Buy now button
<!-- The Modal -->
<div class="popup-wrap">
<div class="popup">
<div class="popup-timer"><span class="seconds"></span> second(s) left</div>
<div class="btn-close">x</div>
<img src="https://d1wnwqwep8qkqc.cloudfront.net/uploads/stage/stage_image/47653/optimized_large_thumb_stage.jpg"/>
</div>
</div> .popup-wrap{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
/*transition: all 1.7s ease;*/
}
.popup{
position: relative;
width: 450px;
height: 450px;
background-color: rgba(0,0,0,1);
margin: 100px auto;
}
.popup img{width:100%;height:100%;}
.popup-timer{
width: auto;
height: 25px;
color: #fff;
position: absolute;
right: 10px;
line-height: 25px;
padding: 0px 10px;
}
.btn-close{
background-color: #fff;
width: 25px;
height: 25px;
text-align: center;
line-height: 22px;
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
transition: all 0.5s ease;
border-radius: 50%;
}
.btn-close:hover{
transform: rotate(360deg);
}$(document).ready(function(){
$(window).load(function(){
$duration = 15;
$('.seconds').text($duration);
$('.popup-wrap').fadeIn(1500);
$myTimer = setInterval(function(){ startTimer() }, 1000);
$('.popup .btn-close').on("click",function(){
clearInterval($myTimer);
$('.popup-wrap').fadeOut(500);
});
function startTimer(){
$duration--;
$('.seconds').text($duration);
if($duration==0){
clearInterval($myTimer);
$('.popup-wrap').fadeOut(500);
}
}
});
});