Urgency sells. A ‘limited time offer’ box with a live countdown tells shoppers this deal won’t wait for them — and hesitant browsers turn into buyers. Normally you’d pay $10/month for a countdown app, but a simple Liquid + JavaScript snippet does the same job for free. Below are 5 high-converting designs tuned for different industries, each with its own countdown timer. Pick the one that matches your store, paste it into a Custom Liquid section, set your end date, and watch conversions climb.

1. Fashion Store – Bold Red Urgency

High-energy red for flash fashion sales — the classic ‘don’t think, just buy’ box for drops and seasonal clearances.

Preview

Limited Time

FLAT 40% OFF — Today Only

Use code FESTIVE40 at checkout. Ends midnight!

02Days

14Hrs

33Min

07Sec

Sample: Live countdown ticks every second once the code (with its script) is installed.

Liquid Code

{% comment %}
  LayoutKart snippet: Limited Time Offer Box - Fashion Urgency
  Paste into a Custom Liquid section on the product template.
  Set your end date in offer_end below (YYYY-MM-DDTHH:MM:SS).
{% endcomment %}
{% assign offer_end = "2026-12-31T23:59:59" %}
<style>
  .lk-offer-g3v1 {
    max-width: 560px; margin: 18px auto; padding: 22px;
    border-radius: 16px; background: linear-gradient(135deg,#ff0844,#ff4567); border: none;
    text-align: center; color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
  }
  .lk-offer-g3v1 .lk-badge {
    display: inline-block; background: #7f1d1d; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
    margin-bottom: 12px;
  }
  .lk-offer-g3v1 h3 { margin: 0 0 6px; font-size: 24px; }
  .lk-offer-g3v1 .lk-sub { margin: 0 0 14px; font-size: 14px; opacity: .85; }
  .lk-offer-g3v1 .lk-timer { display: flex; justify-content: center; gap: 10px; }
  .lk-offer-g3v1 .lk-cell {
    background: rgba(255,255,255,.16); border-radius: 10px;
    min-width: 64px; padding: 8px 4px;
  }
  .lk-offer-g3v1 .lk-num { font-size: 26px; font-weight: 800; display: block; }
  .lk-offer-g3v1 .lk-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
</style>
<div class="lk-offer-g3v1">
  <span class="lk-badge">Limited Time</span>
  <h3>FLAT 40% OFF — Today Only</h3>
  <p class="lk-sub">Use code FESTIVE40 at checkout. Ends midnight!</p>
  <div class="lk-timer" data-end="{{ offer_end }}" id="lkTimerg3v1">
    <div class="lk-cell"><span class="lk-num">02</span><span class="lk-lbl">Days</span></div>
    <div class="lk-cell"><span class="lk-num">14</span><span class="lk-lbl">Hrs</span></div>
    <div class="lk-cell"><span class="lk-num">33</span><span class="lk-lbl">Min</span></div>
    <div class="lk-cell"><span class="lk-num">07</span><span class="lk-lbl">Sec</span></div>
  </div>
</div>
<script>
(function(){
  var box = document.getElementById('lkTimerg3v1');
  if(!box) return;
  var end = new Date(box.getAttribute('data-end')).getTime();
  var nums = box.querySelectorAll('.lk-num');
  function tick(){
    var d = Math.max(0, end - Date.now());
    var p = [Math.floor(d/864e5), Math.floor(d/36e5)%24, Math.floor(d/6e4)%60, Math.floor(d/1e3)%60];
    nums.forEach(function(n,i){ n.textContent = String(p[i]).padStart(2,'0'); });
  }
  tick(); setInterval(tick, 1000);
})();
</script>

2. Electronics – Dark Tech Countdown

A sleek dark box for gadget launches and deal days. Monospace-style digits give it a precision-tech feel.

Preview

Limited Time

Deal of the Day: 25% Off Audio

Headphones, speakers & wearables. Hurry!

02Days

14Hrs

33Min

07Sec

Sample: Live countdown ticks every second once the code (with its script) is installed.

Liquid Code

{% comment %}
  LayoutKart snippet: Limited Time Offer Box - Electronics Tech
  Paste into a Custom Liquid section on the product template.
  Set your end date in offer_end below (YYYY-MM-DDTHH:MM:SS).
{% endcomment %}
{% assign offer_end = "2026-12-31T23:59:59" %}
<style>
  .lk-offer-g3v2 {
    max-width: 560px; margin: 18px auto; padding: 22px;
    border-radius: 16px; background: #0f172a; border: 1px solid #334155;
    text-align: center; color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
  }
  .lk-offer-g3v2 .lk-badge {
    display: inline-block; background: #38bdf8; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
    margin-bottom: 12px;
  }
  .lk-offer-g3v2 h3 { margin: 0 0 6px; font-size: 24px; }
  .lk-offer-g3v2 .lk-sub { margin: 0 0 14px; font-size: 14px; opacity: .85; }
  .lk-offer-g3v2 .lk-timer { display: flex; justify-content: center; gap: 10px; }
  .lk-offer-g3v2 .lk-cell {
    background: rgba(255,255,255,.16); border-radius: 10px;
    min-width: 64px; padding: 8px 4px;
  }
  .lk-offer-g3v2 .lk-num { font-size: 26px; font-weight: 800; display: block; }
  .lk-offer-g3v2 .lk-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
</style>
<div class="lk-offer-g3v2">
  <span class="lk-badge">Limited Time</span>
  <h3>Deal of the Day: 25% Off Audio</h3>
  <p class="lk-sub">Headphones, speakers & wearables. Hurry!</p>
  <div class="lk-timer" data-end="{{ offer_end }}" id="lkTimerg3v2">
    <div class="lk-cell"><span class="lk-num">02</span><span class="lk-lbl">Days</span></div>
    <div class="lk-cell"><span class="lk-num">14</span><span class="lk-lbl">Hrs</span></div>
    <div class="lk-cell"><span class="lk-num">33</span><span class="lk-lbl">Min</span></div>
    <div class="lk-cell"><span class="lk-num">07</span><span class="lk-lbl">Sec</span></div>
  </div>
</div>
<script>
(function(){
  var box = document.getElementById('lkTimerg3v2');
  if(!box) return;
  var end = new Date(box.getAttribute('data-end')).getTime();
  var nums = box.querySelectorAll('.lk-num');
  function tick(){
    var d = Math.max(0, end - Date.now());
    var p = [Math.floor(d/864e5), Math.floor(d/36e5)%24, Math.floor(d/6e4)%60, Math.floor(d/1e3)%60];
    nums.forEach(function(n,i){ n.textContent = String(p[i]).padStart(2,'0'); });
  }
  tick(); setInterval(tick, 1000);
})();
</script>

3. Beauty – Pastel Pink Offer

Soft and feminine for cosmetics — a pretty pink box that creates urgency without shouting. Perfect for gift-with-purchase promos.

Preview

Limited Time

Free Gift Worth ₹499

On all orders above ₹1,499 — this weekend only

02Days

14Hrs

33Min

07Sec

Sample: Live countdown ticks every second once the code (with its script) is installed.

Liquid Code

{% comment %}
  LayoutKart snippet: Limited Time Offer Box - Beauty Pastel
  Paste into a Custom Liquid section on the product template.
  Set your end date in offer_end below (YYYY-MM-DDTHH:MM:SS).
{% endcomment %}
{% assign offer_end = "2026-12-31T23:59:59" %}
<style>
  .lk-offer-g3v3 {
    max-width: 560px; margin: 18px auto; padding: 22px;
    border-radius: 16px; background: #fdf2f8; border: 2px solid #f9a8d4;
    text-align: center; color: #831843;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
  }
  .lk-offer-g3v3 .lk-badge {
    display: inline-block; background: #ec4899; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
    margin-bottom: 12px;
  }
  .lk-offer-g3v3 h3 { margin: 0 0 6px; font-size: 24px; }
  .lk-offer-g3v3 .lk-sub { margin: 0 0 14px; font-size: 14px; opacity: .85; }
  .lk-offer-g3v3 .lk-timer { display: flex; justify-content: center; gap: 10px; }
  .lk-offer-g3v3 .lk-cell {
    background: rgba(255,255,255,.16); border-radius: 10px;
    min-width: 64px; padding: 8px 4px;
  }
  .lk-offer-g3v3 .lk-num { font-size: 26px; font-weight: 800; display: block; }
  .lk-offer-g3v3 .lk-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
</style>
<div class="lk-offer-g3v3">
  <span class="lk-badge">Limited Time</span>
  <h3>Free Gift Worth ₹499</h3>
  <p class="lk-sub">On all orders above ₹1,499 — this weekend only</p>
  <div class="lk-timer" data-end="{{ offer_end }}" id="lkTimerg3v3">
    <div class="lk-cell"><span class="lk-num">02</span><span class="lk-lbl">Days</span></div>
    <div class="lk-cell"><span class="lk-num">14</span><span class="lk-lbl">Hrs</span></div>
    <div class="lk-cell"><span class="lk-num">33</span><span class="lk-lbl">Min</span></div>
    <div class="lk-cell"><span class="lk-num">07</span><span class="lk-lbl">Sec</span></div>
  </div>
</div>
<script>
(function(){
  var box = document.getElementById('lkTimerg3v3');
  if(!box) return;
  var end = new Date(box.getAttribute('data-end')).getTime();
  var nums = box.querySelectorAll('.lk-num');
  function tick(){
    var d = Math.max(0, end - Date.now());
    var p = [Math.floor(d/864e5), Math.floor(d/36e5)%24, Math.floor(d/6e4)%60, Math.floor(d/1e3)%60];
    nums.forEach(function(n,i){ n.textContent = String(p[i]).padStart(2,'0'); });
  }
  tick(); setInterval(tick, 1000);
})();
</script>

4. Grocery – Green Flash Deal

Fresh green for weekly grocery deals. Short 6-hour windows work brilliantly for perishables and restocks.

Preview

Limited Time

Flash Deal: 15% Off Fresh

Fruits, veggies & dairy — next 6 hours

02Days

14Hrs

33Min

07Sec

Sample: Live countdown ticks every second once the code (with its script) is installed.

Liquid Code

{% comment %}
  LayoutKart snippet: Limited Time Offer Box - Grocery Flash
  Paste into a Custom Liquid section on the product template.
  Set your end date in offer_end below (YYYY-MM-DDTHH:MM:SS).
{% endcomment %}
{% assign offer_end = "2026-12-31T23:59:59" %}
<style>
  .lk-offer-g3v4 {
    max-width: 560px; margin: 18px auto; padding: 22px;
    border-radius: 16px; background: #f0fdf4; border: 2px dashed #16a34a;
    text-align: center; color: #14532d;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
  }
  .lk-offer-g3v4 .lk-badge {
    display: inline-block; background: #16a34a; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
    margin-bottom: 12px;
  }
  .lk-offer-g3v4 h3 { margin: 0 0 6px; font-size: 24px; }
  .lk-offer-g3v4 .lk-sub { margin: 0 0 14px; font-size: 14px; opacity: .85; }
  .lk-offer-g3v4 .lk-timer { display: flex; justify-content: center; gap: 10px; }
  .lk-offer-g3v4 .lk-cell {
    background: rgba(255,255,255,.16); border-radius: 10px;
    min-width: 64px; padding: 8px 4px;
  }
  .lk-offer-g3v4 .lk-num { font-size: 26px; font-weight: 800; display: block; }
  .lk-offer-g3v4 .lk-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
</style>
<div class="lk-offer-g3v4">
  <span class="lk-badge">Limited Time</span>
  <h3>Flash Deal: 15% Off Fresh</h3>
  <p class="lk-sub">Fruits, veggies & dairy — next 6 hours</p>
  <div class="lk-timer" data-end="{{ offer_end }}" id="lkTimerg3v4">
    <div class="lk-cell"><span class="lk-num">02</span><span class="lk-lbl">Days</span></div>
    <div class="lk-cell"><span class="lk-num">14</span><span class="lk-lbl">Hrs</span></div>
    <div class="lk-cell"><span class="lk-num">33</span><span class="lk-lbl">Min</span></div>
    <div class="lk-cell"><span class="lk-num">07</span><span class="lk-lbl">Sec</span></div>
  </div>
</div>
<script>
(function(){
  var box = document.getElementById('lkTimerg3v4');
  if(!box) return;
  var end = new Date(box.getAttribute('data-end')).getTime();
  var nums = box.querySelectorAll('.lk-num');
  function tick(){
    var d = Math.max(0, end - Date.now());
    var p = [Math.floor(d/864e5), Math.floor(d/36e5)%24, Math.floor(d/6e4)%60, Math.floor(d/1e3)%60];
    nums.forEach(function(n,i){ n.textContent = String(p[i]).padStart(2,'0'); });
  }
  tick(); setInterval(tick, 1000);
})();
</script>

5. Jewelry – Gold Luxury Limited

Restrained gold-on-cream for high-ticket pieces. ‘Limited edition’ framing protects premium positioning while adding urgency.

Preview

Limited Time

Private Preview: 10% Off

Limited edition pieces — members only, 48 hours

02Days

14Hrs

33Min

07Sec

Sample: Live countdown ticks every second once the code (with its script) is installed.

Liquid Code

{% comment %}
  LayoutKart snippet: Limited Time Offer Box - Jewelry Gold
  Paste into a Custom Liquid section on the product template.
  Set your end date in offer_end below (YYYY-MM-DDTHH:MM:SS).
{% endcomment %}
{% assign offer_end = "2026-12-31T23:59:59" %}
<style>
  .lk-offer-g3v5 {
    max-width: 560px; margin: 18px auto; padding: 22px;
    border-radius: 16px; background: #faf7f0; border: 1px solid #d4af37;
    text-align: center; color: #5c4a1f;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
  }
  .lk-offer-g3v5 .lk-badge {
    display: inline-block; background: #a68b3f; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
    margin-bottom: 12px;
  }
  .lk-offer-g3v5 h3 { margin: 0 0 6px; font-size: 24px; }
  .lk-offer-g3v5 .lk-sub { margin: 0 0 14px; font-size: 14px; opacity: .85; }
  .lk-offer-g3v5 .lk-timer { display: flex; justify-content: center; gap: 10px; }
  .lk-offer-g3v5 .lk-cell {
    background: rgba(255,255,255,.16); border-radius: 10px;
    min-width: 64px; padding: 8px 4px;
  }
  .lk-offer-g3v5 .lk-num { font-size: 26px; font-weight: 800; display: block; }
  .lk-offer-g3v5 .lk-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
</style>
<div class="lk-offer-g3v5">
  <span class="lk-badge">Limited Time</span>
  <h3>Private Preview: 10% Off</h3>
  <p class="lk-sub">Limited edition pieces — members only, 48 hours</p>
  <div class="lk-timer" data-end="{{ offer_end }}" id="lkTimerg3v5">
    <div class="lk-cell"><span class="lk-num">02</span><span class="lk-lbl">Days</span></div>
    <div class="lk-cell"><span class="lk-num">14</span><span class="lk-lbl">Hrs</span></div>
    <div class="lk-cell"><span class="lk-num">33</span><span class="lk-lbl">Min</span></div>
    <div class="lk-cell"><span class="lk-num">07</span><span class="lk-lbl">Sec</span></div>
  </div>
</div>
<script>
(function(){
  var box = document.getElementById('lkTimerg3v5');
  if(!box) return;
  var end = new Date(box.getAttribute('data-end')).getTime();
  var nums = box.querySelectorAll('.lk-num');
  function tick(){
    var d = Math.max(0, end - Date.now());
    var p = [Math.floor(d/864e5), Math.floor(d/36e5)%24, Math.floor(d/6e4)%60, Math.floor(d/1e3)%60];
    nums.forEach(function(n,i){ n.textContent = String(p[i]).padStart(2,'0'); });
  }
  tick(); setInterval(tick, 1000);
})();
</script>

How to Add Limited Time Offer Box to Shopify

No app needed — this works with a free built-in Shopify feature called the Custom Liquid section. It takes about two minutes:

From your Shopify admin, go to Online Store → Themes.
Click Customize next to your live theme (works with Dawn and all Online Store 2.0 themes).
In the theme editor, use the top dropdown to navigate to a product page.
In the left sidebar, click Add section → Custom liquid.
Delete the placeholder code, paste the code from your chosen variation above, and click Save.
Preview your store — the change is live instantly. Drag the section up or down to reposition it.

Tip: Always duplicate your theme first (Themes → … → Duplicate) so you have a backup before editing.

Customize the Limited Time Offer Box

End date: change offer_end to your sale’s end date and time.
Discount text: rewrite the headline and code to match your actual promotion.
Colors: adjust the gradient and accent colors to your brand palette.
Urgency level: hide the timer and keep only the badge for a softer nudge.

More Shopify Code Sections

Keep customizing your store with these copy-paste tutorials:

Conclusion

A limited time offer box is the closest thing to a salesperson tapping their watch. It gives shoppers a reason to buy now instead of ‘later’ (which usually means never). Set a genuine end date — fake urgency erodes trust fast — pick the design that fits your brand, paste it in, and let the countdown do the persuading.

Want a store that already has all of this built in? Check out LayoutKart’s readymade Shopify sections and templates — premium designs, clean Liquid code, ready to install.

How to Add a Limited Time Offer Box to Shopify

1. Fashion Store – Bold Red Urgency

Preview

FLAT 40% OFF — Today Only

Liquid Code

2. Electronics – Dark Tech Countdown

Preview

Deal of the Day: 25% Off Audio

Liquid Code

3. Beauty – Pastel Pink Offer

Preview

Free Gift Worth ₹499

Liquid Code

4. Grocery – Green Flash Deal

Preview

Flash Deal: 15% Off Fresh

Liquid Code

5. Jewelry – Gold Luxury Limited

Preview

Private Preview: 10% Off

Liquid Code

How to Add Limited Time Offer Box to Shopify

Customize the Limited Time Offer Box

More Shopify Code Sections

Conclusion

Author: anurag Layoutkart