Shopify Custom Liquid: Discount Coupon Bar

Introduction

A discount coupon bar is one of the simplest yet most effective ways to draw attention to promotions. Whether it’s free shipping, a seasonal offer, or a limited-time discount, this lightweight bar sits prominently on your page without being intrusive.

The design below uses HTML + CSS in a Shopify Custom Liquid block and is fully responsive across devices.

When to Use This

This custom header section lets you:

• Highlight time-sensitive offers (e.g., “Save €50 — Today Only”)

• Promote seasonal sales (e.g., “Holiday Sale, Free Shipping All Week”)

• Showcase bundle discounts (e.g., “Buy 2 Get 1 Free”)

• Encourage faster checkout with urgency-driven messages

Code (Custom Liquid + CSS)

<div class="coupon-bar">
  <span class="coupon-text">Limited 21% OFF</span>
</div>

<style>
  :root {
    --coupon-bg: #fdfdfd;
    --coupon-color: #1a1a1a;
    --coupon-border: #e0e0e0;
  }

  .coupon-bar {
    background-color: var(--coupon-bg);
    color: var(--coupon-color);
    border: 1px solid var(--coupon-border);
    border-radius: 12px;
    padding: 12px 18px;
    text-align: center;
    font-weight: 600;
    font-size: clamp(14px, 2vw, 16px);
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .coupon-text {
    display: inline-block;
  }
</style>

Preview

How to Use

1. Copy the code above.

2. Go to Shopify theme editor → Add Custom Liquid block.

3. Paste the code into the block.

4. Replace the sample text with your promo message.

5. Adjust background color, border, and max width as needed.

Customizable Parameters

Parameter	Description	Default	Example Change
--coupon-bg	Background color	#fdfdfd	#f5f5f5
--coupon-color	Text color	#1a1a1a	#333333
--coupon-border	Border color	#e0e0e0	#ff6f61 (accent)
font-size	Text size	clamp(14px, 2vw, 16px)	18px
max-width	Container width	800px	100% (full width)

Pro Tips

• Add urgency words like “Ending Soon”, “Today Only”, or “Limited Stock” to drive conversions.

• Use emojis (🔥, 🎉, 🚚) to grab attention.

• Rotate offers by season to keep content fresh and engaging.

• Combine with Shopify discount codes for a seamless checkout flow.