Free Shopify build · 10
Liquid Glass Shopify Testimonial Card
An editorial review card that layers social proof over product imagery without sacrificing readability.
Try the interaction
This is a working browser preview. Click, type, or change the visible controls.
Liquid Glass Shopify Testimonial 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
- 01Editorial quote hierarchy
- 02Readable translucent surfaces
- 03Theme-editor block content
Good Shopify placements
- Homepage↗
- Product template↗
- Brand story page↗
Copy the starter
Original Hanubees markup and CSS. Paste it into a duplicated theme, connect your section settings, then test before publishing.
<figure class="hb-glass-quote">
<div class="hb-glass-quote__rating" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“{{ block.settings.quote }}”</blockquote>
<figcaption>
{% if block.settings.avatar %}{{ block.settings.avatar | image_url: width: 96 | image_tag: loading: 'lazy' }}{% endif %}
<div><strong>{{ block.settings.name }}</strong><span>Verified customer</span></div>
<span>{{ block.settings.product_title }}</span>
</figcaption>
</figure>
<style>
.hb-glass-quote { max-width:560px; margin:0; padding:clamp(24px, 5vw, 46px); border:1px solid rgba(255,255,255,.58); border-radius:28px; background:rgba(255,255,255,.56); box-shadow:0 24px 70px rgba(20,20,16,.13); backdrop-filter:blur(22px) saturate(150%); }
.hb-glass-quote__rating { color:#9a6d00; letter-spacing:.16em; }
.hb-glass-quote blockquote { margin:24px 0 34px; font-size:clamp(24px, 4vw, 42px); line-height:1.08; letter-spacing:-.035em; }
.hb-glass-quote figcaption { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; font-size:13px; }
.hb-glass-quote figcaption img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.hb-glass-quote figcaption span { display:block; opacity:.55; }
</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
Testimonial 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 social proof, 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.