Shopify Delivery Countdown Timer: अपने Store में लगाएं Attractive Delivery Widget
क्या आप अपने Shopify Store पर ऐसा Delivery Countdown Timer लगाना चाहते हैं, जो ग्राहकों को बताए कि उनका ऑर्डर कब तक डिलीवर हो सकता है?
आज के E-commerce Business में Customer Experience बहुत महत्वपूर्ण है। जब ग्राहक किसी प्रोडक्ट को देखते हैं, तो उन्हें यह जानना अच्छा लगता है कि ऑर्डर करने के बाद उनका प्रोडक्ट कितने दिनों में डिलीवर होगा।
इसलिए आज हम एक खूबसूरत Shopify Delivery Countdown Timer बनाना सीखेंगे।
1. Shopify Delivery Countdown Timer क्या है?
Delivery Countdown Timer एक ऐसा Widget है, जो आपके Shopify Product Page पर दिखाई देता है।
इसमें मुख्य रूप से ये जानकारी दिखाई जाती है:
- Live Countdown Timer
- Expected Delivery Date
- Fast Delivery Message
- Attractive Design
- Mobile Responsive Layout
यह Widget आपके Store को Professional Look देता है और ग्राहकों को Delivery Information समझने में मदद करता है।
2. इस Shopify Delivery Countdown Timer की खासियत
इस डिजाइन में हमने Fresh & Earthy Theme का इस्तेमाल किया है।
मुख्य Features:
- Beautiful Cream Background
- Green Countdown Highlight
- Delivery Truck Emoji
- Automatic Delivery Date Calculation
- Responsive Mobile Design
- Attractive Customer Message
- Shopify Liquid Support
3. Shopify में Delivery Countdown Timer कैसे Add करें?
इसे अपने Shopify Store में जोड़ने के लिए नीचे दिए गए Steps Follow करें।
Step 1: Shopify Admin में Login करें।
Step 2: Online Store पर जाएं।
Step 3: Themes पर क्लिक करें।
Step 4: Customize या Edit Code खोलें।
Step 5: Product Page पर Custom Liquid Section Add करें।
Step 6: नीचे दिया गया HTML, CSS और Liquid Code Paste करें।
Step 7: Save करके अपने Product Page को Preview करें।
4. Countdown Timer कैसे काम करता है?
इस Widget में Shopify Liquid का इस्तेमाल करके Current Date और Time प्राप्त किया जाता है।
इसके बाद:
- Countdown दिन के अंत तक बचा समय दिखाता है।
- Delivery Start Date में 4 दिन जोड़े जाते हैं।
- Delivery End Date में 6 दिन जोड़े जाते हैं।
- Customer को Expected Delivery Window दिखाई देती है।
Important: यह Liquid Countdown पेज लोड होने पर समय की गणना करता है। हर सेकंड Live Countdown चलाने के लिए JavaScript की जरूरत होगी। Delivery Dates भी Calendar Date के अनुसार सेट करनी चाहिए।
5. क्या यह Shopify Delivery Countdown Timer Mobile Friendly है?
हां! इस डिजाइन में Responsive CSS Media Queries का इस्तेमाल किया गया है।
इसलिए यह Widget इन सभी Devices पर काम करने के लिए डिजाइन किया गया है:
- Desktop
- Laptop
- Tablet
- Android Mobile
- iPhone
6. क्या यह Shopify Delivery Countdown Timer Shopify Store की Sales बढ़ा सकता है?
Delivery Information दिखाने से ग्राहकों को खरीदारी का निर्णय लेने में मदद मिल सकती है।
इसके फायदे:
- Customer Experience बेहतर होता है।
- Delivery Expectations स्पष्ट होती हैं।
- Product Page Professional दिखाई देता है।
- Customers को Order Timing समझने में आसानी होती है।
हालांकि, Sales में बढ़ोतरी की गारंटी नहीं है। इसका प्रभाव आपके Product, Pricing और Customer Experience पर निर्भर करता है।
Conclusion
अगर आप अपने Shopify Store को Professional और User Friendly बनाना चाहते हैं, तो Delivery Countdown Timer एक अच्छा Customization हो सकता है।
आप इस डिजाइन को अपने Brand के हिसाब से Customize कर सकते हैं और अपने ग्राहकों को Expected Delivery Information दिखा सकते हैं।
अगर आपको यह Shopify Custom Liquid Tutorial पसंद आया, तो इस ब्लॉग को Share करें और ऐसे ही नए E-commerce और Shopify Tutorials के लिए जुड़े रहें।
Related Keywords Shopify Delivery Countdown Timer
Shopify Countdown Timer, Shopify Delivery Date Widget, Shopify Custom Liquid Code, Shopify Product Page Customization, Shopify Free Code, E-commerce Website Design, Shopify Store Customization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>Biji · Delivery Countdown</title>
<!-- Google Font & smooth base -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
/* Biji design – seed-inspired fresh & earthy */
.biji-box {
border: 3px solid #3d2b1f;
background: #fefcf5;
background-image: radial-gradient(circle at 20% 30%, rgba(255, 215, 140, 0.15) 0%, transparent 30%),
radial-gradient(circle at 80% 70%, rgba(160, 210, 130, 0.12) 0%, transparent 35%);
padding: 28px 22px;
border-radius: 60px 60px 40px 40px;
text-align: center;
max-width: 600px;
width: 100%;
margin: 0 auto;
box-shadow: 0 20px 40px -10px rgba(60, 40, 20, 0.25),
inset 0 2px 8px rgba(255, 245, 220, 0.8);
position: relative;
transition: all 0.2s ease;
box-sizing: border-box;
}
/* seed / bean decorative elements */
.biji-box::before {
content: "🫘";
position: absolute;
top: -14px;
left: 20px;
font-size: 34px;
transform: rotate(-12deg);
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
opacity: 0.9;
}
.biji-box::after {
content: "🌱";
position: absolute;
bottom: -12px;
right: 20px;
font-size: 32px;
transform: rotate(8deg);
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.06));
opacity: 0.8;
}
/* inner seed pattern (subtle) */
.biji-box .seed-dots {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
}
.biji-box .seed-dots span {
position: absolute;
width: 8px;
height: 8px;
background: #d9c5a6;
opacity: 0.18;
border-radius: 50%;
}
.biji-box .seed-dots span:nth-child(1) { top: 15%; left: 8%; }
.biji-box .seed-dots span:nth-child(2) { bottom: 22%; right: 6%; width: 14px; height: 14px; opacity: 0.12; }
.biji-box .seed-dots span:nth-child(3) { top: 40%; right: 12%; width: 10px; height: 10px; }
.biji-box .seed-dots span:nth-child(4) { bottom: 35%; left: 10%; width: 12px; height: 12px; opacity: 0.13; }
/* title */
.biji-title {
color: #2d1f14;
font-weight: 800;
font-size: 26px;
margin: 0 0 8px 0;
letter-spacing: -0.3px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.biji-title span {
background: #e5d6c0;
padding: 0 12px;
border-radius: 40px;
font-size: 28px;
line-height: 1.3;
}
.biji-title .truck {
display: inline-block;
transform: scale(1.1);
}
/* countdown highlight */
.countdown-highlight {
background: #e6d8c2;
padding: 12px 20px;
border-radius: 60px;
display: inline-block;
margin: 12px auto 8px;
font-weight: 700;
font-size: 28px;
color: #1f3a2b;
letter-spacing: 1px;
box-shadow: inset 0 -2px 0 #b7a387;
border: 1px solid #cfbca2;
}
.countdown-highlight span {
background: #1f3a2b;
color: #f7f0e3;
padding: 4px 14px;
border-radius: 40px;
font-size: 30px;
margin: 0 3px;
display: inline-block;
min-width: 70px;
}
.delivery-range {
font-size: 20px;
font-weight: 700;
color: #1d4d2b;
background: #eaf5e3;
padding: 12px 16px;
border-radius: 80px;
display: inline-block;
margin: 14px 0 8px;
border: 1px solid #b6cfaa;
backdrop-filter: blur(2px);
box-shadow: 0 2px 6px rgba(90, 70, 40, 0.06);
}
.delivery-range strong {
background: #1d4d2b;
color: white;
padding: 2px 16px;
border-radius: 40px;
font-weight: 600;
letter-spacing: 0.4px;
margin: 0 4px;
}
.sub-message {
color: #3d3228;
font-size: 16px;
margin: 14px 0 4px;
font-weight: 400;
background: rgba(225, 210, 185, 0.3);
padding: 8px 12px;
border-radius: 50px;
display: inline-block;
backdrop-filter: blur(2px);
border: 1px dashed #b7a387;
}
.sub-message i {
font-style: normal;
display: inline-block;
animation: pulse-bean 1.6s infinite;
}
@keyframes pulse-bean {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* responsive adjustments */
@media (max-width: 600px) {
.biji-box {
padding: 28px 16px 30px;
border-radius: 40px 40px 30px 30px;
}
.biji-box::before {
font-size: 28px;
top: -12px;
left: 10px;
}
.biji-box::after {
font-size: 26px;
bottom: -10px;
right: 10px;
}
.biji-title {
font-size: 20px;
gap: 4px;
}
.biji-title span {
font-size: 22px;
padding: 0 10px;
}
.countdown-highlight {
font-size: 22px;
padding: 8px 12px;
}
.countdown-highlight span {
font-size: 24px;
min-width: 56px;
padding: 4px 8px;
}
.delivery-range {
font-size: 17px;
padding: 10px 14px;
display: inline-block;
width: auto;
}
.delivery-range strong {
font-size: 17px;
padding: 2px 12px;
}
.sub-message {
font-size: 14px;
padding: 6px 14px;
}
}
@media (max-width: 420px) {
.biji-box {
padding: 22px 12px 28px;
}
.biji-title {
font-size: 18px;
}
.countdown-highlight {
font-size: 18px;
padding: 6px 10px;
}
.countdown-highlight span {
font-size: 20px;
min-width: 44px;
padding: 2px 6px;
}
.delivery-range {
font-size: 15px;
padding: 8px 10px;
}
.delivery-range strong {
font-size: 15px;
padding: 2px 10px;
}
}
/* extra small screens */
@media (max-width: 360px) {
.biji-title .truck {
display: none;
}
.biji-box::before {
font-size: 22px;
top: -8px;
left: 8px;
}
.biji-box::after {
font-size: 20px;
bottom: -6px;
right: 8px;
}
}
</style>
</head>
<body>
<div class="biji-box">
<!-- decorative seed dots -->
<div class="seed-dots">
<span></span><span></span><span></span><span></span>
</div>
<!-- title -->
<h2 class="biji-title">
<span class="truck">🚚</span>
<span>Hurry, Your Order Awaits!</span>
</h2>
<!-- ========== LIQUID LOGIC (same as original, but fully responsive) ========== -->
{% assign now = 'now' | date: '%s' %}
{% assign end_of_day = 'now' | date: '%Y-%m-%d' | append: ' 23:59:59' | date: '%s' %}
{% assign seconds_left = end_of_day | minus: now %}
{% assign hours_left = seconds_left | divided_by: 3600 %}
{% assign minutes_left = seconds_left | modulo: 3600 | divided_by: 60 %}
{% assign today = 'now' | date: '%s' %}
{% assign delivery_start = today | plus: 345600 | date: '%d %B' %} <!-- +4 days -->
{% assign delivery_end = today | plus: 518400 | date: '%d %B' %} <!-- +5 days -->
<!-- live countdown display -->
<div class="countdown-highlight">
<span>{{ hours_left }}h {{ minutes_left }}m</span>
</div>
<!-- delivery window -->
<div class="delivery-range">
<strong>🚚</strong> {{ delivery_start }} <span style="font-weight:400; margin:0 4px;">→</span> {{ delivery_end }}
</div>
<!-- extra biji message -->
<p class="sub-message">
<i>🌱</i> Don't miss this fast-delivery window! <i>🌿</i>
</p>
<!-- small note (original style kept) -->
<p style="color:#5f4d39; font-size:13px; margin:16px 0 2px; opacity:0.8; letter-spacing:0.3px; border-top:1px solid #dccfc0; padding-top:14px; max-width:80%; margin-left:auto; margin-right:auto;">
⏳ order in the next <strong style="color:#2d1f14;">{{ hours_left }}h {{ minutes_left }}m</strong>
</p>
</div>
</body>
</html>
