If you run a Shopify store, you probably offer discount codes to attract customers and increase sales. But here’s the problem—by default, many Shopify themes only allow customers to enter their discount code at checkout, not directly on the cart page.
In this guide, you’ll learn:
- Why it’s important to add a discount code box on the cart page.
- The benefits it brings to your store.
- How to easily add it using free code (plus a video tutorial).
Why Show the Discount Code Box on the Cart Page?
When customers reach the cart page, they’re deciding whether to complete the purchase. If they can see where to apply their coupon early, they feel more confident about the deal they’re getting.
Instead of waiting until checkout, showing the discount code box upfront improves transparency and reduces cart abandonment.
Benefits of Adding Discount Code on the Cart Page
- Boosts Conversions
Customers are more likely to complete their purchase when they can instantly see their discount applied before checkout. - Builds Trust
Shoppers feel reassured knowing they can use their coupon right away, without worrying about missing out. - Reduces Cart Abandonment
Many customers leave if they can’t find where to enter their discount code. Adding it early helps keep them engaged. - Improves User Experience
A simple, visible coupon box makes the buying process smoother and faster. - Encourages Repeat Purchases
Customers who have a positive buying experience are more likely to return for future deals.
How to Add Discount Code Box on Shopify Cart Page (Free Code)
I’ve created a simple, copy-and-paste code that will add a functional discount code box directly on your Shopify cart page.
📌 Steps:
- Go to your Shopify Admin → Online Store → Themes.
- Click Edit Code on your active theme.
- Find the cart template file (
cart.liquidormain-cart-items.liquid). - Paste the free code where you want the discount box to appear.
- Save your changes.
💡 Don’t worry if you’re not a coding expert—just follow the steps in my video tutorial below.
🎥 Watch the Step-by-Step Video
I’ve also recorded a full video tutorial showing exactly where and how to paste the code.
[Embed your video here]
Final Thoughts
Adding a discount code box on your Shopify cart page is a simple but powerful way to increase sales, build customer trust, and improve the shopping experience. And the best part? You can do it for free in just a few minutes.
💬 Have questions?
Drop your comments below or contact me—I’ll be happy to help.
{% comment %}
<!-- Premium Cart Discount Widget -->
<!-- Designed for Foysal Ahmed - eCommerce Thesis -->
<!-- Advanced Features: Multi-tier discounts, progress bar, animations, more customization -->
{% endcomment %}
{% if section.settings.enable_widget %}
<div class="foysal-discount-widget" id="foysal-discount-widget-{{ section.id }}"
style="display: {% if cart.empty? or cart.total_price < section.settings.cart_threshold %}none{% else %}block{% endif %};"
data-threshold="{{ section.settings.cart_threshold }}"
data-cart-total="{{ cart.total_price }}"
data-next-tier="0">
<!-- Main Discount Card -->
<div class="foysal-discount-card">
<!-- Icon with animated percentage -->
<div class="foysal-discount-icon">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" class="foysal-icon-svg">
<circle cx="28" cy="28" r="28" fill="var(--foysal-icon-bg-{{ section.id }})"/>
<circle cx="28" cy="28" r="16" fill="var(--foysal-icon-inner-{{ section.id }})"/>
<text x="28" y="35" text-anchor="middle" fill="var(--foysal-icon-text-{{ section.id }})"
font-size="20" font-weight="bold" class="foysal-percentage-text">%</text>
</svg>
{% if section.settings.show_sparkles %}
<div class="foysal-sparkle-container">
<div class="foysal-sparkle"></div>
<div class="foysal-sparkle"></div>
<div class="foysal-sparkle"></div>
</div>
{% endif %}
</div>
<!-- Content Area -->
<div class="foysal-discount-content">
<!-- Title with optional animated confetti -->
<div class="foysal-title-wrapper">
<h3 class="foysal-discount-title">{{ section.settings.main_title }}</h3>
{% if section.settings.show_confetti %}
<button class="foysal-confetti-btn" aria-label="Celebrate">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M5.636 5.636a1 1 0 0 1 1.414 0L12 10.586l4.95-4.95a1 1 0 1 1 1.414 1.414L13.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 0 1-1.414-1.414L10.586 12 5.636 7.05a1 1 0 0 1 0-1.414z"/>
</svg>
</button>
{% endif %}
</div>
<!-- Subtitle with optional dynamic amount -->
<p class="foysal-discount-subtitle">
{% if section.settings.show_dynamic_amount %}
{% assign amount_left = section.settings.next_tier_threshold | minus: cart.total_price %}
{% if amount_left > 0 %}
{{ section.settings.subtitle | replace: '[amount]', amount_left | money }}
{% else %}
{{ section.settings.subtitle_achieved | default: "You've unlocked all discounts!" }}
{% endif %}
{% else %}
{{ section.settings.subtitle }}
{% endif %}
</p>
<!-- Progress bar for next tier -->
{% if section.settings.show_progress_bar and section.settings.next_tier_threshold > section.settings.cart_threshold %}
<div class="foysal-progress-container">
<div class="foysal-progress-bar">
<div class="foysal-progress-fill"
style="width: {% if cart.total_price >= section.settings.next_tier_threshold %}100%
{% else %}{{ cart.total_price | times: 100 | divided_by: section.settings.next_tier_threshold }}%
{% endif %};"></div>
</div>
<div class="foysal-progress-labels">
<span>{{ cart.total_price | money }}</span>
<span>{{ section.settings.next_tier_threshold | money }}</span>
</div>
</div>
{% endif %}
<!-- Discount Codes -->
<div class="foysal-discount-codes">
{% for i in (1..5) %}
{% assign enable_key = 'enable_discount_' | append: i %}
{% if section.settings[enable_key] %}
{% assign code_key = 'discount_code_' | append: i %}
{% assign desc_key = 'discount_desc_' | append: i %}
{% assign min_key = 'discount_min_' | append: i %}
{% assign active_key = 'discount_active_' | append: i %}
<div class="foysal-code-item {% if section.settings[min_key] > 0 and cart.total_price < section.settings[min_key] %}foysal-code-disabled{% endif %}"
data-min-amount="{{ section.settings[min_key] }}">
{% if section.settings.show_copy_buttons %}
<button class="foysal-copy-btn" data-code="{{ section.settings[code_key] }}"
aria-label="Copy discount code {{ section.settings[code_key] }}"
{% if section.settings[min_key] > 0 and cart.total_price < section.settings[min_key] %}disabled{% endif %}>
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
<path d="M4 2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2z" fill="none" stroke="currentColor" stroke-width="1.5"/>
<path d="M2 6h2V4a2 2 0 012-2h6v2" fill="none" stroke="currentColor" stroke-width="1.5"/>
</svg>
</button>
{% endif %}
<span class="foysal-code">{{ section.settings[code_key] }}</span>
<span class="foysal-code-desc">
{{ section.settings[desc_key] }}
{% if section.settings[min_key] > 0 %}
<span class="foysal-min-amount">(Min. {{ section.settings[min_key] | money }})</span>
{% endif %}
</span>
{% if section.settings.show_apply_buttons %}
<button class="foysal-apply-btn" data-code="{{ section.settings[code_key] }}"
{% if section.settings[min_key] > 0 and cart.total_price < section.settings[min_key] %}disabled{% endif %}>
Apply
</button>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<!-- Timer for limited offers -->
{% if section.settings.show_timer %}
<div class="foysal-timer-container">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
<path d="M13 7h-2v6h6v-2h-4z"/>
</svg>
<span class="foysal-timer-text">Offer ends in <span class="foysal-timer" data-end-time="{{ section.settings.timer_end_time }}">00:00:00</span></span>
</div>
{% endif %}
</div>
<!-- Close button -->
{% if section.settings.show_close_button %}
<button class="foysal-close-btn" aria-label="Close discount widget">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</button>
{% endif %}
</div>
<!-- Upsell for next tier -->
{% if section.settings.show_next_tier_upsell and section.settings.next_tier_threshold > cart.total_price %}
{% assign amount_left = section.settings.next_tier_threshold | minus: cart.total_price %}
<div class="foysal-upsell-card">
<div class="foysal-upsell-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"/>
</svg>
</div>
<div class="foysal-upsell-content">
<p>Add {{ amount_left | money }} more to unlock <strong>{{ section.settings.next_tier_discount }}</strong> discount!</p>
</div>
<button class="foysal-upsell-close" aria-label="Close upsell">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</button>
</div>
{% endif %}
</div>
{% endif %}
<style>
:root {
/* Base Colors */
--foysal-card-bg-{{ section.id }}: {{ section.settings.card_background_color }};
--foysal-icon-bg-{{ section.id }}: {{ section.settings.icon_background_color }};
--foysal-icon-inner-{{ section.id }}: {{ section.settings.icon_inner_color }};
--foysal-icon-text-{{ section.id }}: {{ section.settings.icon_text_color }};
--foysal-title-color-{{ section.id }}: {{ section.settings.title_color }};
--foysal-subtitle-color-{{ section.id }}: {{ section.settings.subtitle_color }};
--foysal-code-bg-{{ section.id }}: {{ section.settings.code_background_color }};
--foysal-code-text-{{ section.id }}: {{ section.settings.code_text_color }};
--foysal-desc-color-{{ section.id }}: {{ section.settings.description_color }};
--foysal-copy-btn-bg-{{ section.id }}: {{ section.settings.copy_button_color }};
--foysal-progress-bg-{{ section.id }}: {{ section.settings.progress_background_color }};
--foysal-progress-fill-{{ section.id }}: {{ section.settings.progress_fill_color }};
--foysal-timer-color-{{ section.id }}: {{ section.settings.timer_color }};
--foysal-apply-btn-bg-{{ section.id }}: {{ section.settings.apply_button_color }};
--foysal-apply-btn-text-{{ section.id }}: {{ section.settings.apply_button_text_color }};
--foysal-upsell-bg-{{ section.id }}: {{ section.settings.upsell_background_color }};
--foysal-upsell-text-{{ section.id }}: {{ section.settings.upsell_text_color }};
/* Animation Settings */
--foysal-animation-duration: {{ section.settings.animation_duration }}ms;
--foysal-sparkle-color: {{ section.settings.sparkle_color }};
}
/* Main Widget Container */
#foysal-discount-widget-{{ section.id }} {
margin: 24px 0;
width: 100%;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
#foysal-discount-widget-{{ section.id }}.foysal-visible {
opacity: 1;
transform: translateY(0);
}
/* Discount Card */
#foysal-discount-widget-{{ section.id }} .foysal-discount-card {
background-color: var(--foysal-card-bg-{{ section.id }});
border-radius: 16px;
padding: 24px;
display: flex;
align-items: flex-start;
gap: 20px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Discount Icon */
#foysal-discount-widget-{{ section.id }} .foysal-discount-icon {
background-color: var(--foysal-icon-bg-{{ section.id }});
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--foysal-icon-inner-{{ section.id }});
position: relative;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Sparkle Animation */
#foysal-discount-widget-{{ section.id }} .foysal-sparkle-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
#foysal-discount-widget-{{ section.id }} .foysal-sparkle {
position: absolute;
background-color: var(--foysal-sparkle-color);
border-radius: 50%;
opacity: 0;
animation: foysal-sparkle var(--foysal-animation-duration) infinite;
}
#foysal-discount-widget-{{ section.id }} .foysal-sparkle:nth-child(1) {
width: 6px;
height: 6px;
top: 10%;
left: 20%;
animation-delay: 0s;
}
#foysal-discount-widget-{{ section.id }} .foysal-sparkle:nth-child(2) {
width: 4px;
height: 4px;
top: 60%;
left: 70%;
animation-delay: 0.4s;
}
#foysal-discount-widget-{{ section.id }} .foysal-sparkle:nth-child(3) {
width: 5px;
height: 5px;
top: 30%;
left: 50%;
animation-delay: 0.8s;
}
@keyframes foysal-sparkle {
0% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(0.5); }
}
/* Content Area */
#foysal-discount-widget-{{ section.id }} .foysal-discount-content {
flex: 1;
min-width: 0;
}
/* Title Styles */
#foysal-discount-widget-{{ section.id }} .foysal-title-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-title {
font-family: var(--font-heading-family);
font-size: 1.375rem;
font-weight: 700;
color: var(--foysal-title-color-{{ section.id }});
margin: 0;
line-height: 1.3;
letter-spacing: -0.5px;
}
#foysal-discount-widget-{{ section.id }} .foysal-confetti-btn {
background: none;
border: none;
color: var(--foysal-icon-bg-{{ section.id }});
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: transform 0.2s ease;
}
#foysal-discount-widget-{{ section.id }} .foysal-confetti-btn:hover {
transform: scale(1.1);
}
/* Subtitle Styles */
#foysal-discount-widget-{{ section.id }} .foysal-discount-subtitle {
font-family: var(--font-body-family);
font-size: 0.9375rem;
color: var(--foysal-subtitle-color-{{ section.id }});
margin: 0 0 16px 0;
line-height: 1.5;
}
/* Progress Bar Styles */
#foysal-discount-widget-{{ section.id }} .foysal-progress-container {
margin: 12px 0 16px;
}
#foysal-discount-widget-{{ section.id }} .foysal-progress-bar {
height: 6px;
background-color: var(--foysal-progress-bg-{{ section.id }});
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
#foysal-discount-widget-{{ section.id }} .foysal-progress-fill {
height: 100%;
background-color: var(--foysal-progress-fill-{{ section.id }});
border-radius: 3px;
transition: width 0.5s ease;
}
#foysal-discount-widget-{{ section.id }} .foysal-progress-labels {
display: flex;
justify-content: space-between;
font-family: var(--font-body-family);
font-size: 0.75rem;
color: var(--foysal-subtitle-color-{{ section.id }});
}
/* Discount Codes */
#foysal-discount-widget-{{ section.id }} .foysal-discount-codes {
display: flex;
flex-direction: column;
gap: 10px;
}
#foysal-discount-widget-{{ section.id }} .foysal-code-item {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 8px 12px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease;
}
#foysal-discount-widget-{{ section.id }} .foysal-code-item:hover {
background-color: rgba(0, 0, 0, 0.15);
}
#foysal-discount-widget-{{ section.id }} .foysal-code-item.foysal-code-disabled {
opacity: 0.6;
pointer-events: none;
}
#foysal-discount-widget-{{ section.id }} .foysal-code {
font-family: var(--font-body-family);
background-color: var(--foysal-code-bg-{{ section.id }});
color: var(--foysal-code-text-{{ section.id }});
padding: 6px 10px;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.5px;
border: 1px dashed rgba(255, 255, 255, 0.2);
}
#foysal-discount-widget-{{ section.id }} .foysal-code-desc {
font-family: var(--font-body-family);
font-size: 0.8125rem;
color: var(--foysal-desc-color-{{ section.id }});
flex: 1;
min-width: 0;
}
#foysal-discount-widget-{{ section.id }} .foysal-min-amount {
font-size: 0.75rem;
opacity: 0.8;
margin-left: 4px;
}
/* Copy Button */
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn {
background-color: var(--foysal-copy-btn-bg-{{ section.id }});
color: var(--foysal-icon-inner-{{ section.id }});
border: none;
border-radius: 6px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
position: relative;
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn:hover {
transform: scale(1.05);
opacity: 0.9;
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn:hover::before {
opacity: 1;
visibility: visible;
transform: translate(-50%, -5px);
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn:hover::after {
opacity: 1;
visibility: visible;
transform: translate(-50%, -5px);
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--foysal-card-bg-{{ section.id }});
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 1001;
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn::after {
content: 'Copy Discount Code';
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-50%, -6px);
background-color: var(--foysal-card-bg-{{ section.id }});
color: var(--foysal-title-color-{{ section.id }});
padding: 6px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 1000;
font-family: var(--font-body-family);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn:focus {
outline: 2px solid var(--foysal-icon-inner-{{ section.id }});
outline-offset: 2px;
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn:active {
transform: scale(0.95);
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn.copied::after {
content: attr(data-copied-text);
opacity: 1;
visibility: visible;
transform: translate(-50%, -5px);
background-color: var(--foysal-copy-btn-bg-{{ section.id }});
color: var(--foysal-icon-inner-{{ section.id }});
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn.copied::before {
opacity: 1;
visibility: visible;
transform: translate(-50%, -5px);
border-top-color: var(--foysal-copy-btn-bg-{{ section.id }});
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn.copied:hover::after {
content: attr(data-copied-text);
}
/* Apply Button */
#foysal-discount-widget-{{ section.id }} .foysal-apply-btn {
background-color: var(--foysal-apply-btn-bg-{{ section.id }});
color: var(--foysal-apply-btn-text-{{ section.id }});
border: none;
border-radius: 6px;
padding: 6px 12px;
font-family: var(--font-body-family);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
margin-left: auto;
}
#foysal-discount-widget-{{ section.id }} .foysal-apply-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
#foysal-discount-widget-{{ section.id }} .foysal-apply-btn:active {
transform: translateY(0);
}
#foysal-discount-widget-{{ section.id }} .foysal-apply-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Timer Styles */
#foysal-discount-widget-{{ section.id }} .foysal-timer-container {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
#foysal-discount-widget-{{ section.id }} .foysal-timer-text {
font-family: var(--font-body-family);
font-size: 0.8125rem;
color: var(--foysal-timer-color-{{ section.id }});
}
#foysal-discount-widget-{{ section.id }} .foysal-timer {
font-weight: 700;
}
/* Close Button */
#foysal-discount-widget-{{ section.id }} .foysal-close-btn {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
color: var(--foysal-subtitle-color-{{ section.id }});
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
}
#foysal-discount-widget-{{ section.id }} .foysal-close-btn:hover {
color: var(--foysal-title-color-{{ section.id }});
background-color: rgba(255, 255, 255, 0.1);
}
/* Upsell Card */
#foysal-discount-widget-{{ section.id }} .foysal-upsell-card {
background-color: var(--foysal-upsell-bg-{{ section.id }});
border-radius: 12px;
padding: 14px 16px;
margin-top: 12px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
animation: foysal-pulse 2s infinite;
}
@keyframes foysal-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.01); }
100% { transform: scale(1); }
}
#foysal-discount-widget-{{ section.id }} .foysal-upsell-icon {
color: var(--foysal-icon-bg-{{ section.id }});
flex-shrink: 0;
}
#foysal-discount-widget-{{ section.id }} .foysal-upsell-content {
flex: 1;
min-width: 0;
}
#foysal-discount-widget-{{ section.id }} .foysal-upsell-content p {
font-family: var(--font-body-family);
font-size: 0.8125rem;
color: var(--foysal-upsell-text-{{ section.id }});
margin: 0;
line-height: 1.4;
}
#foysal-discount-widget-{{ section.id }} .foysal-upsell-content strong {
color: var(--foysal-icon-bg-{{ section.id }});
}
#foysal-discount-widget-{{ section.id }} .foysal-upsell-close {
background: none;
border: none;
color: var(--foysal-upsell-text-{{ section.id }});
opacity: 0.6;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.2s ease;
flex-shrink: 0;
}
#foysal-discount-widget-{{ section.id }} .foysal-upsell-close:hover {
opacity: 1;
}
/* Confetti Effect */
.foysal-confetti {
position: fixed;
width: 10px;
height: 10px;
background-color: var(--foysal-icon-bg-{{ section.id }});
opacity: 0;
z-index: 9999;
animation: foysal-confetti-fall 3s linear forwards;
}
@keyframes foysal-confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
/* Responsive Styles */
@media (max-width: 768px) {
#foysal-discount-widget-{{ section.id }} {
margin: 16px 0;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-card {
padding: 18px;
gap: 14px;
flex-direction: column;
align-items: flex-start;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-icon {
width: 44px;
height: 44px;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-title {
font-size: 1.25rem;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-subtitle {
font-size: 0.875rem;
margin-bottom: 12px;
}
#foysal-discount-widget-{{ section.id }} .foysal-code-item {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
#foysal-discount-widget-{{ section.id }} .foysal-code-item .foysal-code-desc {
flex-basis: calc(100% - 44px);
margin-left: 44px;
}
#foysal-discount-widget-{{ section.id }} .foysal-apply-btn {
margin-left: 0;
width: 100%;
margin-top: 4px;
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn::after {
font-size: 0.7rem;
padding: 4px 8px;
}
#foysal-discount-widget-{{ section.id }} .foysal-copy-btn::before {
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
}
@media (max-width: 480px) {
#foysal-discount-widget-{{ section.id }} .foysal-discount-card {
padding: 16px;
}
#foysal-discount-widget-{{ section.id }} .foysal-discount-title {
font-size: 1.125rem;
}
#foysal-discount-widget-{{ section.id }} .foysal-code {
font-size: 0.8125rem;
padding: 4px 8px;
}
#foysal-discount-widget-{{ section.id }} .foysal-code-desc {
font-size: 0.75rem;
}
#foysal-discount-widget-{{ section.id }} .foysal-min-amount {
display: block;
margin-left: 0;
margin-top: 2px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const widget = document.getElementById('foysal-discount-widget-{{ section.id }}');
const threshold = {{ section.settings.cart_threshold }};
const nextTierThreshold = {{ section.settings.next_tier_threshold }};
const upsellClosed = localStorage.getItem('foysal-upsell-closed-{{ section.id }}') === 'true';
// Initialize widget visibility
function initWidget() {
if (!widget) return;
// Show widget with animation
setTimeout(() => {
widget.classList.add('foysal-visible');
}, 300);
// Check cart total and update visibility
updateWidgetVisibility();
// Initialize copy buttons
initCopyButtons();
// Initialize apply buttons if enabled
{% if section.settings.show_apply_buttons %}
initApplyButtons();
{% endif %}
// Initialize close button if enabled
{% if section.settings.show_close_button %}
initCloseButton();
{% endif %}
// Initialize upsell close button if enabled
{% if section.settings.show_next_tier_upsell %}
if (!upsellClosed) {
initUpsellCloseButton();
}
{% endif %}
// Initialize confetti button if enabled
{% if section.settings.show_confetti %}
initConfettiButton();
{% endif %}
// Initialize countdown timer if enabled
{% if section.settings.show_timer %}
initCountdownTimer();
{% endif %}
}
// Update widget visibility based on cart total
function updateWidgetVisibility() {
if (!widget) return;
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
const cartTotal = cart.total_price;
const shouldShow = cart.item_count > 0 && cartTotal >= threshold;
widget.style.display = shouldShow ? 'block' : 'none';
widget.setAttribute('data-cart-total', cartTotal);
// Update progress bar if enabled
{% if section.settings.show_progress_bar %}
updateProgressBar(cartTotal);
{% endif %}
// Update disabled codes if min amounts are set
updateCodeAvailability(cartTotal);
// Show/hide upsell based on cart total
{% if section.settings.show_next_tier_upsell %}
updateUpsellVisibility(cartTotal);
{% endif %}
})
.catch(error => {
console.error('Error fetching cart:', error);
});
}
// Update progress bar fill
function updateProgressBar(cartTotal) {
const progressFill = widget.querySelector('.foysal-progress-fill');
if (!progressFill) return;
const progressPercentage = Math.min(100, (cartTotal / nextTierThreshold) * 100);
progressFill.style.width = `${progressPercentage}%`;
}
// Update code availability based on min amounts
function updateCodeAvailability(cartTotal) {
const codeItems = widget.querySelectorAll('.foysal-code-item');
if (!codeItems) return;
codeItems.forEach(item => {
const minAmount = parseInt(item.getAttribute('data-min-amount')) || 0;
if (minAmount > 0 && cartTotal < minAmount) {
item.classList.add('foysal-code-disabled');
const copyBtn = item.querySelector('.foysal-copy-btn');
const applyBtn = item.querySelector('.foysal-apply-btn');
if (copyBtn) copyBtn.disabled = true;
if (applyBtn) applyBtn.disabled = true;
} else {
item.classList.remove('foysal-code-disabled');
const copyBtn = item.querySelector('.foysal-copy-btn');
const applyBtn = item.querySelector('.foysal-apply-btn');
if (copyBtn) copyBtn.disabled = false;
if (applyBtn) applyBtn.disabled = false;
}
});
}
// Update upsell visibility
function updateUpsellVisibility(cartTotal) {
const upsellCard = widget.querySelector('.foysal-upsell-card');
if (!upsellCard) return;
if (cartTotal >= nextTierThreshold || upsellClosed) {
upsellCard.style.display = 'none';
} else {
upsellCard.style.display = 'flex';
}
}
// Initialize copy buttons functionality
function initCopyButtons() {
const copyButtons = widget.querySelectorAll('.foysal-copy-btn');
if (!copyButtons) return;
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const code = button.getAttribute('data-code');
copyToClipboard(code, button);
});
});
}
// Copy to clipboard function
function copyToClipboard(text, button) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(() => {
showCopyFeedback(button);
}).catch(() => {
fallbackCopy(text, button);
});
} else {
fallbackCopy(text, button);
}
}
// Fallback copy method for older browsers
function fallbackCopy(text, button) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
showCopyFeedback(button);
} catch (err) {
console.error('Copy failed:', err);
} finally {
document.body.removeChild(textArea);
}
}
// Show copy feedback animation
function showCopyFeedback(button) {
const originalHTML = button.innerHTML;
button.classList.add('copied');
button.setAttribute('data-copied-text', 'Copied!');
button.innerHTML = '<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>';
setTimeout(() => {
button.classList.remove('copied');
button.removeAttribute('data-copied-text');
button.innerHTML = originalHTML;
}, 2000);
}
// Initialize apply buttons functionality
function initApplyButtons() {
const applyButtons = widget.querySelectorAll('.foysal-apply-btn');
if (!applyButtons) return;
applyButtons.forEach(button => {
button.addEventListener('click', function() {
const code = button.getAttribute('data-code');
applyDiscountCode(code, button);
});
});
}
// Apply discount code function
function applyDiscountCode(code, button) {
if (!code) return;
// Show loading state
const originalText = button.textContent;
button.innerHTML = '<svg width="16" height="16" viewBox="0 0 38 38" stroke="currentColor" style="animation: foysal-rotate 1s linear infinite;"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></svg>';
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Check if discount is already applied
const isApplied = cart.discount_applications.some(d => d.title === code || d.code === code);
if (isApplied) {
showFeedback(button, 'Already applied', '#4CAF50');
setTimeout(() => {
button.textContent = originalText;
}, 1500);
return;
}
// Apply the discount
fetch('/discount/' + code)
.then(response => {
if (response.ok) {
showFeedback(button, 'Applied!', '#4CAF50');
document.dispatchEvent(new CustomEvent('cart:refresh'));
} else {
showFeedback(button, 'Invalid code', '#F44336');
}
setTimeout(() => {
button.textContent = originalText;
}, 1500);
})
.catch(error => {
console.error('Error applying discount:', error);
showFeedback(button, 'Error', '#F44336');
setTimeout(() => {
button.textContent = originalText;
}, 1500);
});
})
.catch(error => {
console.error('Error fetching cart:', error);
button.textContent = originalText;
});
}
// Show feedback for apply button
function showFeedback(button, text, color) {
const feedback = document.createElement('span');
feedback.textContent = text;
feedback.style.color = color;
feedback.style.position = 'absolute';
feedback.style.background = 'white';
feedback.style.padding = '2px 6px';
feedback.style.borderRadius = '4px';
feedback.style.fontSize = '0.75rem';
feedback.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
feedback.style.top = '-30px';
feedback.style.left = '50%';
feedback.style.transform = 'translateX(-50%)';
feedback.style.whiteSpace = 'nowrap';
feedback.style.opacity = '0';
feedback.style.transition = 'opacity 0.2s, transform 0.2s';
button.style.position = 'relative';
button.appendChild(feedback);
setTimeout(() => {
feedback.style.opacity = '1';
feedback.style.transform = 'translateX(-50%) translateY(-5px)';
}, 10);
setTimeout(() => {
feedback.style.opacity = '0';
feedback.style.transform = 'translateX(-50%) translateY(-10px)';
setTimeout(() => {
button.removeChild(feedback);
}, 200);
}, 1500);
}
// Initialize close button functionality
function initCloseButton() {
const closeButton = widget.querySelector('.foysal-close-btn');
if (!closeButton) return;
closeButton.addEventListener('click', function() {
widget.style.opacity = '0';
widget.style.transform = 'translateY(20px)';
setTimeout(() => {
widget.style.display = 'none';
}, 500);
});
}
// Initialize upsell close button functionality
function initUpsellCloseButton() {
const upsellCloseButton = widget.querySelector('.foysal-upsell-close');
if (!upsellCloseButton) return;
upsellCloseButton.addEventListener('click', function() {
const upsellCard = widget.querySelector('.foysal-upsell-card');
if (upsellCard) {
upsellCard.style.opacity = '0';
upsellCard.style.transform = 'translateY(10px)';
setTimeout(() => {
upsellCard.style.display = 'none';
}, 300);
localStorage.setItem('foysal-upsell-closed-{{ section.id }}', 'true');
}
});
}
// Initialize confetti button functionality
function initConfettiButton() {
const confettiButton = widget.querySelector('.foysal-confetti-btn');
if (!confettiButton) return;
confettiButton.addEventListener('click', function() {
createConfetti();
});
}
// Create confetti effect
function createConfetti() {
const colors = [
'var(--foysal-icon-bg-{{ section.id }})',
'var(--foysal-icon-inner-{{ section.id }})',
'var(--foysal-copy-btn-bg-{{ section.id }})',
'var(--foysal-apply-btn-bg-{{ section.id }})',
'#FFD700',
'#FF6B6B',
'#4ECDC4'
];
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'foysal-confetti';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.width = Math.random() * 10 + 5 + 'px';
confetti.style.height = Math.random() * 10 + 5 + 'px';
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
document.body.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, 3000);
}
}
// Initialize countdown timer
function initCountdownTimer() {
const timerElement = widget.querySelector('.foysal-timer');
if (!timerElement) return;
const endTime = timerElement.getAttribute('data-end-time');
if (!endTime) return;
// Parse end time (format: "YYYY-MM-DD HH:MM:SS")
const endDate = new Date(endTime.replace(/-/g, '/')).getTime();
// Update timer every second
const timerInterval = setInterval(() => {
const now = new Date().getTime();
const distance = endDate - now;
if (distance < 0) {
clearInterval(timerInterval);
timerElement.textContent = '00:00:00';
return;
}
// Calculate hours, minutes, seconds
const hours = Math.floor(distance / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
timerElement.textContent =
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}, 1000);
}
// Listen for cart updates
document.addEventListener('cart:updated', function(event) {
if (event.detail && event.detail.cart && event.detail.cart.total_price !== undefined) {
updateWidgetVisibility();
}
});
const cartUpdateEvents = ['cart:refresh', 'cart:change', 'cart:build'];
cartUpdateEvents.forEach(eventName => {
document.addEventListener(eventName, function(event) {
if (event.detail && event.detail.cart && event.detail.cart.total_price !== undefined) {
updateWidgetVisibility();
}
});
});
// Initialize the widget
initWidget();
// Animation for rotating spinner
const style = document.createElement('style');
style.textContent = `
@keyframes foysal-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
`;
document.head.appendChild(style);
});
</script>
{% schema %}
{
"name": "Premium Discount Widget",
"tag": "section",
"class": "section",
"settings": [
{
"type": "header",
"content": "General Settings"
},
{
"type": "checkbox",
"id": "enable_widget",
"label": "Enable discount widget",
"default": true
},
{
"type": "number",
"id": "cart_threshold",
"label": "Cart minimum amount (cents)",
"info": "Widget appears when cart reaches this amount. 10000 = $100",
"default": 10000
},
{
"type": "checkbox",
"id": "show_copy_buttons",
"label": "Show copy buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_apply_buttons",
"label": "Show apply buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_close_button",
"label": "Show close button",
"default": true
},
{
"type": "checkbox",
"id": "show_confetti",
"label": "Show confetti button",
"default": true
},
{
"type": "checkbox",
"id": "show_sparkles",
"label": "Show sparkle animation",
"default": true
},
{
"type": "range",
"id": "animation_duration",
"label": "Animation duration (ms)",
"min": 1000,
"max": 5000,
"step": 100,
"default": 2000
},
{
"type": "header",
"content": "Content Settings"
},
{
"type": "text",
"id": "main_title",
"label": "Main title",
"default": "Exclusive Discounts Available!"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Add [amount] more to unlock next tier"
},
{
"type": "text",
"id": "subtitle_achieved",
"label": "Subtitle (all tiers achieved)",
"default": "You've unlocked all discounts!"
},
{
"type": "checkbox",
"id": "show_dynamic_amount",
"label": "Show dynamic amount in subtitle",
"default": true
},
{
"type": "checkbox",
"id": "show_progress_bar",
"label": "Show progress bar",
"default": true
},
{
"type": "number",
"id": "next_tier_threshold",
"label": "Next tier threshold (cents)",
"info": "Amount needed for next discount tier",
"default": 15000
},
{
"type": "text",
"id": "next_tier_discount",
"label": "Next tier discount text",
"default": "15%"
},
{
"type": "checkbox",
"id": "show_next_tier_upsell",
"label": "Show next tier upsell",
"default": true
},
{
"type": "checkbox",
"id": "show_timer",
"label": "Show countdown timer",
"default": true
},
{
"type": "text",
"id": "timer_end_time",
"label": "Timer end time",
"info": "Format: YYYY-MM-DD HH:MM:SS",
"default": "2023-12-31 23:59:59"
},
{
"type": "header",
"content": "Discount Codes"
},
{
"type": "paragraph",
"content": "Configure up to 5 discount codes with minimum amounts"
},
{
"type": "header",
"content": "Discount Code 1"
},
{
"type": "checkbox",
"id": "enable_discount_1",
"label": "Enable discount 1",
"default": true
},
{
"type": "text",
"id": "discount_code_1",
"label": "Discount code 1",
"default": "SAVE10"
},
{
"type": "text",
"id": "discount_desc_1",
"label": "Description 1",
"default": "10% off your order"
},
{
"type": "number",
"id": "discount_min_1",
"label": "Minimum amount (cents)",
"default": 0,
"info": "0 = no minimum"
},
{
"type": "header",
"content": "Discount Code 2"
},
{
"type": "checkbox",
"id": "enable_discount_2",
"label": "Enable discount 2",
"default": true
},
{
"type": "text",
"id": "discount_code_2",
"label": "Discount code 2",
"default": "FREESHIP"
},
{
"type": "text",
"id": "discount_desc_2",
"label": "Description 2",
"default": "Free shipping"
},
{
"type": "number",
"id": "discount_min_2",
"label": "Minimum amount (cents)",
"default": 15000
},
{
"type": "header",
"content": "Discount Code 3"
},
{
"type": "checkbox",
"id": "enable_discount_3",
"label": "Enable discount 3",
"default": true
},
{
"type": "text",
"id": "discount_code_3",
"label": "Discount code 3",
"default": "WELCOME20"
},
{
"type": "text",
"id": "discount_desc_3",
"label": "Description 3",
"default": "20% off for new customers"
},
{
"type": "number",
"id": "discount_min_3",
"label": "Minimum amount (cents)",
"default": 20000
},
{
"type": "header",
"content": "Discount Code 4"
},
{
"type": "checkbox",
"id": "enable_discount_4",
"label": "Enable discount 4",
"default": false
},
{
"type": "text",
"id": "discount_code_4",
"label": "Discount code 4",
"default": "BIGSAVE25"
},
{
"type": "text",
"id": "discount_desc_4",
"label": "Description 4",
"default": "25% off large orders"
},
{
"type": "number",
"id": "discount_min_4",
"label": "Minimum amount (cents)",
"default": 25000
},
{
"type": "header",
"content": "Discount Code 5"
},
{
"type": "checkbox",
"id": "enable_discount_5",
"label": "Enable discount 5",
"default": false
},
{
"type": "text",
"id": "discount_code_5",
"label": "Discount code 5",
"default": "VIP30"
},
{
"type": "text",
"id": "discount_desc_5",
"label": "Description 5",
"default": "30% off for VIP customers"
},
{
"type": "number",
"id": "discount_min_5",
"label": "Minimum amount (cents)",
"default": 50000
},
{
"type": "header",
"content": "Color Settings"
},
{
"type": "color",
"id": "card_background_color",
"label": "Card background",
"default": "#374151"
},
{
"type": "color",
"id": "icon_background_color",
"label": "Icon background",
"default": "#fbbf24"
},
{
"type": "color",
"id": "icon_inner_color",
"label": "Icon inner circle",
"default": "#374151"
},
{
"type": "color",
"id": "icon_text_color",
"label": "Icon text",
"default": "#fbbf24"
},
{
"type": "color",
"id": "title_color",
"label": "Title color",
"default": "#ffffff"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle color",
"default": "#9ca3af"
},
{
"type": "color",
"id": "code_background_color",
"label": "Code background",
"default": "#1f2937"
},
{
"type": "color",
"id": "code_text_color",
"label": "Code text",
"default": "#fbbf24"
},
{
"type": "color",
"id": "description_color",
"label": "Description color",
"default": "#d1d5db"
},
{
"type": "color",
"id": "copy_button_color",
"label": "Copy button background",
"default": "#fbbf24"
},
{
"type": "color",
"id": "progress_background_color",
"label": "Progress bar background",
"default": "#1f2937"
},
{
"type": "color",
"id": "progress_fill_color",
"label": "Progress bar fill",
"default": "#fbbf24"
},
{
"type": "color",
"id": "timer_color",
"label": "Timer color",
"default": "#fbbf24"
},
{
"type": "color",
"id": "apply_button_color",
"label": "Apply button background",
"default": "#10b981"
},
{
"type": "color",
"id": "apply_button_text_color",
"label": "Apply button text",
"default": "#ffffff"
},
{
"type": "color",
"id": "upsell_background_color",
"label": "Upsell background",
"default": "#1e40af"
},
{
"type": "color",
"id": "upsell_text_color",
"label": "Upsell text",
"default": "#ffffff"
},
{
"type": "color",
"id": "sparkle_color",
"label": "Sparkle color",
"default": "#ffffff"
}
],
"presets": [
{
"name": "Premium Discount Widget",
"settings": {
"enable_widget": true,
"cart_threshold": 10000,
"main_title": "Exclusive Discounts Available!",
"subtitle": "Add [amount] more to unlock next tier",
"enable_discount_1": true,
"discount_code_1": "SAVE10",
"discount_desc_1": "10% off your order",
"enable_discount_2": true,
"discount_code_2": "FREESHIP",
"discount_desc_2": "Free shipping",
"discount_min_2": 15000,
"enable_discount_3": true,
"discount_code_3": "WELCOME20",
"discount_desc_3": "20% off for new customers",
"discount_min_3": 20000
}
}
]
}
{% endschema %}