Free Shopify build · 01
Liquid Glass Shopify Product Card
A translucent product tile with a floating price, soft refraction, and a fast add-to-cart action.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Product Card / 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
- 01Layered translucent backgrounds
- 02Accessible product and price markup
- 03A lightweight add-to-cart form
Good Shopify placements
- Collection grid↗
- Featured products↗
- Related products↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
{% comment %} Hanubees — Liquid Glass Product Card {% endcomment %}
<article class="hb-glass-product">
<a href="{{ product.url }}" class="hb-glass-product__media">
{{ product.featured_image
| image_url: width: 900
| image_tag: loading: 'lazy', alt: product.title
}}
</a>
<div class="hb-glass-product__panel">
<div>
<p class="hb-glass-product__eyebrow">{{ product.vendor }}</p>
<h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
</div>
<strong>{{ product.price | money }}</strong>
{% form 'product', product %}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit" {% unless product.available %}disabled{% endunless %}>
{% if product.available %}Quick add{% else %}Sold out{% endif %}
</button>
{% endform %}
</div>
</article>
<style>
.hb-glass-product { position:relative; overflow:hidden; border-radius:28px; background:#e8e5df; }
.hb-glass-product__media { display:block; aspect-ratio:4/5; }
.hb-glass-product__media img { width:100%; height:100%; object-fit:cover; }
.hb-glass-product__panel {
position:absolute; inset:auto 12px 12px; display:grid; grid-template-columns:1fr auto;
gap:14px; align-items:end; padding:16px; border:1px solid rgba(255,255,255,.5);
border-radius:20px; color:#171714; background:rgba(255,255,255,.56);
box-shadow:0 18px 50px rgba(28,28,24,.16); backdrop-filter:blur(18px) saturate(150%);
}
.hb-glass-product__panel h3 { margin:3px 0 0; font-size:16px; }
.hb-glass-product__eyebrow { margin:0; opacity:.58; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.hb-glass-product button { grid-column:1/-1; width:100%; padding:12px; border:0; border-radius:12px; color:#fff; background:#171714; cursor:pointer; }
</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 card: 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 card, 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.