How to add a popup in Shopify

My client asked me to add a popup in product page to display sizechart. He was using Dawn theme.

In this tutorial we will learn how to add a popup box in shopify website using html and css.

Step 1

 Go to Online Store > Theme actions -> Edit code > Assets > Place the below code in base.css.

.text-link{

display:flex;

flex-wrap:wrap;

}
.text-link a{
color: #9e2740;
font-size: 30px;
font-family: FuturaPT-Book;
}
.shopi-popup-container {
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(1.3);
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(21, 17, 17, 0.61);
display: flex;
align-items: center;
}
.shopi-popup-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 100%;
}
.shopi-popup-content img{
width: 100%;
height:100%
}
.shopi-popup-content a.close{
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
background: none;
padding: 0;
margin: 0;
text-decoration:none;
}
.shopi-popup-content a.close:hover{
color:#333;
}
.shopi-popup-container:target{
visibility: visible;
opacity: 1;
transform: scale(1);
}

STEP 2

Add the code in header.liquid.

<div id="mypopup" class="shopi-popup-container">
  <div class="shopi-popup-content">
  <a href="#" class="close">&times;</a>
  <img src="imageurl">
  </div>
</div>
 
  
  
STEP 3

Login to admin area > Custamize > Dawn theme > Default product > add a custom liquid block and place the html.

<div class="popup-link">
  <a href="#mypopup">click here</a>
</div>