How to add Modal Popup to Shopify without App - eCommerce Thesis

How to add Modal Popup to Shopify without App

Popup is an awesome feature of any online store for ecommerce business. It;s 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 unnderstanding.

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);
				}
			}
		});
	});

Leave a Reply

Click to Chat