Free shipping is the single most persuasive phrase in ecommerce — studies consistently show it’s the top reason carts get completed. Yet many stores bury it in a footer nobody reads. A dedicated free-shipping top bar puts it front and center on every page, complete with a truck icon for instant recognition. This is a pure HTML + CSS snippet for a Custom Liquid section — no app, no JavaScript, loads instantly. Below are 5 industry-styled variations with live previews and the exact code to paste.
1. Fashion Store – Bold Free Shipping Bar
Fashion carts are impulse-driven. A bold black bar with a truck icon removes the shipping-cost anxiety right when shoppers are deciding.
Preview
Sample text: FREE EXPRESS SHIPPING ON ORDERS OVER $75
Liquid Code
{% comment %} LayoutKart snippet: shopify-top-bar-free-shipping-message v1 (Fashion Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a5v1bar{background:#101010;padding:11px 12px;text-align:center;}
.a5v1bar p{color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:700;margin:0;letter-spacing:.5px;}
</style>
<div class="a5v1bar">
<p><svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="vertical-align:-4px;margin-right:8px;"><path d="M1 4h13v11H1z M14 8h4l4 4v3h-8z" stroke="#ffffff" stroke-width="2" fill="none"/><circle cx="6" cy="18" r="2" stroke="#ffffff" stroke-width="2" fill="none"/><circle cx="17" cy="18" r="2" stroke="#ffffff" stroke-width="2" fill="none"/></svg><strong>FREE EXPRESS SHIPPING ON ORDERS OVER $75</strong></p>
</div>2. Beauty Store – Soft Free Shipping Bar
‘Complimentary’ sounds more premium than ‘free’ — perfect for beauty brands. Soft blush tones keep the luxury feel intact.
Preview
Sample text: Complimentary shipping on orders over $50
Liquid Code
{% comment %} LayoutKart snippet: shopify-top-bar-free-shipping-message v2 (Beauty Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a5v2bar{background:#fbeef2;padding:11px 12px;text-align:center;}
.a5v2bar p{color:#a1234f;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0;letter-spacing:.5px;}
</style>
<div class="a5v2bar">
<p><svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="vertical-align:-4px;margin-right:8px;"><path d="M1 4h13v11H1z M14 8h4l4 4v3h-8z" stroke="#a1234f" stroke-width="2" fill="none"/><circle cx="6" cy="18" r="2" stroke="#a1234f" stroke-width="2" fill="none"/><circle cx="17" cy="18" r="2" stroke="#a1234f" stroke-width="2" fill="none"/></svg><strong>Complimentary shipping on orders over $50</strong></p>
</div>3. Electronics Store – Tech Free Shipping Bar
Electronics buyers worry about damage in transit. Pairing ‘free’ with ‘insured’ in neon-on-navy tackles both objections at once.
Preview
Sample text: FREE insured shipping on all tech orders
Liquid Code
{% comment %} LayoutKart snippet: shopify-top-bar-free-shipping-message v3 (Electronics Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a5v3bar{background:#071c33;padding:11px 12px;text-align:center;}
.a5v3bar p{color:#37e0ff;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:14px;font-weight:700;margin:0;letter-spacing:.5px;}
</style>
<div class="a5v3bar">
<p><svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="vertical-align:-4px;margin-right:8px;"><path d="M1 4h13v11H1z M14 8h4l4 4v3h-8z" stroke="#37e0ff" stroke-width="2" fill="none"/><circle cx="6" cy="18" r="2" stroke="#37e0ff" stroke-width="2" fill="none"/><circle cx="17" cy="18" r="2" stroke="#37e0ff" stroke-width="2" fill="none"/></svg><strong>FREE insured shipping on all tech orders</strong></p>
</div>4. Pet Store – Friendly Free Shipping Bar
Subscriptions live or die on perceived value. A friendly green bar shouting free shipping makes the subscribe-and-save pitch irresistible.
Preview
Sample text: FREE shipping on pet food subscriptions
Liquid Code
{% comment %} LayoutKart snippet: shopify-top-bar-free-shipping-message v4 (Pet Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a5v4bar{background:#0b6e4f;padding:11px 12px;text-align:center;}
.a5v4bar p{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:14px;font-weight:700;margin:0;letter-spacing:.5px;}
</style>
<div class="a5v4bar">
<p><svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="vertical-align:-4px;margin-right:8px;"><path d="M1 4h13v11H1z M14 8h4l4 4v3h-8z" stroke="#ffffff" stroke-width="2" fill="none"/><circle cx="6" cy="18" r="2" stroke="#ffffff" stroke-width="2" fill="none"/><circle cx="17" cy="18" r="2" stroke="#ffffff" stroke-width="2" fill="none"/></svg><strong>FREE shipping on pet food subscriptions</strong></p>
</div>5. Food Store – Fresh Free Delivery Bar
For food, it’s ‘delivery’ not ‘shipping’. Warm orange with a truck icon promises speed and freshness in one glance.
Preview
Sample text: FREE delivery on orders over $40 — fresh daily
Liquid Code
{% comment %} LayoutKart snippet: shopify-top-bar-free-shipping-message v5 (Food Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a5v5bar{background:#e8590c;padding:11px 12px;text-align:center;}
.a5v5bar p{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:14px;font-weight:700;margin:0;letter-spacing:.5px;}
</style>
<div class="a5v5bar">
<p><svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="vertical-align:-4px;margin-right:8px;"><path d="M1 4h13v11H1z M14 8h4l4 4v3h-8z" stroke="#ffffff" stroke-width="2" fill="none"/><circle cx="6" cy="18" r="2" stroke="#ffffff" stroke-width="2" fill="none"/><circle cx="17" cy="18" r="2" stroke="#ffffff" stroke-width="2" fill="none"/></svg><strong>FREE delivery on orders over $40 — fresh daily</strong></p>
</div>How to Add a Free Shipping Bar to Shopify
No theme-file editing needed. Every snippet below is built for Shopify’s Custom Liquid section — the safest way to add custom code without installing another app:
- In Shopify admin, go to Online Store → Themes.
- Click Customize on your live theme (works on Dawn and most free OS 2.0 themes).
- In the theme editor sidebar, click Add section → Custom Liquid.
- Delete the placeholder code in the Custom Liquid box and paste the snippet.
- Drag the new section to the very top of the page, then click Save. Done!
Because it lives in a section — not in your theme files — the code survives theme updates.
Customize the Free Shipping Bar
- Threshold: edit the order value in the text (e.g. $50 → $75) to match your actual free-shipping rule.
- Icon: the truck is inline SVG — recolor it by changing the
strokecolor values. - Wording: test ‘FREE SHIPPING’ vs ‘Complimentary shipping’ — luxury brands often convert better with softer language.
- Urgency: add ‘this week only’ to the text during promos without touching the code structure.
More Shopify Code Sections
- Shopify Free Shipping Progress Bar
- Shopify Product Page Free Shipping Progress Bar
- Shopify Liquid Scrolling Announcement Bar: Code + Setup Guide
- Shopify Sticky Announcement Bar That Stays on Scroll
- Shopify Animated Sale Announcement Bar
- Shopify Countdown Timer Announcement Bar
- Shopify Announcement Bar with Clickable Links
- Shopify Automatic Coupon Code Display
- Shopify Discount Code Copy Button
- Shopify Frequently Bought Together Section
Conclusion
A free-shipping bar is the closest thing to a cheat code in ecommerce — it attacks the #1 cause of cart abandonment on every single page. Paste one of these designs into a Custom Liquid section, set your threshold honestly, and let it work. Two minutes, zero apps, measurable difference. For the next step, add a free-shipping progress bar to your cart using the related tutorials.
Want it done for you? LayoutKart’s readymade Shopify templates come with these effects built in — launch your store today without touching a line of code.
