Free Shopify build · 08
Liquid Glass Shopify Announcement Bar
A slim floating announcement pill for promotions that stays premium instead of looking like an ad banner.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Announcement Bar / responsive concept
LiveHow this build works
Use the visual system; adapt the markup to the product data and interaction patterns already present in your theme.
Core techniques
- 01Compact responsive messaging
- 02High-contrast promotional links
- 03Reduced-motion friendly animation
Good Shopify placements
- Above header↗
- Campaign page↗
- Product template↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
<aside class="hb-glass-notice" aria-label="Store announcement">
<span class="hb-glass-notice__dot" aria-hidden="true"></span>
<p>{{ section.settings.message }}</p>
{% if section.settings.link != blank %}
<a href="{{ section.settings.link }}">{{ section.settings.link_label }} ↗</a>
{% endif %}
</aside>
<style>
.hb-glass-notice { width:max-content; max-width:calc(100% - 24px); margin:10px auto; display:flex; align-items:center; gap:10px; padding:9px 13px; border:1px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(255,255,255,.56); box-shadow:0 10px 28px rgba(20,20,16,.08); backdrop-filter:blur(16px) saturate(155%); font-size:12px; }
.hb-glass-notice p { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-glass-notice a { color:inherit; font-weight:700; white-space:nowrap; }
.hb-glass-notice__dot { width:7px; height:7px; border-radius:50%; background:#b6f36a; box-shadow:0 0 0 4px rgba(182,243,106,.2); }
</style>Theme structures differ. Confirm product forms, variant IDs, cart updates, keyboard focus, image loading, and mobile spacing in your actual Shopify theme. The snippet is a clear starting layer, not a blind one-click install.
Why this belongs in a storefront
Announcement bar: visual polish tied to a familiar shopping job.
The strongest use of liquid glass in Shopify is not as a site-wide skin. It is a way to separate a compact interactive layer from rich product imagery while keeping the page feeling connected. On a announcement bar, that can make hierarchy feel lighter without removing the labels, prices, and actions a shopper expects.
Use the effect as progressive enhancement. The component should still make sense with blur removed, motion reduced, and a product image at its brightest possible crop. That constraint is what turns a shareable visual trend into durable interface design.