Free Shopify build · 09
Liquid Glass Shopify Quick View
A focused product modal with airy glass surfaces, variant selection, and one decisive purchase action.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Quick View / 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
- 01Native dialog semantics
- 02Clear variant selection states
- 03Focus-visible interaction styling
Good Shopify placements
- Collection grid↗
- Search results↗
- Recommendation shelf↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
<dialog class="hb-quick-view" id="quick-view-{{ product.id }}">
<form method="dialog"><button class="hb-quick-view__close" aria-label="Close">×</button></form>
<div class="hb-quick-view__grid">
{{ product.featured_image | image_url: width: 900 | image_tag: loading: 'lazy' }}
<div class="hb-quick-view__content">
<p>{{ product.vendor }}</p><h2>{{ product.title }}</h2><strong>{{ product.price | money }}</strong>
{% form 'product', product %}
<label for="hb-variant-{{ product.id }}">Choose an option</label>
<select id="hb-variant-{{ product.id }}" name="id">
{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}
</select>
<button type="submit">Add to bag</button>
{% endform %}
</div>
</div>
</dialog>
<style>
.hb-quick-view { width:min(900px, calc(100% - 24px)); padding:10px; border:1px solid rgba(255,255,255,.6); border-radius:30px; background:rgba(246,246,241,.72); box-shadow:0 40px 120px rgba(15,15,12,.28); backdrop-filter:blur(30px) saturate(150%); }
.hb-quick-view::backdrop { background:rgba(18,18,16,.34); backdrop-filter:blur(6px); }
.hb-quick-view__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:10px; }
.hb-quick-view__grid > img { width:100%; height:100%; max-height:640px; object-fit:cover; border-radius:22px; }
.hb-quick-view__content { padding:clamp(24px, 5vw, 60px); align-self:center; }
.hb-quick-view__content select,.hb-quick-view__content button { width:100%; margin-top:12px; padding:14px; border-radius:13px; }
.hb-quick-view__content button { border:0; color:white; background:#171714; }
@media (max-width:700px) { .hb-quick-view__grid { grid-template-columns:1fr; } }
</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
Quick view: 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 quick-view modal, 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.