offer
Page: Product Pages (Optimized for Conversions)
Snippet Code
<style>
.exclusive-offers-wrapper--exclusive_offers_yedpbB {
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
.exclusive-offers-heading--exclusive_offers_yedpbB {
color: #212936;
margin: 0 0 10px;
font-family: Spectral, serif;
font-weight: 600;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
font-style: normal;
}
/* STATIC OFFER GRID - SLIDER REMOVED */
.exclusive-offers-list--exclusive_offers_yedpbB {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
box-sizing: border-box;
}
.offer-card-block--exclusive_offers_yedpbB {
width: 100%;
min-width: 0;
background-color: #fcfcfd;
border: 1.5px dashed #d2d5db;
border-radius: 10px;
padding: 13px 12px;
box-sizing: border-box;
}
.offer-card-header--exclusive_offers_yedpbB {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 6px;
}
.offer-icon--exclusive_offers_yedpbB {
width: 12px;
height: 12px;
flex: 0 0 12px;
display: block;
}
.offer-title--exclusive_offers_yedpbB {
color: #008243;
margin: 0;
font-family: Spectral, serif;
font-weight: 600;
font-size: 14px;
line-height: 16px;
letter-spacing: 0;
vertical-align: middle;
font-style: normal;
}
.offer-desc--exclusive_offers_yedpbB {
color: #4d5461;
margin: 0;
padding-left: 17px;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 10px;
line-height: 14px;
letter-spacing: 0;
vertical-align: middle;
}
.offers-footer-note--exclusive_offers_yedpbB {
color: #4d5461;
margin: 10px 0 0;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 10px;
line-height: 14px;
text-align: center;
}
/* TABLET */
@media screen and (max-width: 768px) {
.exclusive-offers-heading--exclusive_offers_yedpbB {
font-size: 17px;
line-height: 25px;
}
.exclusive-offers-list--exclusive_offers_yedpbB {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.offer-card-block--exclusive_offers_yedpbB {
padding: 12px 10px;
}
.offer-title--exclusive_offers_yedpbB {
font-size: 13px;
line-height: 16px;
}
.offer-desc--exclusive_offers_yedpbB {
font-size: 10px;
line-height: 14px;
}
}
/* MOBILE */
@media screen and (max-width: 480px) {
.exclusive-offers-wrapper--exclusive_offers_yedpbB {
margin-bottom: 15px;
}
.exclusive-offers-heading--exclusive_offers_yedpbB {
font-size: 16px;
line-height: 23px;
margin-bottom: 8px;
}
.exclusive-offers-list--exclusive_offers_yedpbB {
grid-template-columns: 1fr;
gap: 8px;
}
.offer-card-block--exclusive_offers_yedpbB {
padding: 11px 10px;
border-radius: 8px;
}
.offer-card-header--exclusive_offers_yedpbB {
margin-bottom: 5px;
}
.offer-title--exclusive_offers_yedpbB {
font-size: 13px;
line-height: 16px;
}
.offer-desc--exclusive_offers_yedpbB {
padding-left: 17px;
font-size: 10px;
line-height: 14px;
}
.offers-footer-note--exclusive_offers_yedpbB {
margin-top: 8px;
font-size: 9px;
}
}
</style>
<div class="exclusive-offers-wrapper--exclusive_offers_yedpbB">
<h3 class="exclusive-offers-heading--exclusive_offers_yedpbB">
Exclusive Site Offer
</h3>
<div class="exclusive-offers-list--exclusive_offers_yedpbB">
<!-- OFFER 1 -->
<div class="offer-card-block--exclusive_offers_yedpbB">
<div class="offer-card-header--exclusive_offers_yedpbB">
<svg
class="offer-icon--exclusive_offers_yedpbB"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.4482 6.00042L11.9747 4.62726C12.0325 4.47577 11.9875 4.30404 11.8607 4.20129L10.7193 3.27586L10.4883 1.82321C10.4628 1.66272 10.3368 1.53748 10.1763 1.51198L8.72368 1.28099L7.79899 0.138821C7.697 0.0120801 7.52151 -0.0329169 7.37377 0.0248292L5.99987 0.552043L4.62671 0.0255791C4.47447 -0.0329169 4.30423 0.01358 4.20149 0.139571L3.27605 1.28174L1.8234 1.51273C1.66366 1.53823 1.53767 1.66422 1.51217 1.82396L1.28119 3.27661L0.139016 4.20204C0.013025 4.30404 -0.0327218 4.47577 0.0250242 4.62726L0.551488 6.00042L0.0250242 7.37358C-0.0334718 7.52507 0.013025 7.69681 0.139016 7.7988L1.28119 8.72348L1.51217 10.1761C1.53767 10.3366 1.66291 10.4626 1.8234 10.4881L3.27605 10.7191L4.20149 11.8605C4.30423 11.988 4.47597 12.033 4.62746 11.9745L5.99987 11.4488L7.37302 11.9753C7.41652 11.9918 7.46152 12 7.50726 12C7.61751 12 7.72625 11.9513 7.79899 11.8605L8.72368 10.7191L10.1763 10.4881C10.3368 10.4626 10.4628 10.3366 10.4883 10.1761L10.7193 8.72348L11.8607 7.7988C11.9875 7.69605 12.0325 7.52507 11.9747 7.37358L11.4482 6.00042Z"
fill="#008243"
/>
<path
d="M4.87492 5.25082C4.25472 5.25082 3.75 4.74611 3.75 4.1259C3.75 3.50569 4.25472 3.00098 4.87492 3.00098C5.49513 3.00098 5.99985 3.50569 5.99985 4.1259C5.99985 4.74611 5.49513 5.25082 4.87492 5.25082ZM4.87492 3.75093C4.66794 3.75093 4.49995 3.91891 4.49995 4.1259C4.49995 4.33289 4.66794 4.50087 4.87492 4.50087C5.08191 4.50087 5.2499 4.33289 5.2499 4.1259C5.2499 3.91891 5.08191 3.75093 4.87492 3.75093Z"
fill="#FAFAFA"
/>
<path
d="M7.12492 9.00033C6.50472 9.00033 6 8.49562 6 7.87541C6 7.2552 6.50472 6.75049 7.12492 6.75049C7.74513 6.75049 8.24985 7.2552 8.24985 7.87541C8.24985 8.49562 7.74513 9.00033 7.12492 9.00033ZM7.12492 7.50044C6.91869 7.50044 6.74995 7.66918 6.74995 7.87541C6.74995 8.08165 6.91869 8.25039 7.12492 8.25039C7.33116 8.25039 7.4999 8.08165 7.4999 7.87541C7.4999 7.66918 7.33116 7.50044 7.12492 7.50044Z"
fill="#FAFAFA"
/>
<path
d="M4.12513 9.00025C4.04938 9.00025 3.97364 8.97775 3.90764 8.9305C3.7389 8.80976 3.69991 8.57578 3.82065 8.40704L7.57039 3.1574C7.69114 2.98866 7.92512 2.94966 8.09386 3.0704C8.2626 3.1904 8.30084 3.42513 8.18085 3.59312L4.43111 8.84276C4.35686 8.9455 4.24212 9.00025 4.12513 9.00025Z"
fill="#FAFAFA"
/>
</svg>
<h4 class="offer-title--exclusive_offers_yedpbB">
Buy 1 Get 5% Off
</h4>
</div>
<p class="offer-desc--exclusive_offers_yedpbB">
Add 1 product to the cart and get 5% OFF
</p>
</div>
<!-- OFFER 2 -->
<div class="offer-card-block--exclusive_offers_yedpbB">
<div class="offer-card-header--exclusive_offers_yedpbB">
<svg
class="offer-icon--exclusive_offers_yedpbB"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.4482 6.00042L11.9747 4.62726C12.0325 4.47577 11.9875 4.30404 11.8607 4.20129L10.7193 3.27586L10.4883 1.82321C10.4628 1.66272 10.3368 1.53748 10.1763 1.51198L8.72368 1.28099L7.79899 0.138821C7.697 0.0120801 7.52151 -0.0329169 7.37377 0.0248292L5.99987 0.552043L4.62671 0.0255791C4.47447 -0.0329169 4.30423 0.01358 4.20149 0.139571L3.27605 1.28174L1.8234 1.51273C1.66366 1.53823 1.53767 1.66422 1.51217 1.82396L1.28119 3.27661L0.139016 4.20204C0.013025 4.30404 -0.0327218 4.47577 0.0250242 4.62726L0.551488 6.00042L0.0250242 7.37358C-0.0334718 7.52507 0.013025 7.69681 0.139016 7.7988L1.28119 8.72348L1.51217 10.1761C1.53767 10.3366 1.66291 10.4626 1.8234 10.4881L3.27605 10.7191L4.20149 11.8605C4.30423 11.988 4.47597 12.033 4.62746 11.9745L5.99987 11.4488L7.37302 11.9753C7.41652 11.9918 7.46152 12 7.50726 12C7.61751 12 7.72625 11.9513 7.79899 11.8605L8.72368 10.7191L10.1763 10.4881C10.3368 10.4626 10.4628 10.3366 10.4883 10.1761L10.7193 8.72348L11.8607 7.7988C11.9875 7.69605 12.0325 7.52507 11.9747 7.37358L11.4482 6.00042Z"
fill="#008243"
/>
<path
d="M4.87492 5.25082C4.25472 5.25082 3.75 4.74611 3.75 4.1259C3.75 3.50569 4.25472 3.00098 4.87492 3.00098C5.49513 3.00098 5.99985 3.50569 5.99985 4.1259C5.99985 4.74611 5.49513 5.25082 4.87492 5.25082ZM4.87492 3.75093C4.66794 3.75093 4.49995 3.91891 4.49995 4.1259C4.49995 4.33289 4.66794 4.50087 4.87492 4.50087C5.08191 4.50087 5.2499 4.33289 5.2499 4.1259C5.2499 3.91891 5.08191 3.75093 4.87492 3.75093Z"
fill="#FAFAFA"
/>
<path
d="M7.12492 9.00033C6.50472 9.00033 6 8.49562 6 7.87541C6 7.2552 6.50472 6.75049 7.12492 6.75049C7.74513 6.75049 8.24985 7.2552 8.24985 7.87541C8.24985 8.49562 7.74513 9.00033 7.12492 9.00033ZM7.12492 7.50044C6.91869 7.50044 6.74995 7.66918 6.74995 7.87541C6.74995 8.08165 6.91869 8.25039 7.12492 8.25039C7.33116 8.25039 7.4999 8.08165 7.4999 7.87541C7.4999 7.66918 7.33116 7.50044 7.12492 7.50044Z"
fill="#FAFAFA"
/>
<path
d="M4.12513 9.00025C4.04938 9.00025 3.97364 8.97775 3.90764 8.9305C3.7389 8.80976 3.69991 8.57578 3.82065 8.40704L7.57039 3.1574C7.69114 2.98866 7.92512 2.94966 8.09386 3.0704C8.2626 3.1904 8.30084 3.42513 8.18085 3.59312L4.43111 8.84276C4.35686 8.9455 4.24212 9.00025 4.12513 9.00025Z"
fill="#FAFAFA"
/>
</svg>
<h4 class="offer-title--exclusive_offers_yedpbB">
Buy 2 Get 10% Off
</h4>
</div>
<p class="offer-desc--exclusive_offers_yedpbB">
Add 2 product to the cart and get 10% OFF
</p>
</div>
<!-- OFFER 3 -->
<div class="offer-card-block--exclusive_offers_yedpbB">
<div class="offer-card-header--exclusive_offers_yedpbB">
<svg
class="offer-icon--exclusive_offers_yedpbB"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.4482 6.00042L11.9747 4.62726C12.0325 4.47577 11.9875 4.30404 11.8607 4.20129L10.7193 3.27586L10.4883 1.82321C10.4628 1.66272 10.3368 1.53748 10.1763 1.51198L8.72368 1.28099L7.79899 0.138821C7.697 0.0120801 7.52151 -0.0329169 7.37377 0.0248292L5.99987 0.552043L4.62671 0.0255791C4.47447 -0.0329169 4.30423 0.01358 4.20149 0.139571L3.27605 1.28174L1.8234 1.51273C1.66366 1.53823 1.53767 1.66422 1.51217 1.82396L1.28119 3.27661L0.139016 4.20204C0.013025 4.30404 -0.0327218 4.47577 0.0250242 4.62726L0.551488 6.00042L0.0250242 7.37358C-0.0334718 7.52507 0.013025 7.69681 0.139016 7.7988L1.28119 8.72348L1.51217 10.1761C1.53767 10.3366 1.66291 10.4626 1.8234 10.4881L3.27605 10.7191L4.20149 11.8605C4.30423 11.988 4.47597 12.033 4.62746 11.9745L5.99987 11.4488L7.37302 11.9753C7.41652 11.9918 7.46152 12 7.50726 12C7.61751 12 7.72625 11.9513 7.79899 11.8605L8.72368 10.7191L10.1763 10.4881C10.3368 10.4626 10.4628 10.3366 10.4883 10.1761L10.7193 8.72348L11.8607 7.7988C11.9875 7.69605 12.0325 7.52507 11.9747 7.37358L11.4482 6.00042Z"
fill="#008243"
/>
<path
d="M4.87492 5.25082C4.25472 5.25082 3.75 4.74611 3.75 4.1259C3.75 3.50569 4.25472 3.00098 4.87492 3.00098C5.49513 3.00098 5.99985 3.50569 5.99985 4.1259C5.99985 4.74611 5.49513 5.25082 4.87492 5.25082ZM4.87492 3.75093C4.66794 3.75093 4.49995 3.91891 4.49995 4.1259C4.49995 4.33289 4.66794 4.50087 4.87492 4.50087C5.08191 4.50087 5.2499 4.33289 5.2499 4.1259C5.2499 3.91891 5.08191 3.75093 4.87492 3.75093Z"
fill="#FAFAFA"
/>
<path
d="M7.12492 9.00033C6.50472 9.00033 6 8.49562 6 7.87541C6 7.2552 6.50472 6.75049 7.12492 6.75049C7.74513 6.75049 8.24985 7.2552 8.24985 7.87541C8.24985 8.49562 7.74513 9.00033 7.12492 9.00033ZM7.12492 7.50044C6.91869 7.50044 6.74995 7.66918 6.74995 7.87541C6.74995 8.08165 6.91869 8.25039 7.12492 8.25039C7.33116 8.25039 7.4999 8.08165 7.4999 7.87541C7.4999 7.66918 7.33116 7.50044 7.4999 7.87541C7.4999 7.66918 7.33116 7.50044 7.12492 7.50044Z"
fill="#FAFAFA"
/>
<path
d="M4.12513 9.00025C4.04938 9.00025 3.97364 8.97775 3.90764 8.9305C3.7389 8.80976 3.69991 8.57578 3.82065 8.40704L7.57039 3.1574C7.69114 2.98866 7.92512 2.94966 8.09386 3.0704C8.2626 3.1904 8.30084 3.42513 8.18085 3.59312L4.43111 8.84276C4.35686 8.9455 4.24212 9.00025 4.12513 9.00025Z"
fill="#FAFAFA"
/>
</svg>
<h4 class="offer-title--exclusive_offers_yedpbB">
Buy 3 Get 15% Off
</h4>
</div>
<p class="offer-desc--exclusive_offers_yedpbB">
Add 3 product to the cart and get 15% OFF
</p>
</div>
</div>
<p class="offers-footer-note--exclusive_offers_yedpbB">
Auto applied • No code required
</p>
</div>Instructions
Heyy Guys 
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!