Transparency with contrast
A glass surface is only useful when the text and controls remain clear over whatever sits behind it.
Collection 001 · 10 free builds
Liquid Glass
for Shopify.
Translucent, dimensional storefront components rebuilt to do a job—not just imitate an operating-system trend.
Collection preview / interactive
LiveWhat makes the effect work
Depth with restraint
One sharp edge, one soft highlight, and one believable shadow often do more than five decorative layers.
Motion with a reason
Movement should confirm an action or reveal hierarchy—not make checkout feel like a title sequence.
The complete shelf
Ten places the visual idea becomes useful.
Open any component for the full-screen preview, build notes, SEO-focused explanation, and copy-ready Shopify starter.
01 / Product card
LiveProduct card
A translucent product tile with a floating price, soft refraction, and a fast add-to-cart action.
Preview & build02 / Navigation
LiveFloating navigation
A compact storefront header that floats above the page, blurs naturally, and keeps core actions close.
Preview & build03 / Cart drawer
LiveCart drawer
A tactile side cart with translucent depth, clear totals, and an uncluttered checkout path.
Preview & build04 / Mobile menu
LiveMobile menu
A full-height mobile navigation with soft glass panels and large, thumb-friendly category links.
Preview & build05 / Predictive search
LiveSearch overlay
A calm predictive-search layer that lets products and suggestions remain readable over storefront imagery.
Preview & build06 / Product gallery
LiveProduct gallery
A spacious image gallery with glass thumbnails, a floating counter, and clear visual focus.
Preview & build07 / Collection section
LiveFeatured collection
A horizontally flowing collection shelf with glass filters and layered product information.
Preview & build08 / Announcement bar
LiveAnnouncement bar
A slim floating announcement pill for promotions that stays premium instead of looking like an ad banner.
Preview & build09 / Quick-view modal
LiveQuick view
A focused product modal with airy glass surfaces, variant selection, and one decisive purchase action.
Preview & build10 / Social proof
LiveTestimonial card
An editorial review card that layers social proof over product imagery without sacrificing readability.
Preview & buildUse the trend intelligently
Glass is the treatment.
Commerce is the job.
Keep it for navigation, overlays, product context, and compact controls. Avoid putting long body copy on unpredictable imagery, blurring the entire viewport, or hiding familiar shopping actions behind visual novelty.
- Do test contrast over the brightest product image.
- Do keep a readable fallback background.
- Avoid animating blur during scroll.
- Avoid glass on every section of the page.
Practical questions
Before you paste the CSS.
01Does liquid glass work in every Shopify theme?+
The visual CSS works in modern themes, but selectors and product data need to be connected to your theme's existing markup. Start in a duplicated theme and test the cart, variants, keyboard navigation, and mobile layout before publishing.
02Will backdrop blur make a Shopify store slow?+
Used on a few small surfaces, backdrop-filter is usually reasonable. Avoid large full-screen animated blur layers, keep shadows modest, and provide a solid translucent background so the component remains readable when blur is unavailable.
03Can I use these snippets in a commercial store?+
These Hanubees starter snippets are provided to adapt into your own storefront. Product imagery, fonts, brand assets, and code from third-party themes or repositories are not included.