How to Add a Free Shipping Badge in Shopify Based on Product Price?

How to Add a Free Shipping Badge in Shopify Based on Product Price

Adding a Free Shipping badge to products is one of the easiest ways to increase conversions and improve user experience. Instead of manually tagging products, you can automatically display a badge when a product price exceeds a specific amount — for example, Free Shipping Above $150.

In this guide, you’ll learn how to dynamically show a free shipping label on product pages using simple Liquid code + CSS.

Why Use a Dynamic Free Shipping Badge?

  • Encourages higher cart value (customers add more to qualify)
  • Improves product page visibility
  • Creates urgency and value perception
  • Automates logic — no need to manually tag products

Step 1: Add Liquid Code for Free Shipping Badge

You need to insert a condition that checks product price and displays the badge if it exceeds your threshold (e.g. $150).

{% if product.price >= 15000 %}
  
+ Free Shipping
{% endif %}

Note: Shopify uses cents, so 15000 = $150.

Step 2: Find the Correct Product Liquid File

The file location depends on your Shopify theme. Common places include:

  • main-product.liquid
  • product-template.liquid
  • product.liquid

Open your theme files and locate where the price or Add to Cart button is displayed. Place the above Liquid code near that section.

Step 3: Position the Badge (Best Practice)

For maximum visibility, place the badge near:

  • Product price
  • Add to Cart button
  • Above payment options

This ensures customers immediately notice the offer.

Example Output on Product Page

Below is an example of how the free shipping badge appears when the product price is above the threshold:

Free Shipping Badge Example

Step 4: Add CSS for Better Design

Use the following CSS to style your badge and make it stand out:

.free-shipping-badge {
  display: inline-block;
  background: #fff0f0;
  color: #e60023;
  border: 1px solid #e60023;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  margin-left: 10px;
}

You can customise colors based on your brand.

Pro Tips to Maximise Results

  • Use clear threshold messaging (e.g. Free Shipping Above $150)
  • Combine with cart progress bar for better conversions
  • Test different badge colors (red, green, blue)
  • Keep badge close to price or CTA

Final Thoughts

A dynamic free shipping badge is a simple but powerful enhancement for your Shopify store. By automating the logic using Liquid, you ensure consistency across products while encouraging higher-value purchases.

Once implemented, this small change can significantly improve your store’s conversion rate and overall user experience.

Scroll to Top