Shopify liquid glass: how Endure’s tab bar came together

Why a tab bar

Endure Cool Patch sells a clear hydrogel patch that cools on contact. The owner wanted the website to carry that same cool, refreshing feel.

We started with the traffic. More than 90 percent of Endure’s visitors were on mobile. So the idea had to work on a phone first.

That pointed us to the tab bar. On a phone it sits at the bottom of the screen, right where the thumb already is. We proposed one in liquid glass, the material Apple introduced with iOS 26. Press it and the selection lifts into a lens that magnifies the icons under it. The rest of the store is in the Endure Cool Patch case study.

A version they could hold

A mockup can show glass. It can’t show what happens when you press it. So we built the bar as a working page. Endure’s team could touch it and feel it before anything went live.

The owner made the decision. We went back and forth on the look and feel, and the final call stayed with Endure. We recommended a few finer points in how the lens refracts.

Endure’s team saw a plainer version of this lab. We rebuilt it here in Endure’s colors, with the store’s own tabs. The Tune panel came over too. Its eight settings are the ones Endure now has in its Shopify theme editor, and the two presets show where the lab started and what shipped.

Five layers, bottom to top

Nothing in the bar is a video or an image. Each layer is one small effect, stacked in this order.

1. Frosted bar. The bar softens whatever scrolls behind it and lifts its color.
2. Hole under the lens. When the lens lifts, the icons under it leave the bar. You never see them twice.
3. Magnify and bend. Through the lens, the icons look the way they would through curved glass. The middle zooms in, and the rim squeezes hard.
4. Dispersion. Near the rim, the colors split into a thin rainbow fringe, like the edge of Apple’s lens.
5. Rim light. A highlight catches the edge of the glass.

Drag fast and the lens stretches in the direction you’re moving, then springs back. It only redraws while it moves, so a phone handles it easily.

From the lab to the live Shopify store

The lab proved the idea. These are the changes it went through before Endure shipped it.

• The lens became an oval, wide enough to sit between two tabs. The lab’s was round.
• The glass got a thicker edge. Only a band around the rim bends what’s under it, and the middle stays clear.
• The cart tab shows a live item count, and the lens draws the count too.
• On a desktop, a lens follows the mouse across the header links and settles on a link when the mouse rests.
• The settings moved into Shopify’s theme editor, so Endure can retune the glass without a developer.

Shopify liquid glass that works on every phone

Most liquid glass demos on the web use a CSS filter that only some browsers draw. As of October 2026, that means Chromium browsers such as Chrome and Edge. Safari and Firefox show plain frosted glass at best.

That matters most on a phone. Nearly every iPhone browser runs on Safari’s engine, so most iPhone visitors never see the usual version bend at all. For a store that lives on phones, that ruled the usual approach out.

Endure’s tab bar works the same in Safari, Chrome and Firefox. It took us three versions of the glass to get there. The first still runs on the store’s buttons, which are tinted so they look right in Safari too.