Free Shopify build · 06
Liquid Glass Shopify Product Gallery
A spacious image gallery with glass thumbnails, a floating counter, and clear visual focus.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Product Gallery / 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
- 01Responsive Shopify image filters
- 02Active thumbnail states
- 03Stable media aspect ratios
Good Shopify placements
- Product template↗
- Lookbook↗
- Quick-view modal↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
<div class="hb-glass-gallery" data-gallery>
<div class="hb-glass-gallery__stage">
{% for media in product.media %}
{{ media.preview_image | image_url: width: 1400 | image_tag: loading: 'lazy', class: 'hb-gallery-image' }}
{% endfor %}
<span class="hb-glass-gallery__count">01 / {{ product.media.size | prepend: '0' }}</span>
</div>
<div class="hb-glass-gallery__thumbs" aria-label="Product media">
{% for media in product.media %}
<button type="button" aria-label="View image {{ forloop.index }}">
{{ media.preview_image | image_url: width: 180 | image_tag: loading: 'lazy' }}
</button>
{% endfor %}
</div>
</div>
<style>
.hb-glass-gallery { position:relative; }
.hb-glass-gallery__stage { position:relative; overflow:hidden; border-radius:30px; background:#e7e5df; }
.hb-gallery-image { width:100%; aspect-ratio:4/5; object-fit:cover; }
.hb-glass-gallery__stage .hb-gallery-image:not(:first-of-type) { display:none; }
.hb-glass-gallery__count,.hb-glass-gallery__thumbs { border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.52); backdrop-filter:blur(16px); }
.hb-glass-gallery__count { position:absolute; right:14px; top:14px; padding:9px 12px; border-radius:999px; font-size:12px; }
.hb-glass-gallery__thumbs { display:flex; gap:8px; position:absolute; left:50%; bottom:14px; padding:7px; border-radius:18px; transform:translateX(-50%); }
.hb-glass-gallery__thumbs button { overflow:hidden; width:48px; height:58px; padding:0; border:0; border-radius:11px; }
.hb-glass-gallery__thumbs img { width:100%; height:100%; object-fit:cover; }
</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
Product gallery: 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 product gallery, 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.