Free Shopify build · 07
Liquid Glass Shopify Featured Collection
A horizontally flowing collection shelf with glass filters and layered product information.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Featured Collection / 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
- 01Theme-editor collection settings
- 02Mobile scroll snapping
- 03Progressive hover treatments
Good Shopify placements
- Homepage↗
- Collection landing page↗
- Campaign page↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
<section class="hb-glass-collection">
<header>
<div><p>Curated edit</p><h2>{{ section.settings.heading }}</h2></div>
<a href="{{ section.settings.collection.url }}">View all ↗</a>
</header>
<div class="hb-glass-collection__track">
{% for product in section.settings.collection.products limit: 6 %}
<article>
<a href="{{ product.url }}">
{{ product.featured_image | image_url: width: 700 | image_tag: loading: 'lazy' }}
<div><span>{{ product.title }}</span><strong>{{ product.price | money }}</strong></div>
</a>
</article>
{% endfor %}
</div>
</section>
<style>
.hb-glass-collection header { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
.hb-glass-collection header p { margin:0; opacity:.55; font-size:12px; text-transform:uppercase; letter-spacing:.14em; }
.hb-glass-collection h2 { margin:5px 0 0; font-size:clamp(28px, 5vw, 58px); }
.hb-glass-collection__track { display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw, 310px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; }
.hb-glass-collection article { position:relative; overflow:hidden; border-radius:24px; scroll-snap-align:start; }
.hb-glass-collection article img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.hb-glass-collection article div { position:absolute; inset:auto 10px 10px; display:flex; justify-content:space-between; padding:14px; border-radius:15px; background:rgba(255,255,255,.58); backdrop-filter:blur(15px); }
</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
Featured collection: 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 collection section, 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.