Designing your Conditional Pop-up

Designing your pop-up content is possible in two ways:

1. Using your page builder – Design your pop-up content on a new page using your page builder. Then, paste the shortcode below into your If-So version (make sure to replace the post ID with the ID of the page you created)

The shortcode will display the page/post content:

[ifso-show-post id="123"]

Learn more about the post ID shortcode

2. Use one of our pre-built templates – Simply, copy the code of one of the templates below and paste it into your If-So version (in text mode). The code includes both CSS and HTML, you can change tweak them according to your needs.

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-blackfriday .closebutton,
.modal-active #modalOverlay .modalContent.ifso-blackfriday .closebutton{
position: absolute;
background: transparent;
width: 14px;
fill: #000;
}
ifso-blackfriday-bottom,
.ifso-blackfriday {
position: relative;
}

.modal-active#modalOverlay .modalContent{
 background: transparent;
overflow: visible;
}

.modal-active #modalOverlay .modalContent.ifso-blackfriday-bottom {
 top: auto;
 bottom: 0;
 left: auto;
 right: 0;
 background: transparent;
 min-width: auto;
}
.modal-active #modalOverlay .modalContent.ifso-blackfriday {
 background: transparent;
 min-width: auto;
}
.ifso-blackfriday-wrap{
   background: #000000;
   height: 290px;
   width: 290px;
   border-radius: 50%;
   margin: auto;

}

.ifso-blackfriday-wrap h2{
font-size: 68px;
text-align: center;
color: #d60000;
font-weight: bold;
line-height: 1;
margin: 10px 0 0;
}
.ifso-sub-titel {
    font-size: 32px;
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    padding-top: 30px;
}

.ifso-sub-titel span {

font-weight: 900;
    color: #fff;
}

.ifso-sub-titel strong{
display: block;
}

.ifso-dis {
   font-size: 20px;
   text-align: center;
   color: #fff;
margin-top: 0;
}

.ifso-blackfriday-wrap a{
 font-size: 24px;
 text-align: center;
 display: block;
padding:8px;
 text-decoration: none;
 background-color: #06afdf;
 color: #fff;
 max-width: 235px;
 margin: 0 auto;
 border-radius: 10px;
 margin-top: 10px;
 font-weight: bold;
}

@media (min-width:768px){
.ifso-blackfriday-wrap {
   
}
}
@media (max-width:767px){
.ifso-blackfriday-wrap{
height: 190px;
width: 190px;
}
.ifso-sub-titel {
font-size: 18px;
max-width: 100px
}
.ifso-blackfriday-wrap h2{
font-size: 36px;
}
.ifso-dis {
 font-size: 17px;
}
.ifso-blackfriday-wrap a{
 font-size: 17px;
 max-width: 157px
}
   
 }
.ifso-bastitle-content{
  
}
@media (max-width:576px){
.ifso-blackfriday-wrap{
height: 190px;
width: 190px;
}
.ifso-sub-titel {
font-size: 18px;
max-width: 100px
}
.ifso-blackfriday-wrap h2{
font-size: 36px;
}
.ifso-dis {
 font-size: 17px;
}
.ifso-blackfriday-wrap a{
 font-size: 17px;
 max-width: 157px
}
}
</style>
<div class="ifso-blackfriday-wrap">
<p class="ifso-sub-titel">black <span>friday</span></p>
<h2>SALE!</h2>
<p class="ifso-dis">Up to 70% off!</p>
<a href="#">Get the deals &gt;&gt; <img src="http://localhost/client/plugins/wp-content/uploads/2021/08/Black-friday.jpg" alt="" /></a></div>
close code
Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-hallowen .closebutton{
position: absolute;
}
.ifso-hallowen{
position: relative;
}
@media (min-width: 576px){

.modal-active #modalOverlay .modalContent.ifso-hallowen{
min-width: 400px;
}

}
.modal-active #modalOverlay .modalContent.ifso-hallowen .closebutton {
    position: absolute;
        top: 16px;
    right: 16px;
    background: transparent;
    fill: #fff;
    width: 13px;
}
.modal-active #modalOverlay .modalContent.ifso-hallowen{
border-radius: 20px;
}
.ifso-hallowen-wrap {
   background: #624674;
   min-height: 580px;
}
.ifso-hallowen-top {
 display: block;
 margin-left: auto;
 margin-right: auto;
 padding-top: 60px;
}
.ifso-hallowen-middel {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
}
.ifso-hallowen-content h3{
  font-size: 51px;
  text-align: center;
   margin: 8px auto 0;
  font-weight: bold;
  color: #eb9123;
line-height:1.2;
}
.ifso-hallowen-content h3 em{
   font-size: 42px;
  text-align: center;
  margin: 0 auto;
  color: #eb9123;
font-style: normal;
display:block;
}
.ifso-hallowen-content p{
  font-size: 20px;
  text-align: center;
  color: #eb9123;
margin-top: 8px;
}
.ifso-hallowen-content a{
  padding: 6px 6px;
  display: block;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  color: #eb9123;
  text-align: center;
  max-width: 230px;
  margin: 0 auto; 
  background: #1f1a38;
  margin-top: 12px;
}



