Your cart page is the last thing shoppers see before paying — so why is it usually the most boring page on the store? A smart announcement message turns dead space into a selling moment: free-gift reminders, dispatch times, COD availability, festive offers. The clever part is making the message conditional — different messages for big carts vs small carts, using real Liquid logic. These 6 banners do exactly that. Paste one into a Custom Liquid section on the cart page and make your cart work as hard as your homepage.

1. Info – Blue Info Banner

Clean blue info styling — dispatch times, COD notes and trust messages that calm pre-purchase anxiety.

Preview

Sample: Big-cart message shown — the banner automatically switches text by cart value.

Liquid Code

{% comment %} LayoutKart - Cart Announcement (Blue Info) {% endcomment %}
<style>
.lk-cartmsg-m1{background:#eff6ff;border:1px solid #93c5fd;border-radius:10px;padding:14px 18px;margin:18px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:inherit;}
.lk-cartmsg-m1 .lk-tx{color:#1e3a8a;font-size:14px;flex:1;min-width:200px;}
.lk-cartmsg-m1 .lk-tx strong{display:block;font-size:15px;margin-bottom:2px;}
.lk-cartmsg-m1 .lk-cta{padding:10px 20px;border-radius:8px;background:#2563eb;color:#fff;
font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;}
</style>
{% if cart.total_price >= 200000 %}
<div class="lk-cartmsg-m1"><div class="lk-tx"><strong>🎊 VIP treatment unlocked</strong>Your order ships free with priority dispatch.</div>
<a class="lk-cta" href="/collections/all">Shop More</a></div>
{% elsif cart.total_price >= 99900 %}
<div class="lk-cartmsg-m1"><div class="lk-tx"><strong>🎁 A free gift awaits</strong>Add ₹1,000+ to unlock a surprise gift.</div>
<a class="lk-cta" href="/collections/all">Shop More</a></div>
{% else %}
<div class="lk-cartmsg-m1"><div class="lk-tx"><strong>ℹ️ Good news</strong>COD available — pay comfortably at your doorstep.</div>
<a class="lk-cta" href="/collections/all">Shop More</a></div>
{% endif %}

2. Sale – Red Sale Banner

Urgent red for sale season — tiered discount reminders that push carts over the next threshold.

Preview

Sample: Big-cart message shown — the banner automatically switches text by cart value.

Liquid Code

{% comment %} LayoutKart - Cart Announcement (Red Sale) {% endcomment %}
<style>
.lk-cartmsg-m2{background:#fef2f2;border:2px solid #ef4444;border-radius:12px;padding:14px 18px;margin:18px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:inherit;}
.lk-cartmsg-m2 .lk-tx{color:#7f1d1d;font-size:14px;flex:1;min-width:200px;}
.lk-cartmsg-m2 .lk-tx strong{display:block;font-size:15px;margin-bottom:2px;}
.lk-cartmsg-m2 .lk-cta{padding:10px 20px;border-radius:8px;background:#dc2626;color:#fff;
font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;}
</style>
{% if cart.total_price >= 200000 %}
<div class="lk-cartmsg-m2"><div class="lk-tx"><strong>🎊 MEGA CART = MEGA SAVINGS</strong>Extra 5% off auto-applied above ₹2,000.</div>
<a class="lk-cta" href="/collections/sale">View Sale</a></div>
{% elsif cart.total_price >= 99900 %}
<div class="lk-cartmsg-m2"><div class="lk-tx"><strong>🎁 Almost there!</strong>Cross ₹1,000 for an extra surprise discount.</div>
<a class="lk-cta" href="/collections/sale">View Sale</a></div>
{% else %}
<div class="lk-cartmsg-m2"><div class="lk-tx"><strong>ℹ️ Sale is live</strong>Prices go back up soon — checkout today.</div>
<a class="lk-cta" href="/collections/sale">View Sale</a></div>
{% endif %}

3. Gift – Teal Gift Banner

Friendly teal gift messaging — freebies and samples that make shoppers feel spoiled.

Preview

Sample: Big-cart message shown — the banner automatically switches text by cart value.

Liquid Code

{% comment %} LayoutKart - Cart Announcement (Teal Gift) {% endcomment %}
<style>
.lk-cartmsg-m3{background:#f0fdfa;border:1px solid #5eead4;border-radius:14px;padding:14px 18px;margin:18px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:inherit;}
.lk-cartmsg-m3 .lk-tx{color:#134e4a;font-size:14px;flex:1;min-width:200px;}
.lk-cartmsg-m3 .lk-tx strong{display:block;font-size:15px;margin-bottom:2px;}
.lk-cartmsg-m3 .lk-cta{padding:10px 20px;border-radius:8px;background:#0d9488;color:#fff;
font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;}
</style>
{% if cart.total_price >= 200000 %}
<div class="lk-cartmsg-m3"><div class="lk-tx"><strong>🎊 You're getting spoiled</strong>A premium sample is already reserved for your order.</div>
<a class="lk-cta" href="/collections/new">Add More</a></div>
{% elsif cart.total_price >= 99900 %}
<div class="lk-cartmsg-m3"><div class="lk-tx"><strong>🎁 Free sample unlocked</strong>Every ₹1,000+ order gets a beauty sample.</div>
<a class="lk-cta" href="/collections/new">Add More</a></div>
{% else %}
<div class="lk-cartmsg-m3"><div class="lk-tx"><strong>ℹ️ Psst…</strong>Orders over ₹1,000 ship with a free sample.</div>
<a class="lk-cta" href="/collections/new">Add More</a></div>
{% endif %}

4. Tier – Gold Spender Tiers

Gold VIP tiers that flatter big spenders — ‘Gold member’ energy for high-AOV stores.

Preview

Sample: Big-cart message shown — the banner automatically switches text by cart value.

Liquid Code

{% comment %} LayoutKart - Cart Announcement (Gold Tiers) {% endcomment %}
<style>
.lk-cartmsg-m4{background:#fffdf5;border:1px solid #d4af37;border-radius:8px;padding:14px 18px;margin:18px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:inherit;}
.lk-cartmsg-m4 .lk-tx{color:#713f12;font-size:14px;flex:1;min-width:200px;}
.lk-cartmsg-m4 .lk-tx strong{display:block;font-size:15px;margin-bottom:2px;}
.lk-cartmsg-m4 .lk-cta{padding:10px 20px;border-radius:8px;background:#b8860b;color:#fff;
font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;}
</style>
{% if cart.total_price >= 200000 %}
<div class="lk-cartmsg-m4"><div class="lk-tx"><strong>🎊 ⭐ GOLD TIER</strong>White-glove packing and priority support on your order.</div>
<a class="lk-cta" href="/collections/all">Explore</a></div>
{% elsif cart.total_price >= 99900 %}
<div class="lk-cartmsg-m4"><div class="lk-tx"><strong>🎁 ✨ SILVER TIER</strong>You're one step from Gold — add a little more.</div>
<a class="lk-cta" href="/collections/all">Explore</a></div>
{% else %}
<div class="lk-cartmsg-m4"><div class="lk-tx"><strong>ℹ️ Welcome</strong>Every order is packed with care, big or small.</div>
<a class="lk-cta" href="/collections/all">Explore</a></div>
{% endif %}

5. Minimal – Gray Minimal Note

Barely-there gray note for minimal brands — information without decoration.

Preview

Sample: Big-cart message shown — the banner automatically switches text by cart value.

Liquid Code

{% comment %} LayoutKart - Cart Announcement (Gray Note) {% endcomment %}
<style>
.lk-cartmsg-m5{background:#f9fafb;border:1px solid #e5e7eb;border-radius:4px;padding:14px 18px;margin:18px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:inherit;}
.lk-cartmsg-m5 .lk-tx{color:#374151;font-size:14px;flex:1;min-width:200px;}
.lk-cartmsg-m5 .lk-tx strong{display:block;font-size:15px;margin-bottom:2px;}
.lk-cartmsg-m5 .lk-cta{padding:10px 20px;border-radius:8px;background:#111111;color:#fff;
font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;}
</style>
{% if cart.total_price >= 200000 %}
<div class="lk-cartmsg-m5"><div class="lk-tx"><strong>🎊 Noted</strong>Your order qualifies for priority dispatch.</div>
<a class="lk-cta" href="/pages/shipping-policy">Shipping Info</a></div>
{% elsif cart.total_price >= 99900 %}
<div class="lk-cartmsg-m5"><div class="lk-tx"><strong>🎁 Heads up</strong>Free returns within 7 days, no questions asked.</div>
<a class="lk-cta" href="/pages/shipping-policy">Shipping Info</a></div>
{% else %}
<div class="lk-cartmsg-m5"><div class="lk-tx"><strong>ℹ️ FYI</strong>Dispatched in 24 hours from our warehouse.</div>
<a class="lk-cta" href="/pages/shipping-policy">Shipping Info</a></div>
{% endif %}

6. Festive – Festive Gradient Banner

Celebration gradient for Diwali, Christmas and sale events — the cart joins the party.

Preview

Sample: Big-cart message shown — the banner automatically switches text by cart value.

Liquid Code

{% comment %} LayoutKart - Cart Announcement (Festive Pop) {% endcomment %}
<style>
.lk-cartmsg-m6{background:linear-gradient(135deg,#7c3aed,#ec4899);border:none;border-radius:16px;padding:14px 18px;margin:18px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:inherit;}
.lk-cartmsg-m6 .lk-tx{color:#ffffff;font-size:14px;flex:1;min-width:200px;}
.lk-cartmsg-m6 .lk-tx strong{display:block;font-size:15px;margin-bottom:2px;}
.lk-cartmsg-m6 .lk-cta{padding:10px 20px;border-radius:8px;background:#ffffff;color:#fff;
font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;}
</style>
{% if cart.total_price >= 200000 %}
<div class="lk-cartmsg-m6"><div class="lk-tx"><strong>🎊 🎉 FESTIVE BONUS</strong>A festive gift box is added to orders over ₹2,000.</div>
<a class="lk-cta" href="/collections/festive">Festive Picks</a></div>
{% elsif cart.total_price >= 99900 %}
<div class="lk-cartmsg-m6"><div class="lk-tx"><strong>🎁 🎊 Almost festive-ready</strong>Cross ₹1,000 for a festive gift box.</div>
<a class="lk-cta" href="/collections/festive">Festive Picks</a></div>
{% else %}
<div class="lk-cartmsg-m6"><div class="lk-tx"><strong>ℹ️ ✨ Season's greetings</strong>Free festive wrapping on all orders today.</div>
<a class="lk-cta" href="/collections/festive">Festive Picks</a></div>
{% endif %}

How to Add Cart Announcement Message to Shopify

No app needed — this works with a free built-in Shopify feature called the Custom Liquid section. It takes about two minutes:

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize next to your live theme (works with Dawn and all Online Store 2.0 themes).
3. In the theme editor, use the top dropdown to navigate to your cart page (or product page for product-page effects).
4. In the left sidebar, click Add section → Custom liquid.
5. Delete the placeholder code, paste the code from your chosen variation above, and click Save.
6. Preview your store — the effect is live instantly. Drag the section up or down to reposition it.

Tip: Always duplicate your theme first (Themes → … → Duplicate) so you have a backup before editing.

Customize the Cart Announcement Message

• Tiers: adjust the 200000 / 99900 thresholds (paise) to your own AOV bands.
• Messages: rewrite all three tiers — big-cart, mid-cart and small-cart shoppers need different nudges.
• Icons: swap the emoji for an SVG icon matching your theme.
• Link: point the CTA at a collection, offer page or WhatsApp chat.

More Shopify Code Sections

Keep customizing your store with these copy-paste tutorials:

• Shopify Cart Free Shipping Progress Bar (Boost AOV)
• Shopify Animated Sale Announcement Bar
• Shopify Countdown Announcement Bar
• Shopify Automatic Discount Code Display
• Shopify Discount Code Copy Button
• Shopify Cart Drawer Custom Design with Liquid
• Shopify Cart Upsell Section (You May Also Like)
• Shopify Top Bar with Free Shipping Message
• Shopify Announcement Bar with Clickable Links

Conclusion

The cart page shouldn’t be a dead end — it should be your last salesperson. Tiered announcement messages speak to each shopper exactly where they are: reward the big spenders, nudge the middle, reassure the cautious. One section, three messages, zero apps. Your cart just got a promotion.

Want a store that already has all of this built in? Check out LayoutKart’s readymade Shopify sections and templates — premium designs, clean Liquid code, ready to install.

Author: anurag Layoutkart