Free Shopify build · 02
Liquid Glass Floating Navigation for Shopify
A compact storefront header that floats above the page, blurs naturally, and keeps core actions close.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Floating Navigation for Shopify / 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
- 01Sticky positioning without layout shift
- 02Progressive backdrop-filter enhancement
- 03Responsive navigation labels
Good Shopify placements
- Theme header↗
- Landing pages↗
- Collection pages↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
<header class="hb-float-nav">
<a href="{{ routes.root_url }}" class="hb-float-nav__brand">{{ shop.name }}</a>
<nav aria-label="Primary navigation">
{% for link in linklists.main-menu.links limit: 4 %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</nav>
<a href="{{ routes.cart_url }}" aria-label="Open cart">Bag ({{ cart.item_count }})</a>
</header>
<style>
.hb-float-nav {
position:sticky; z-index:30; top:16px; width:min(94%, 980px); margin:16px auto;
display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 16px;
border:1px solid rgba(255,255,255,.55); border-radius:999px;
background:rgba(248,248,244,.58); box-shadow:0 14px 40px rgba(20,20,16,.1);
backdrop-filter:blur(22px) saturate(160%);
}
.hb-float-nav a { color:inherit; text-decoration:none; font-size:13px; }
.hb-float-nav__brand { font-weight:700; }
.hb-float-nav nav { display:flex; gap:22px; }
@media (max-width:700px) { .hb-float-nav nav { display:none; } }
</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
Floating navigation: 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 navigation, 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.