Shopify Custom Liquid: Product Price with Strikethrough + Discount Badge

Introduction

Discount badges catch the eye instantly. By combining a strikethrough old price, a new discounted price, and a percentage-off badge, you can make promotions more persuasive. This setup is especially effective for seasonal campaigns like Black Friday, Christmas sales, or limited-time offers.

When to Use This

• During seasonal promotions (e.g., Black Friday, Christmas, Mid-Year Sale)

• For products with high markdowns that need visibility

• To emphasize urgency in clearance or flash sales

• When you want a visual badge that boosts click-through rate

Code (Custom Liquid + CSS)

<style>
  /* Price wrapper */
  .custom-price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
  }

  /* Old price with strikethrough */
  .custom-old-price {
    color: #999;
    text-decoration: line-through;
  }

  /* New price highlight */
  .custom-new-price {
    color: #111;
    font-weight: 600;
  }

  /* Discount badge */
  .discount-badge {
    background-color: #e53935; /* red by default */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
  }

  @media (max-width: 768px) {
    .custom-price-wrapper {
      font-size: 16px;
    }
    .discount-badge {
      font-size: 12px;
      padding: 3px 8px;
    }
  }
</style>

<div class="custom-price-wrapper">
  <span class="custom-old-price">€699,00</span>
  <span class="custom-new-price">€549,00</span>
  <span class="discount-badge">-20%</span>
</div>

Preview

How to Use

1. Copy the HTML & CSS code above.

2. Paste it into a Custom Liquid block inside your Shopify theme editor.

3. Replace the values inside <span>:

a. .custom-old-price → Original price

b. .custom-new-price → Discounted price

c. .discount-badge → Adjust percentage (e.g., “-15%”)

4. Customize colors, font sizes, and badge styles to match your brand.

5. Save and preview in your store.

Customizable parameters

Parameter	Description	Default	Example Change
background-color in .discount-badge	Badge color	#e53935 (red)	#008000 (green)
border-radius	Badge shape	6px	50% (pill shape)
font-size	Badge text size	14px	18px
Badge text	Discount percentage	“-20%”	“Save €150”
Parameter	Description	Default	Example Change

Pro Tip:

• Use percentage badges (“-20%”) for sitewide campaigns and absolute savings (“Save €150”) for high-ticket items.

• Keep badge colors contrasting (e.g., red, orange, green) for maximum visibility.

• Pair this with a countdown timer to amplify urgency.

• Update badge dynamically with Shopify discounts or scripts for automation.