</style>
<div class="ifso-hallowen-wrap"><img class="ifso-hallowen-top" src="https://www.if-so.com/wp-content/uploads/2022/02/Halloween_pumpkin.png" alt="" />
<div class="ifso-hallowen-content">
<h3>HAPPY<em>HALLOWEN</em></h3>
<img class="ifso-hallowen-middel" src="https://promo.if-so.com/wp-content/uploads/2021/09/giftt.png" alt="" />
<p>Up to 50% off sale!</p>
<a href="#">SHOP NOW</a></div>
</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-countryflag .closebutton{
position: absolute;
 top: 10px;
    right: 10px;
    background: transparent;
width: 13px;
fill: #016f4a;
}
.ifso-countryflag {
position: relative;
}
@media (min-width:576px){
.modal-active #modalOverlay .modalContent.ifso-countryflag{
 min-width: 340px;
}
}
.modal-active #modalOverlay .modalContent.ifso-countryflag .closebutton {
    position: absolute;
    top: 2%;
    right: 3%;
}
.ifso-countryflag-wrap{
 background: #fff;
min-height: 400px;
}
.ifso-countryflag-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
border: 3px solid #016f4a;

}


.ifso-countryflag-wrap h3{
   font-size: 35px;
   text-align: center;
   max-width: 180px;
   margin: 0 auto;
   margin-top: 24px;
   color: #016f4a;
line-height: 1.2;
}

.sub-button {
   text-align: center;
  display: block;
  text-decoration: none;
  background-color: #c51230;
  max-width: 300px;
  margin: 0 auto;
  color: #fff;
  border-radius: 10px;
  margin-top: 40px;
  padding: 8px 8px;
  font-size: 16px;
  text-transform: uppercase;
}

.ifso-countryflag-button {
    text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid #016f4a;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 25px;
    margin-top: 20px;
   padding: 5px 0 8px;
   color: #016f4a;
   border-radius: 10px;
   font-size: 16px;
}

.ifso-countryflag-button:hover{
   background-color: #c51230;
color: #fff;
}

</style>
<div class="ifso-countryflag-wrap"><img class="ifso-countryflag-img" src="https://www.if-so.com/wp-content/uploads/2022/02/ItalyFlag.jpg" />
<h3>Are you in Italy?</h3>
<a href="#" class="sub-button">Visit our Italian website!</a> <a href="#" class="ifso-countryflag-button">MAYBE NEXT TIME</a></div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-likestory .closebutton{
position: absolute;
}
.ifso-likestory{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-likestory {
  background: transparent;
 
}
.modal-active #modalOverlay .modalContent.ifso-likestory .closebutton {
  top: 40px;
  right: 10px;
  border-radius: 24px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.71);
}
.modal-active #modalOverlay .modalContent.ifso-likestory .closebutton:hover{
 fill: #fff;
}
@media (min-width: 1920px){
   .modal-active #modalOverlay .modalContent.ifso-likestory .closebutton {
  top: 20%;
  right: 20%;
}
}

.ifso-likestory-content {
 background: rgba(0, 0, 0, 0.71);
 min-height: 250px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate( -50%,-50%);
 min-width: 450px;
padding: 34px 20px 40px;
}
.ifso-likestory-content h3{
  font-size: 40px;
  color: #fff;
  text-align: center;
  font-weight: bold;
margin: 0;
}
.ifso-likestory-content p{
font-size: 20px;
text-align: center;
color: #fff;
margin-top: 8px;
margin-bottom: 27px;
}
.ifso-likestory-content a{
    background: #1b77f2;
    padding: 10px 31px;
    display: block;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    max-width: 280px;
    margin: 0 auto;
}

.ifso-likestory-bg>img{
    margin-bottom: -21px;
}


