How to Add Animated Discount Badges to Your Shopify Fabric Theme - eCommerce Thesis

How to Add Animated Discount Badges to Your Shopify Fabric Theme

by Foysal

In this tutorial, I’ll show you how to enhance your Shopify product pages by adding animated discount badges that display savings percentages. This step-by-step guide will transform your static price displays into engaging, attention-grabbing elements.

Prerequisites

  • Shopify Fabric theme
  • Basic understanding of Shopify theme editor
  • Access to theme code files

Step 1: Locate the Price Snippet

First, navigate to your theme code editor:

  1. Go to Shopify Admin → Online Store → Themes
  2. Click Actions → Edit code
  3. Open Snippets folder → Find price.liquid

Before:

{%- liquid
  assign selected_variant = product_resource.selected_or_first_available_variant
  assign price = selected_variant.price
  assign compare_at_price = selected_variant.compare_at_price

  assign show_compare_price = false
  if compare_at_price > price
    assign show_compare_price = true
  endif
-%}

After:

{%- liquid
  assign selected_variant = product_resource.selected_or_first_available_variant
  assign price = selected_variant.price
  assign compare_at_price = selected_variant.compare_at_price

  assign show_compare_price = false
  if compare_at_price > price
    assign show_compare_price = true
    # Calculate savings percentage
    assign savings = compare_at_price | minus: price
    assign savings_percentage = savings | times: 100.0 | divided_by: compare_at_price | round
  endif
-%}

Step 2: Update the HTML Structure

Locate the price display section in your price.liquid file:

Before:

{% if show_compare_price %}
  <span role="group">
    <span class="visually-hidden">{{ 'content.price_sale' | t }}&nbsp;</span>
    <span class="price">{{ price | default: '&nbsp;' }}</span>
  </span>
{% else %}
  <span class="price">{{ price | default: '&nbsp;' }}</span>
{% endif %}

After:

{% if show_compare_price %}
  <span class="price-group sale-price-group" role="group">
    <span class="visually-hidden">{{ 'content.price_sale' | t }}&nbsp;</span>
    <span class="price sale-price">{{ price | default: '&nbsp;' }}</span>
    
    {% comment %} Savings badge {% endcomment %}
    <span class="savings-badge">
      Save {{ savings_percentage }}%
    </span>
  </span>
{% else %}
  <span class="price regular-price">{{ price | default: '&nbsp;' }}</span>
{% endif %}

Step 3: Add Base CSS Styles

Add these base styles to your price.liquid file or theme CSS:

.price-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sale-price-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.compare-at-price {
  color: #6B7280;
  font-size: 0.95em;
  text-decoration: line-through;
}

.sale-price {
  color: #DC2626;
  font-size: 1.2em;
  font-weight: bold;
}

.savings-badge {
  background: #DC2626;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}

Step 4: Add Pulse Animation

Create a gentle pulsing effect to draw attention:

.savings-badge {
  /* Previous styles */
  animation: pulse 2s infinite;
  transform-origin: center;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

Step 5: Add Bounce Animation

Add subtle movement to make the badge feel alive:

.savings-badge {
  /* Previous styles */
  animation: pulse 2s infinite, bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

Step 6: Add Entry Animation

Make the badge slide in when the page loads:

.savings-badge {
  /* Previous styles */
  animation: pulse 2s infinite, bounce 1.5s infinite, slideIn 0.5s ease-out;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

Step 7: Add Hover Effects

Enhance interactivity with hover animations:

.savings-badge:hover {
  animation: shake 0.5s ease-in-out, glow 1s ease-in-out;
  background: linear-gradient(45deg, #DC2626, #EF4444);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.6);
  }
  50% {
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.9);
  }
  100% {
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.6);
  }
}

Step 8: Add Sparkle Effect

Create a premium shimmer effect:

.savings-badge {
  position: relative;
  overflow: hidden;
}

.savings-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: sparkle 3s infinite linear;
}

@keyframes sparkle {
  0% {
    transform: rotate(45deg) translateX(-100%);
  }
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

Step 9: Add Accessibility Features

Ensure your animations respect user preferences:

@media (prefers-reduced-motion: reduce) {
  .savings-badge {
    animation: none;
  }
  .savings-badge:hover {
    animation: none;
    transform: none;
  }
  .savings-badge::before {
    animation: none;
    display: none;
  }
}

Step 10: Mobile Optimization

Optimize animations for mobile devices:

@media (max-width: 768px) {
  .savings-badge {
    font-size: 0.75em;
    padding: 3px 6px;
    animation: pulse-mobile 2s infinite, bounce-mobile 1.5s infinite, slideIn 0.5s ease-out;
  }

  @keyframes pulse-mobile {
    0% {
      box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
    }
    70% {
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
  }

  @keyframes bounce-mobile {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-2px);
    }
    60% {
      transform: translateY(-1px);
    }
  }
}

Testing Your Implementation

  1. Test with discounted products: Create a test product with compare-at price
  2. Check different devices: Ensure animations work on mobile and desktop
  3. Verify accessibility: Test with reduced motion preferences
  4. Performance check: Ensure animations are smooth and not janky

Customization Options

You can customize the animations by:

  • Changing animation durations
  • Modifying colors to match your brand
  • Adjusting bounce heights and pulse sizes
  • Enabling/disabling specific animations

Final Result

Your discount badges will now feature:

  • ✅ Automatic savings percentage calculation
  • ✅ Eye-catching pulse animations
  • ✅ Subtle bounce effects
  • ✅ Smooth entry animations
  • ✅ Interactive hover states
  • ✅ Premium sparkle effects
  • ✅ Mobile-responsive design
  • ✅ Accessibility compliance

This enhancement will significantly improve your product page conversions by making discounts more noticeable and engaging for your customers!

Pro Tip: Start with subtle animations and test different variations to see what works best for your audience. Too much motion can be distracting, while the right amount can significantly boost conversions.