A well-placed offer box does two jobs: it rewards the shopper and creates urgency to buy now. Instead of hoping visitors find your coupon on some deals site, show it right on the product page with a one-click copy button. These 6 themed offer boxes are ready to paste into a Custom Liquid section — no app, no subscription.

1. Fashion Store – Chic Offer Box

Blush and gold for apparel promotions.

Preview

Sample: the copy button copies the code to clipboard.

Liquid Code

<div class="lk-offer" style="font-family:Georgia, serif;">
  <p style="font-size:18px;margin:0 0 6px;">🎉 <strong>Festive Offer!</strong></p>
  <p style="margin:0 0 10px;font-size:14px;">Flat 15% off on orders above ₹999. Limited period.</p>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <code id="lk-coupon-code" style="background:#fff;border:2px dashed #b76e79;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:1px;">FESTIVE15</code>
    <button id="lk-coupon-btn" style="background:#b76e79;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;">Copy Code</button>
  </div>
  <p id="lk-coupon-msg" style="font-size:13px;margin:8px 0 0;"></p>
</div>
<style>
.lk-offer { background:#fdf6f4; border:1px solid #b76e79; border-radius:14px; padding:18px; margin:16px 0; color:#5c3a42; }
</style>
<script>
document.getElementById('lk-coupon-btn').addEventListener('click', function(){
  var code = document.getElementById('lk-coupon-code').textContent;
  navigator.clipboard.writeText(code).then(function(){
    document.getElementById('lk-coupon-msg').textContent = 'Code copied! Apply it at checkout.';
  });
});
</script>

2. Electronics Store – Tech Deal Box

Dark cyber theme for gadget deals.

Preview

Sample: the copy button copies the code to clipboard.

Liquid Code

<div class="lk-offer" style="font-family:'Segoe UI', sans-serif;">
  <p style="font-size:18px;margin:0 0 6px;">🎉 <strong>Tech Deal Unlocked</strong></p>
  <p style="margin:0 0 10px;font-size:14px;">Extra 10% off on accessories. Auto-applies at checkout.</p>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <code id="lk-coupon-code" style="background:#fff;border:2px dashed #00e5ff;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:1px;">TECH10</code>
    <button id="lk-coupon-btn" style="background:#00e5ff;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;">Copy Code</button>
  </div>
  <p id="lk-coupon-msg" style="font-size:13px;margin:8px 0 0;"></p>
</div>
<style>
.lk-offer { background:#0b1c2c; border:1px solid #00e5ff; border-radius:8px; padding:18px; margin:16px 0; color:#ffffff; }
</style>
<script>
document.getElementById('lk-coupon-btn').addEventListener('click', function(){
  var code = document.getElementById('lk-coupon-code').textContent;
  navigator.clipboard.writeText(code).then(function(){
    document.getElementById('lk-coupon-msg').textContent = 'Code copied! Apply it at checkout.';
  });
});
</script>

3. Beauty Store – Glow Offer Box

Pink and dreamy for cosmetics.

Preview

Sample: the copy button copies the code to clipboard.

Liquid Code

<div class="lk-offer" style="font-family:'Trebuchet MS', sans-serif;">
  <p style="font-size:18px;margin:0 0 6px;">🎉 <strong>Glow Up Sale</strong></p>
  <p style="margin:0 0 10px;font-size:14px;">Buy 2 Get 1 free on all skincare this week.</p>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <code id="lk-coupon-code" style="background:#fff;border:2px dashed #ec4899;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:1px;">GLOWB2G1</code>
    <button id="lk-coupon-btn" style="background:#ec4899;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;">Copy Code</button>
  </div>
  <p id="lk-coupon-msg" style="font-size:13px;margin:8px 0 0;"></p>
</div>
<style>
.lk-offer { background:#fdf2f7; border:1px solid #ec4899; border-radius:18px; padding:18px; margin:16px 0; color:#6d2d4d; }
</style>
<script>
document.getElementById('lk-coupon-btn').addEventListener('click', function(){
  var code = document.getElementById('lk-coupon-code').textContent;
  navigator.clipboard.writeText(code).then(function(){
    document.getElementById('lk-coupon-msg').textContent = 'Code copied! Apply it at checkout.';
  });
});
</script>

4. First Order – Welcome Offer Box

Warm welcome discount for new customers.

Preview

Sample: the copy button copies the code to clipboard.

Liquid Code

<div class="lk-offer" style="font-family:Verdana, sans-serif;">
  <p style="font-size:18px;margin:0 0 6px;">🎉 <strong>Welcome! 🎁</strong></p>
  <p style="margin:0 0 10px;font-size:14px;">Get 20% off your first order. We can't wait to serve you.</p>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <code id="lk-coupon-code" style="background:#fff;border:2px dashed #d97706;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:1px;">WELCOME20</code>
    <button id="lk-coupon-btn" style="background:#d97706;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;">Copy Code</button>
  </div>
  <p id="lk-coupon-msg" style="font-size:13px;margin:8px 0 0;"></p>
</div>
<style>
.lk-offer { background:#fffbeb; border:1px solid #d97706; border-radius:12px; padding:18px; margin:16px 0; color:#78350f; }
</style>
<script>
document.getElementById('lk-coupon-btn').addEventListener('click', function(){
  var code = document.getElementById('lk-coupon-code').textContent;
  navigator.clipboard.writeText(code).then(function(){
    document.getElementById('lk-coupon-msg').textContent = 'Code copied! Apply it at checkout.';
  });
});
</script>

5. Grocery Store – Fresh Saver Box

Green savings box for daily essentials.

Preview

Sample: the copy button copies the code to clipboard.

Liquid Code

<div class="lk-offer" style="font-family:Verdana, sans-serif;">
  <p style="font-size:18px;margin:0 0 6px;">🎉 <strong>Weekly Saver</strong></p>
  <p style="margin:0 0 10px;font-size:14px;">Flat ₹100 off on orders above ₹499. Stock up now.</p>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <code id="lk-coupon-code" style="background:#fff;border:2px dashed #2e7d32;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:1px;">FRESH100</code>
    <button id="lk-coupon-btn" style="background:#2e7d32;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;">Copy Code</button>
  </div>
  <p id="lk-coupon-msg" style="font-size:13px;margin:8px 0 0;"></p>
</div>
<style>
.lk-offer { background:#f2f9ec; border:1px solid #2e7d32; border-radius:10px; padding:18px; margin:16px 0; color:#1b4d1e; }
</style>
<script>
document.getElementById('lk-coupon-btn').addEventListener('click', function(){
  var code = document.getElementById('lk-coupon-code').textContent;
  navigator.clipboard.writeText(code).then(function(){
    document.getElementById('lk-coupon-msg').textContent = 'Code copied! Apply it at checkout.';
  });
});
</script>

6. Festival Sale – Diwali Dhamaka Box

Festive orange-gold for sale season.

Preview

Sample: the copy button copies the code to clipboard.

Liquid Code

<div class="lk-offer" style="font-family:Georgia, serif;">
  <p style="font-size:18px;margin:0 0 6px;">🎉 <strong>🪔 Diwali Dhamaka</strong></p>
  <p style="margin:0 0 10px;font-size:14px;">Up to 40% off sitewide + extra 10% with this code.</p>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
    <code id="lk-coupon-code" style="background:#fff;border:2px dashed #ea580c;padding:8px 14px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:1px;">DIWALI10</code>
    <button id="lk-coupon-btn" style="background:#ea580c;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;">Copy Code</button>
  </div>
  <p id="lk-coupon-msg" style="font-size:13px;margin:8px 0 0;"></p>
</div>
<style>
.lk-offer { background:#fff7ed; border:1px solid #ea580c; border-radius:12px; padding:18px; margin:16px 0; color:#7c2d12; }
</style>
<script>
document.getElementById('lk-coupon-btn').addEventListener('click', function(){
  var code = document.getElementById('lk-coupon-code').textContent;
  navigator.clipboard.writeText(code).then(function(){
    document.getElementById('lk-coupon-msg').textContent = 'Code copied! Apply it at checkout.';
  });
});
</script>

How to Add Custom Offer Box to Shopify

No theme file editing needed. Use Shopify’s Custom Liquid section:

1. In Shopify admin, go to Online Store > Themes.
2. Click Customize on your live theme (works with Dawn and all OS 2.0 themes).
3. Navigate to your product page template using the top page selector.
4. In the left sidebar, click Add section and choose Custom liquid.
5. Paste the code from any variation above into the Custom liquid box.
6. Drag the section to the right position (under the buy buttons is ideal) and click Save.

Tip: want it on every product automatically? Add the section once to the default product template and it appears store-wide.

Customize the Custom Offer Box

• Change the coupon code text — make sure it matches a real discount in Shopify admin → Discounts.
• Show it conditionally: wrap in {% if product.compare_at_price > product.price %} for sale items only.
• Edit colors and border-radius to match your brand.
• Add an expiry line like ‘Valid till Sunday’ for extra urgency.

More Shopify Code Sections

• Shopify Product Page Discount Banner
• Shopify Discount Code Copy Button
• Shopify Cart Countdown Timer
• Shopify Product Page Trust Badges with Liquid (Code + Guide)
• Shopify Automatic Coupon Code Display
• Shopify Product Page Stock Counter (Only X Left)
• Shopify Frequently Bought Together Section
• Shopify Countdown Announcement Bar

Conclusion

Discounts only work if shoppers actually see them. An offer box on the product page puts your coupon where the buying decision happens. Pick a design, create the matching discount in Shopify admin, and paste the box in.

Want this done for you? LayoutKart builds conversion-ready Shopify stores with all these sections pre-installed. Browse our readymade Shopify templates or get a custom store built for your brand.