</style>
<div class="ifso-likestory-bg"><img src="https://www.if-so.com/wp-content/uploads/2022/02/LikeThisStory-BG-1.png" alt="" /></div>
<div class="ifso-likestory-wrap"><img class="ifso-likestory-img" alt="" />
<div class="ifso-likestory-content">
<h3>Like this story?</h3>
<p>Share it with your Facebook friends!</p>
<a href="#" class="likestory-button">SHARE IT ON FACEBOOK</a></div>
</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-twobuttons .closebutton{
position: absolute;
}
.modal-active #modalOverlay .modalContent.ifso-twobuttons .closebutton {
    background: #016f4a;
    top: 16px;
    right: 16px;
    background: transparent;
fill: #016f4a;
}
.ifso-twobuttons {
position: relative;
}
.ifso-twobuttons-wrap{
 background: #fff;
 padding: 17px 47px 14px 46px;
}


.ifso-twobuttons-wrap h3{
   font-size: 35px;
   text-align: center;
   margin: 24px 0 0;
   color: #016f4a;
}

.sub-button {
    text-align: center;
    display: inline-block;
    text-decoration: none;
    background-color: #c51230;
    color: #fff;
    border-radius: 10px;
    margin-top: 30px;
    padding: 8px 31px;
    font-size: 16px;
    text-transform: uppercase;
}


.ifso-twobuttons-button {
text-align: center;
text-decoration: none;
display: inline-block;
border: 1px solid #016f4a;
margin-bottom: 20px;
padding: 8px 55px;
color: #016f4a;
border-radius: 10px;
font-size: 16px;
margin-left: 20px;
}
@media (max-width:1199px){
.sub-button {
   text-align: center;
  display: block;
  text-decoration: none;
  background-color: #c51230;
  max-width: 300px;
  margin: 0 auto;
  color: #fff;
  border-radius: 10px;
  margin-top: 40px;
  padding: 5px 0 8px;
  font-size: 16px;
  text-transform: uppercase;
}


.ifso-twobuttons-button {
   text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid #016f4a;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 25px;
    margin-top: 20px;
   padding: 5px 0 8px;
   color: #016f4a;
   border-radius: 10px;
   font-size: 16px;
}
}

</style>
<div class="ifso-twobuttons-wrap">
<h3>Are you in Italy?</h3>
<a href="#" class="sub-button">Visit our Italian website!</a> <a href="#" class="ifso-twobuttons-button">MAYBE NEXT TIME</a></div>

