Free Shopify build · 03
Liquid Glass Shopify Cart Drawer
A tactile side cart with translucent depth, clear totals, and an uncluttered checkout path.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Cart Drawer / 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
- 01Readable glass-on-image contrast
- 02Drawer overlay and focus states
- 03Prominent checkout hierarchy
Good Shopify placements
- Global cart drawer↗
- Product pages↗
- Quick-add flows↗
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-cart" role="dialog" aria-modal="true" aria-labelledby="hb-cart-title">
<header>
<div><small>Your bag</small><h2 id="hb-cart-title">Cart · {{ cart.item_count }}</h2></div>
<button type="button" aria-label="Close cart">×</button>
</header>
{% for item in cart.items %}
<div class="hb-glass-cart__item">
{{ item.image | image_url: width: 180 | image_tag: loading: 'lazy' }}
<div><a href="{{ item.url }}">{{ item.product.title }}</a><small>{{ item.variant.title }}</small></div>
<strong>{{ item.final_line_price | money }}</strong>
</div>
{% endfor %}
<footer>
<span>Subtotal</span><strong>{{ cart.total_price | money }}</strong>
<button name="checkout" form="cart">Continue to checkout</button>
</footer>
</aside>
<style>
.hb-glass-cart { width:min(430px, 94vw); padding:22px; border-left:1px solid rgba(255,255,255,.55); background:rgba(242,241,235,.72); backdrop-filter:blur(28px) saturate(145%); }
.hb-glass-cart header,.hb-glass-cart footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.hb-glass-cart__item { display:grid; grid-template-columns:68px 1fr auto; gap:14px; align-items:center; margin:24px 0; }
.hb-glass-cart__item img { width:68px; height:82px; object-fit:cover; border-radius:14px; }
.hb-glass-cart__item small { display:block; opacity:.55; margin-top:4px; }
.hb-glass-cart footer button { flex:0 0 100%; padding:15px; border:0; border-radius:14px; color:white; background:#171714; }
</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
Cart drawer: 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 cart drawer, 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.