This tutorial will show you how to create a modern sticky header in Shopify. The header will:

• Stay fixed at the top when scrolling
• Start as transparent
• Turn solid when scrolling down

Perfect for themes like Dawn, Refresh, Sense, Origin, etc.

---

📌 Step 1: Add Sticky + Transparent Classes to Your Header

Go to:

Online Store → Themes → Edit code

Open:

sections/header.liquid

Find the main header wrapper (usually <header> or <div class="header…">) and add these classes:

<header class="site-header sticky-header transparent-header">

If your theme uses another class name, apply the same idea.

---

📌 Step 2: Add CSS for Sticky & Transparent Styles

Open:

assets/base.css

Add this CSS:

/* Make Header Sticky */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Transparent header at top */
.transparent-header {
  background: transparent;
  box-shadow: none;
}

/* Solid header when scrolling */
.header-scrolled {
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

You can change the background color to match your theme.

---

📌 Step 3: Add JavaScript to Detect Scroll

Open:

assets/global.js

Or your theme’s main JS file.

Add this script:

document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('.sticky-header');

  if (!header) return;

  window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
      header.classList.add('header-scrolled');
    } else {
      header.classList.remove('header-scrolled');
    }
  });
});

---

📌 Step 4: Optional — Add Smooth Color Fade

Add this extra CSS if you want smoother transitions:

.sticky-header {
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

---

🎉 You're Done!

Your Shopify store now has a:

• Sticky header that stays visible
• Transparent header that becomes solid on scroll
• Modern UX like top Shopify themes

If you want, I can also help you create:

• Sticky mobile header only
• Sticky announcement bar
• Sticky cart icon
• Scroll-down hide / scroll-up reveal header

Just tell me! 😊