*

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-welprodect-left .closebutton{
position: absolute;
    width: 13px;
    fill: black;
background: transparent;
}
.ifso-welprodect-left{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect-left .closebutton {
    position: absolute;
    top: 13px;
    right: 12px;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect-left {
 border-radius: 20px;
}
.ifso-welprodect-wrap{
position: relative;
 background: #fff;
 padding: 15px 0 20px 0;
 overflow: hidden;
}


.ifso-welproduct-content:after{
 content: '';
        width: 700px;
    height: 400px;
    position: absolute;
    background-color: #cef2f5;
    top: 75px;
    left: -163%;
    border-radius: 50%;
    z-index: 1;
    transform: rotate(90deg);
}
.two-product .ifso-welproduct-content:after{
    top: 92px;
    left: -200%;
    height: 430px;
    width: 850px;
}

.three-product .ifso-welproduct-content:after{
    top: 92px;
    left: -200%;
    height: 430px;
    width: 850px;
}
.ifso-welproduct-content > * {
 position: relative;
z-index: 3;
}
.ifso-welprodect-wrap .subtitle{
font-size: 15px;
text-align: center;
font-weight: bold;
color: #f58123;
margin-bottom: 10px;
font-weight: bold;
position: relative;
z-index: 4;
}
.ifso-welprodect-wrap h3{
 font-size: 23px;
text-align: center;
max-width: 200px;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;
position: relative;
z-index: 4;
}
.ifso-welprodect-wrap h4{
     font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
.ifso-welprodect-wrap a{
background: #f58123;
padding: 7px 0px;
display: block;
text-decoration: none;
font-size: 13px;
border-radius: 10px;
color: #e24437;
text-align: center;
margin: 5px auto 0;
    width: 90px;
    color: #fff;
}
.ifso-welproduct-content img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #0000005c;
margin-top: 15px;
border-radius: 10px;
    width: 130px;
    height: 114px;
    object-fit: cover;
}
.ifso-welproduct-content span{
   text-align: center;
   display: block;
}
.ifso-welproduct-content span inc{
text-decoration: none;
}
.ifso-welproduct-content del{
 opacity: .7;
font-size: 85%;
top: -3px;
 position: relative;
}
.ifso-welproduct-content ins{
font-weight: bold;
  margin-left: 6px;
}

@media (min-width:576px){
 .modal-active #modalOverlay .modalContent.ifso-welprodect-left{
 min-width: 268px;
max-width:268px;
    left: 0;
    transform: translateY(-50%);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
}

.ifso-row {
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
  margin: 25px -5px;
padding-left: 15px;
    padding-right: 15px;
    align-items: center;
    justify-content: space-between;
}
.ifso-row > div{
 padding-left: 5px;
padding-right:5px;
}
.two-product .ifso-row > div{
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}

</style>

<div class="ifso-welprodect-wrap two-product">
<p class="subtitle">WELCOME BACK!</p>
<h3>These products just for you!</h3>

<div class="ifso-welproduct-content">

<div class="ifso-row">
  <div class="ifso-img">
<img src="https://promo.if-so.com/wp-content/uploads/2021/09/product-img-2.jpg" alt="" />
</div>
  <div class="ifso-title">
    <h4>Product</h4>
    <span><del>$110</del><ins>$50</ins></span>
    <a href="#">Add to cart</a>
  </div>
</div>

<div class="ifso-row">
  <div class="ifso-img">
<img src="https://promo.if-so.com/wp-content/uploads/2021/09/product-img-3.jpg" alt="" />
</div>
  <div class="ifso-title">
    <h4>Product</h4>
    <span><del>$110</del><ins>$50</ins></span>
    <a href="#">Add to cart</a>
  </div>
</div>

<div class="ifso-row">
  <div class="ifso-img">
<img src="https://promo.if-so.com/wp-content/uploads/2021/09/product-img.jpg" alt="" />
</div>
  <div class="ifso-title">
    <h4>Product</h4>
    <span><del>$110</del><ins>$50</ins></span>
    <a href="#">Add to cart</a>
  </div>
</div>


</div>






</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-welprodect-left .closebutton{
position: absolute;
    width: 13px;
    fill: black;
background: transparent;
}
.ifso-welprodect-left{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect-left .closebutton {
    position: absolute;
    top: 13px;
    right: 12px;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect-left {
 border-radius: 20px;
}
.ifso-welprodect-wrap{
position: relative;
 background: #fff;
 padding: 30px 20px 40px;
 overflow: hidden;
}


.ifso-welproduct-content:after{
 content: '';
        width: 700px;
    height: 400px;
    position: absolute;
    background-color: #cef2f5;
    top: 75px;
    left: -163%;
    border-radius: 50%;
    z-index: 1;
    transform: rotate(90deg);
}
.two-product .ifso-welproduct-content:after{
    top: 92px;
    left: -200%;
    height: 430px;
    width: 850px;
}
.ifso-welproduct-content > * {
 position: relative;
z-index: 3;
}
.ifso-welprodect-wrap .subtitle{
font-size: 15px;
text-align: center;
font-weight: bold;
color: #f58123;
margin-bottom: 10px;
font-weight: bold;
position: relative;
z-index: 4;
}
.ifso-welprodect-wrap h3{
 font-size: 23px;
text-align: center;
max-width: 200px;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;
position: relative;
z-index: 4;
}
.ifso-welprodect-wrap h4{
     font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
.ifso-welprodect-wrap a{
background: #f58123;
padding: 7px 0px;
display: block;
text-decoration: none;
font-size: 13px;
border-radius: 10px;
color: #e24437;
text-align: center;
margin: 0 auto;
max-width: 94px;
color: #fff;
margin-top: 20px;
}
.ifso-welproduct-content img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #0000005c;
margin-top: 25px;
border-radius: 10px;
width: 215px;
    height: 148px;
    object-fit: cover;
}
.ifso-welproduct-content span{
   text-align: center;
   display: block;
}
.ifso-welproduct-content span inc{
text-decoration: none;
}
.ifso-welproduct-content del{
 opacity: .7;
font-size: 85%;
top: -3px;
 position: relative;
}
.ifso-welproduct-content ins{
font-weight: bold;
  margin-left: 6px;
}

@media (min-width:576px){
 .modal-active #modalOverlay .modalContent.ifso-welprodect-left{
 min-width: 268px;
max-width:268px;
    left: 0;
    transform: translateY(-50%);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
}

.ifso-row {
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
  margin: 0 -5px;
padding-left: 22px;
padding-right: 38px;
}
.ifso-row > div{
 padding-left: 5px;
padding-right:5px;
}
.two-product .ifso-row > div{
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}
.three-product .ifso-row > div{
   -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
}

</style>

<div class="ifso-welprodect-wrap two-product">
<p class="subtitle">WELCOME BACK!</p>
<h3>These products just for you!</h3>

<div class="ifso-welproduct-content">
<img src="https://promo.if-so.com/wp-content/uploads/2021/09/product-img-2.jpg" alt="" />
<div class="ifso-row">
  <div class="ifso-title">
    <h4>Product</h4>
    <span><del>$110</del><ins>$50</ins></span>
  </div>
  <div class="ifso-btn"><a href="#">Add to cart</a></div>
</div>
</div>

<div class="ifso-welproduct-content">
<img src="https://promo.if-so.com/wp-content/uploads/2021/09/product-img.jpg" alt="" />
<div class="ifso-row">
  <div class="ifso-title">
    <h4>Product</h4>
    <span><del>$110</del><ins>$50</ins></span>
  </div>
  <div class="ifso-btn"><a href="#">Add to cart</a></div>
</div>
</div>

</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-welprodect-left .closebutton{
position: absolute;
    width: 13px;
    fill: black;
background: transparent;
}
.ifso-welprodect-left{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect-left .closebutton {
    position: absolute;
    top: 13px;
    right: 12px;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect-left {
 border-radius: 20px;
}
.ifso-welprodect-wrap{
position: relative;
 background: #fff;
 padding: 55px 0 39px 0;
 height: 560px;
 overflow: hidden;
}
.ifso-welprodect-wrap.two-product{
height: 504px;
}
.ifso-welprodect-wrap.three-product{
height: 446px;
}
.ifso-row {
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
  margin: 0 -15px;
    padding-left: 30px;
    padding-right: 30px;
}
.ifso-row > div{
 padding-left: 15px;
padding-right:15px;
}
.two-product .ifso-row > div{
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}
.three-product .ifso-row > div{
   -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
}

.ifso-welproduct-content:after{
 content: '';
        width: 700px;
    height: 400px;
    position: absolute;
    background-color: #cef2f5;
    top: 75px;
    left: -163%;
    border-radius: 50%;
    z-index: 1;
    transform: rotate(
90deg
);
}
.ifso-welproduct-content > * {
 position: relative;
z-index: 3;
}
.ifso-welprodect-wrap .subtitle{
font-size: 15px;
text-align: center;
font-weight: bold;
color: #f58123;
margin-bottom: 10px;
font-weight: bold;
position: relative;
z-index: 4;
}
.ifso-welprodect-wrap h3{
 font-size: 23px;
text-align: center;
max-width: 200px;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;
position: relative;
z-index: 4;
}
.ifso-welprodect-wrap h4{
     font-size: 19px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
.ifso-welprodect-wrap a{
background: #f58123;
padding: 7px 0px;
display: block;
text-decoration: none;
font-size: 16px;
border-radius: 10px;
color: #e24437;
text-align: center;
margin: 0 auto;
max-width: 122px;
color: #fff;
margin-top: 20px;
}
.ifso-welproduct-content img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #0000005c;
margin-top: 25px;
border-radius: 10px;
max-width: 215px;
}
.ifso-welproduct-content span{
   text-align: center;
   display: block;
}
.ifso-welproduct-content span inc{
text-decoration: none;
}
.ifso-welproduct-content del{
 opacity: .7;
font-size: 85%;
position: relative;
top: -3px;
}
.ifso-welproduct-content ins{
font-weight: bold;
  margin-left: 6px;
}

@media (min-width:576px){
 .modal-active #modalOverlay .modalContent.ifso-welprodect-left{
 min-width: 268px;
max-width:268px;
    left: 0;
    transform: translateY(-50%);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
}

</style>

<div class="ifso-welprodect-wrap">
<p class="subtitle">WELCOME BACK!</p>
<h3>This product just for you!</h3>

<div class="ifso-welproduct-content">
<img src="https://promo.if-so.com/wp-content/uploads/2021/09/product-img.jpg" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span>
<a href="#">Add to cart</a>
</div>

</div>

Preview
Copy Code
Export Trigger

[ifso id="108" classname="ifso-welprodect" ajax="yes" display="modal"] <style>
.modal-active #modalOverlay .modalContent.ifso-welprodect .closebutton{
position: absolute;
}
.ifso-welprodect{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect .closebutton {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    fill: #716d6d;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect {
 border-radius: 20px;
}
.ifso-welprodect-wrap{
position: relative;
 background: #fff;
 padding: 20px 0 39px 20px;
 height: 560px;
 overflow: hidden;
}
.ifso-welprodect-wrap.two-product{
height: 504px;
}
.ifso-welprodect-wrap.three-product{
height: 446px;
}
.ifso-row {
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
  margin: 0 -15px;
    padding-left: 30px;
    padding-right: 30px;
}
.ifso-row > div{
 padding-left: 15px;
padding-right:15px;
}
.two-product .ifso-row > div{
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}
.three-product .ifso-row > div{
   -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
}

.ifso-welproduct-content:after{
 content: '';
    width: 700px;
    height: 400px;
    position: absolute;
    background-color: #cef2f5;
    bottom: -194px;
    left: -100px;
    border-radius: 50%;
    z-index: 1;
}
.ifso-welproduct-content > * {
 position: relative;
z-index: 3;
}
.ifso-welprodect-wrap .subtitle{
font-size: 19px;
text-align: center;
font-weight: bold;
color: #f58123;
margin-bottom: 10px;
font-weight: bold;
}
.ifso-welprodect-wrap h3{
 font-size: 29px;
text-align: center;
max-width: 350px;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;
}
.ifso-welprodect-wrap h4{
     font-size: 21px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
.ifso-welprodect-wrap a{
background: #f58123;
padding: 7px 0px;
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border-radius: 10px;
color: #e24437;
text-align: center;
margin: 0 auto;
max-width: 122px;
color: #fff;
margin-top: 20px;
}
.ifso-welproduct-content img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #0000005c;
margin-top: 25px;
border-radius: 10px;;
}
.ifso-welproduct-content span{
   text-align: center;
   display: block;
}
.ifso-welproduct-content span inc{
text-decoration: none;
}
.ifso-welproduct-content del{
 opacity: .7;
font-size: 85%;
position: relative;
top: -3px;
}
.ifso-welproduct-content ins{
font-weight: bold;
  margin-left: 6px;
}

@media (min-width:576px){
 .modal-active #modalOverlay .modalContent.ifso-welprodect{
 min-width: 500px;
max-width:500px;
}
}

</style>
<div class="ifso-welprodect-wrap three-product">
<p class="subtitle">WELCOME BACK!</p>
<h3>We have these products just for you!</h3>
<div class="ifso-row">
<div class="ifso-welproduct-content"><img src="https://www.if-so.com/wp-content/uploads/2022/02/WelcomeBack3-product1-2.png" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span> <a href="#">Add to cart</a></div>
<div class="ifso-welproduct-content"><img src="https://www.if-so.com/wp-content/uploads/2022/02/WelcomeBack3-product2-1.png" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span> <a href="#">Add to cart</a></div>
<div class="ifso-welproduct-content"><img src="https://www.if-so.com/wp-content/uploads/2022/02/WelcomeBack3-product3-1.png" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span> <a href="#">Add to cart</a></div>
</div>
</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-welprodect .closebutton{
position: absolute;
}
.ifso-welprodect{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect .closebutton {
    position: absolute;
        top: 16px;
    right: 16px;
    background: transparent;
    fill: #716d6d;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect {
 border-radius: 20px;
}
.ifso-welprodect-wrap{
position: relative;
 background: #fff;
 padding: 20px 39px 20px;
 height: 560px;
 overflow: hidden;
}
.ifso-welprodect-wrap.two-product{
height: 504px;
}
.ifso-welprodect-wrap.three-product{
height: 446px;
}
.ifso-row {
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
  margin: 0 -15px;
    padding-left: 30px;
    padding-right: 30px;
}
.ifso-row > div{
 padding-left: 15px;
padding-right:15px;
}
.two-product .ifso-row > div{
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}
.three-product .ifso-row > div{
   -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
}

.ifso-welproduct-content:after{
 content: '';
    width: 700px;
    height: 400px;
    position: absolute;
    background-color: #cef2f5;
    bottom: -194px;
    left: -100px;
    border-radius: 50%;
    z-index: 1;
}
.ifso-welproduct-content > * {
 position: relative;
z-index: 3;
}
.ifso-welprodect-wrap .subtitle{
font-size: 19px;
text-align: center;
font-weight: bold;
color: #f58123;
margin-bottom: 10px;
font-weight: bold;
}
.ifso-welprodect-wrap h3{
 font-size: 29px;
text-align: center;
max-width: 350px;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;
}
.ifso-welprodect-wrap h4{
     font-size: 21px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
.ifso-welprodect-wrap a{
background: #f58123;
padding: 7px 0px;
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border-radius: 10px;
color: #e24437;
text-align: center;
margin: 0 auto;
max-width: 122px;
color: #fff;
margin-top: 20px;
}
.ifso-welproduct-content img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #0000005c;
margin-top: 25px;
border-radius: 10px;;
}
.ifso-welproduct-content span{
   text-align: center;
   display: block;
}
.ifso-welproduct-content span inc{
text-decoration: none;
}
.ifso-welproduct-content del{
 opacity: .7;
font-size: 85%;
position:relative;
top: -3px;
}
.ifso-welproduct-content ins{
font-weight: bold;
  margin-left: 6px;
}

@media (min-width:576px){
 .modal-active #modalOverlay .modalContent.ifso-welprodect{
 min-width: 500px;
max-width:500px;
}
}

</style>
<div class="ifso-welprodect-wrap two-product">
<p class="subtitle">WELCOME BACK!</p>
<h3>We have these products just for you!</h3>
<div class="ifso-row">
<div class="ifso-welproduct-content"><img src="https://www.if-so.com/wp-content/uploads/2022/02/WelcomeBack2-Product1.png" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span> <a href="#">Add to cart</a></div>
<div class="ifso-welproduct-content"><img src="https://www.if-so.com/wp-content/uploads/2022/02/WelcomeBack2-Product2.png" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span> <a href="#">Add to cart</a></div>
</div>
</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-welprodect .closebutton{
position: absolute;
}
.ifso-welprodect{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect .closebutton {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    fill: #716d6d;
}
.modal-active #modalOverlay .modalContent.ifso-welprodect {
 border-radius: 20px;
}
.ifso-welprodect-wrap{
position: relative;
 background: #fff;
 padding: 20px 39px 20px;
 height: 560px;
 overflow: hidden;
}
.ifso-welprodect-wrap.two-product{
height: 504px;
}
.ifso-welprodect-wrap.three-product{
height: 446px;
}
.ifso-row {
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
  margin: 0 -15px;
    padding-left: 30px;
    padding-right: 30px;
}
.ifso-row > div{
 padding-left: 15px;
padding-right:15px;
}
.two-product .ifso-row > div{
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}
.three-product .ifso-row > div{
   -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
}

.ifso-welproduct-content:after{
 content: '';
    width: 700px;
    height: 400px;
    position: absolute;
    background-color: #cef2f5;
    bottom: -194px;
    left: -100px;
    border-radius: 50%;
    z-index: 1;
}
.ifso-welproduct-content > * {
 position: relative;
z-index: 3;
}
.ifso-welprodect-wrap .subtitle{
font-size: 19px;
text-align: center;
font-weight: bold;
color: #f58123;
margin-bottom: 10px;
font-weight: bold;
}
.ifso-welprodect-wrap h3{
 font-size: 29px;
text-align: center;
max-width: 350px;
margin: 0 auto;
font-weight: bold;
line-height: 1.2;
}
.ifso-welprodect-wrap h4{
     font-size: 21px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
.ifso-welprodect-wrap a{
background: #f58123;
padding: 7px 0px;
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border-radius: 10px;
color: #e24437;
text-align: center;
margin: 0 auto;
max-width: 122px;
color: #fff;
margin-top: 20px;
}
.ifso-welproduct-content img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #0000005c;
margin-top: 25px;
border-radius: 10px;;
}
.ifso-welproduct-content span{
   text-align: center;
   display: block;
}
.ifso-welproduct-content span inc{
text-decoration: none;
}
.ifso-welproduct-content del{
 opacity: .7;
font-size: 85%;
position:relative;
top: -3px;
}
.ifso-welproduct-content ins{
font-weight: bold;
  margin-left: 6px;
}

@media (min-width:576px){
 .modal-active #modalOverlay .modalContent.ifso-welprodect{
 min-width: 500px;
max-width:500px;
}
}

</style>
<div class="ifso-welprodect-wrap">
<p class="subtitle">WELCOME BACK!</p>
<h3>We have this product just for you!</h3>
<div class="ifso-welproduct-content"><img src="https://www.if-so.com/wp-content/uploads/2022/02/WelcomeBack1-1.png" alt="" />
<h4>Product</h4>
<span><del>$110</del><ins>$50</ins></span> <a href="#">Add to cart</a></div>
</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-bastiile .closebutton{
position: absolute;
top: 16px;
    right: 16px;
    background: transparent;
    fill: #fff;
width: 14px;
}
.ifso-bastiile{
position: relative;
}
.ifso-bastiile-wrap{
   align-items: center;
   background: #0f1f35;
   color: #e24437;
   text-align:center;
}

.ifso-bastitle-content h3{
  font-size: 40px;
  font-weight: bold;
  color: #e24437;
 margin: 0 0 18px 0;
line-height: 1;

}
.ifso-bastitle-content h3 em{
  font-size: 30px;
font-weight: normal;
color: #e24437;
    display: block;
    font-style: normal;
    margin-top: 5px;
    
}
.ifso-bastitle-content p{
  font-style: italic;
  font-size: 18px;
  margin-bottom:33px;
color: #e24437;
}
.ifso-bastitle-content a{
   background: #fff;
   padding: 5px 27px;
   display: inline-block;
   text-decoration: none;
   font-size: 17px;
   font-weight: bold;
   border-radius: 10px;
   color: #e24437;
}

@media (min-width:768px){
.ifso-bastiile-wrap > *{
  width: 50%
 }
.ifso-bastiile-wrap{
   max-width: 555px !important;
   display: flex;
   min-height: 400px;
}
.ifso-bastitle-content{
padding: 20px;
}
}
@media (max-width:767px){
  .ifso-bastiile-wrap{
   padding: 30px 20px 40px;
 }
.ifso-bastitle-content{
  padding-top: 20px;
}

</style>
<div class="ifso-bastiile-wrap"><img src="https://www.if-so.com/wp-content/uploads/2022/02/BastilleDay.png" alt="" />
<div class="ifso-bastitle-content">
<h3>HAPPY <em>Bastille Day</em></h3>
<p>Up to 50% off sale!</p>
<a href="#">SHOP NOW</a></div>
</div>

Preview
Copy Code
Export Trigger

<style>
.modal-active #modalOverlay .modalContent.ifso-beforleave .closebutton{
position: absolute;
}
.ifso-beforleave{
position: relative;
}
.modal-active #modalOverlay .modalContent.ifso-beforleave .closebutton {
    position: absolute;
    top: 16px;
    right: 16px;
width: 14px;
    background: transparent;
    fill: #333333;
}
.modal-active #modalOverlay .modalContent.ifso-beforleave{
border-radius: 20px;
}
.ifso-beforleave {
 border-radius: 10px;
}

.ifso-beforleave-wrap{
   background: #fff;
   }

.ifso-beforleave-wrap h3{
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 16px;
  margin-bottom: 37px;
line-height: 1.2;
}
.ifso-subtitle {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #90aa45;
  margin-top: 31px;
  display: inline-block;
margin-bottom: 0;
}
.ifso-discription {
 font-size: 20px;
 text-align: center;
 color: #454545;
 line-height: 1.2;
 max-width: 250px;
 margin: 0 auto;
 margin-bottom: 20px;
}
.ifso-beforleave-wrap a{
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   display: inline-block;
   text-align: center;
   text-decoration: navajowhite;
   padding: 12px 0;
   background-color: #0f1f35;
}
.ifso-bgimg {
  max-width: 425px;
  background-position: center;
  margin: 0 auto;
  display: block;
}
.ifso-img {
    max-width: 250px !important;
    margin: 0 auto;
    display: block;
    margin-bottom: 43px;
} 

@media (min-width:768px){
.ifso-beforleave-wrap > *{
  width: 100%
 }
.ifso-beforleave-wrap{
   min-height: 400px;
}
}
@media (max-width:767px){
  .ifso-beforleave-wrap{
  min-height: 400px;
 }
.ifso-subtitle {
 text-align: center;
 display: block;
}
.ifso-bgimg {
  max-width: 400px !important;
  background-position: center;
}
.ifso-beforleave-wrap a {
   display: block;
}

}

@media (max-width:576px){
.ifso-bgimg {
  max-width: 290px !important;
  background-position: center;
}

}
</style>
<div class="ifso-beforleave-wrap"><img class="ifso-bgimg" src="https://www.if-so.com/wp-content/uploads/2022/02/BeforeYouLeave-Leaves.png" alt="" />
<p class="ifso-subtitle">Thanks for your purchase!</p>
<h3>Before you leave, we’d love to hear your feedback!</h3>
<p class="ifso-discription">How would you rate your shopping experience?</p>
<img class="ifso-img" src="https://www.if-so.com/wp-content/uploads/2022/02/BeforeYouLeave-Stars.png" alt="" /> <a href="#">RATE US</a></div>