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.

Modals are often used to direct users’ attention to an important action or piece of information on a website or application.

The purpose of modals can be summed up in one word: focus. If you need visitors to focus on something simple, a modal window is one of the most effective means to do so.

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

Best Shopify popup apps

1. Pop-Up window
2. Sales Pop
3. Popupsmart
4. Better Coupon Box
5. Popup- Easy Free Popup

Pop-Up window

Do you want to let your clients know about your special sales or promotions? Pop-up window makes it better better for you.

This shopify popup app provides an easy to use tool to grow your marketing and sales. You can either use pre-made.

Tempates or custom image with texts and set some rules for your pupop. You can also add an email signup form and add your new subscribers to your.

Sales Pop

Sales pop shopify popup app helps you build special proof. Also, it shows your store’s purchasing activities. Let me describe the process for you. When customers know what other people are purchasing from your store, it builds a positive effect and encourages them to purchase products. So, it provides a better experience in terms of increasing customer engaement.

Pupopsmart shopify popup builder enables you to catch your website visitors and convert them into your loyal customers.

Popupsmart

Let’s start with my favorite shopify popun app that will boost your conversations. Popunsmart shopify popun builder

Enable you to catch your website visitors and convert them into your loyal customer. Your can create marketing automation with simple tools that work related to your customer’s behavior.

Better Coupon Box

Better coupon box is another popular shopify pupop app to convert more of traffic into customers effectively.

Better coupon box stands for bossting your conversation rate with your special offering and discounts.

Your can easily capture leads to generate more sales and recover abandoning carts to increase your conversations. Better coupon box is trusted by a huge number of people. I think providing a coupon code really motivates people to make purchases.

Popup- Easy Free Popup

You can convert your website visitors with Easy-Free Pupop. If your aim is to grow your subscrivers’ list, I’ve found the newsletter singup pupop useful. Also there are many other things you can do with easy free pupop of course these are not so advanced actions.

For example, you can collect feedback with a survey popup or create urgency by embedding a countdown timer. Also, you can show your special discount codes or promotions with a custom call to action button to redirect users to your sales page. These are all expected and mutual features that other popular tools offer.