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.
<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 >> <img src="http://localhost/client/plugins/wp-content/uploads/2021/08/Black-friday.jpg" alt="" /></a></div>
close code
close code<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>
close code<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>
close code
<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>
close code<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>
close code*
<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>
close code<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>
close code<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>
close code[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>
close code<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>
close code<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>
close code<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>
close code<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>
close code