Liquid Glass Header

Shopify Discussion
, ,
1

Hello everyone!

While designing my store, I thought it is better to make hy landing page header appear liquid glass. This is how it looks now:

image
image2830×143 29.4 KB

This is what I want it to be:

image
image780×438 35.6 KB

Do you have any suggestions? Maybe an app could help, but are there any other (maybe custom) solutions?

2

No one app will fulfill the requirements like it’s showing in the image. So the best solution is do with the custom code.

Can you share your store url and password (if applicable) so that I can take a look from my end.

Thanks

4

Try adding this in Online Store → Themes → Edit code → base.css or theme.css:

/* =============================================
   LIQUID GLASS HEADER
   ============================================= */

.header-wrapper,
.shopify-section-header,
header.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(24px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 0 0 16px 16px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Slightly more opaque when user scrolls down */
.header-wrapper.scrolled,
header.header.scrolled {
  background: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Nav links readable over glass */
header.header a,
header.header .header__menu-item,
.header__heading-link {
  color: #111 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Logo clarity */
header.header .header__heading-logo {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Icon buttons (cart, search, account) */
header.header .header__icon {
  color: #111 !important;
}

Then add this small JS snippet at the bottom of your theme.liquid just before </body> to trigger the scrolled state:

<script>
  window.addEventListener('scroll', function () {
    const header = document.querySelector('header.header, .header-wrapper');
    if (!header) return;
    if (window.scrollY > 10) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  });
</script>

If the glass effect looks invisible, it means there is no image or gradient behind the header to blur, it only works over visual content. Also check what class your header actually uses by right clicking it and inspecting, some themes use .site-header or .header-section instead, just swap that into the selectors at the top.