Diwali Sale is LIVE - special prices end in
⚡ Launch-ready Shopify themes — Instant licensed download · 300+ stores built with LayoutKart themes
Book Call

How to Customize Shopify Header with Liquid

By /

How to Customize Shopify Header with Liquid

Your header is the first thing every visitor sees — logo, navigation, search, cart. A generic header makes even great products look ordinary, while a sharp one makes the whole store feel premium.

The fundamentals — logo sizing, navigation colors, sticky behavior and announcement-bar pairing — are all achievable with a Custom Liquid section and a little CSS. No theme surgery required. Below are 5 foundational header styles with live previews. Find your look, copy the code, done.

1. Fashion Store – Sticky Minimal

Runway-ready — a sticky white header with a bold spaced logo and underline-on-hover navigation.

Preview

🛒

NOIR — sticky minimal header

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-header-liquid v1 - paste into a Custom Liquid section {% endcomment %}
<style>
.f5v1-head{max-width:640px;margin:0 auto;background:#fff;border-bottom:1px solid #eee;font-family:Arial,Helvetica,sans-serif;position:sticky;top:0;z-index:5}
.f5v1-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.f5v1-logo{font-size:22px;font-weight:800;letter-spacing:4px}
.f5v1-nav a{margin:0 12px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#111;text-decoration:none;padding-bottom:3px}
.f5v1-nav a:hover{border-bottom:2px solid #111}
</style>
<div class="f5v1-head"><div class="f5v1-bar"><span class="f5v1-logo">NOIR</span><nav class="f5v1-nav"><a href="#">New</a><a href="#">Women</a><a href="#">Men</a><a href="#">Sale</a></nav><span>🛒</span></div></div>

2. Beauty Store – Centered Logo Pink

Softly centered — a blush background with an italic serif logo, made for beauty brands.

Preview

GlowLab — centered blush header

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-header-liquid v2 - paste into a Custom Liquid section {% endcomment %}
<style>
.f5v2-head{max-width:640px;margin:0 auto;background:#fdf2f5;font-family:Georgia,serif;text-align:center;padding:16px}
.f5v2-logo{font-size:26px;font-style:italic;color:#a1234f}
.f5v2-nav{margin-top:10px}
.f5v2-nav a{margin:0 14px;font-size:14px;color:#8e1f4d;text-decoration:none}
.f5v2-nav a:hover{text-decoration:underline}
</style>
<div class="f5v2-head"><div class="f5v2-logo">GlowLab</div><nav class="f5v2-nav"><a href="#">Skincare</a><a href="#">Makeup</a><a href="#">Bestsellers</a></nav></div>

3. Electronics Store – Dark + Search

Built for browsers — a prominent search bar on navy, because tech shoppers search before they scroll.

Preview

VoltEdge — search-first dark header

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-header-liquid v3 - paste into a Custom Liquid section {% endcomment %}
<style>
.f5v3-head{max-width:640px;margin:0 auto;background:#071c33;font-family:'Trebuchet MS',Verdana,sans-serif;padding:14px 20px}
.f5v3-row{display:flex;align-items:center;gap:16px}
.f5v3-logo{color:#37e0ff;font-weight:800;font-size:20px;white-space:nowrap}
.f5v3-search{flex:1;display:flex}
.f5v3-search input{flex:1;padding:9px 12px;border:none;border-radius:6px 0 0 6px;font-size:13px;min-width:0}
.f5v3-search button{padding:9px 16px;background:#37e0ff;border:none;border-radius:0 6px 6px 0;cursor:pointer;font-weight:700}
.f5v3-nav{margin-top:10px}
.f5v3-nav a{color:#9fb8d8;font-size:13px;margin-right:16px;text-decoration:none}
</style>
<div class="f5v3-head"><div class="f5v3-row"><span class="f5v3-logo">VoltEdge</span><div class="f5v3-search"><input type="search" placeholder="Search gadgets…" aria-label="Search"><button type="button">Go</button></div></div><nav class="f5v3-nav"><a href="#">Audio</a><a href="#">Wearables</a><a href="#">Deals</a></nav></div>

4. Jewelry Store – Luxury Serif Gold

Red-carpet polish — letterspaced gold serif on black with a hairline gold rule underneath.

Preview

Maison Auréle — gold serif header

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-header-liquid v4 - paste into a Custom Liquid section {% endcomment %}
<style>
.f5v4-head{max-width:640px;margin:0 auto;background:#0c0c14;font-family:Georgia,serif;text-align:center;padding:18px;border-bottom:1px solid #e9c767}
.f5v4-logo{color:#e9c767;font-size:24px;letter-spacing:6px}
.f5v4-nav{margin-top:12px}
.f5v4-nav a{color:#c9a94e;font-size:13px;letter-spacing:2px;margin:0 14px;text-decoration:none;text-transform:uppercase}
</style>
<div class="f5v4-head"><div class="f5v4-logo">AURÈLE</div><nav class="f5v4-nav"><a href="#">Rings</a><a href="#">Necklaces</a><a href="#">Bespoke</a></nav></div>

5. Grocery Store – Announcement-Integrated

Farm-fresh combo — a green announcement strip fused directly with the header for grocery promos.

Preview

FREE DELIVERY ON ORDERS OVER ₹499

FarmFresh — announcement + header combo

Liquid Code

{% comment %} LayoutKart snippet: shopify-customize-header-liquid v5 - paste into a Custom Liquid section {% endcomment %}
<style>
.f5v5-strip{max-width:640px;margin:0 auto;background:#2f9e44;color:#fff;text-align:center;font-size:12px;letter-spacing:1px;padding:8px;font-family:Verdana,Geneva,sans-serif}
.f5v5-head{max-width:640px;margin:0 auto;background:#fff;font-family:Verdana,Geneva,sans-serif;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #2f9e44}
.f5v5-logo{color:#257a36;font-weight:800;font-size:20px}
.f5v5-nav a{color:#333;font-size:13px;margin:0 10px;text-decoration:none}
</style>
<div class="f5v5-strip">FREE DELIVERY ON ORDERS OVER ₹499</div><div class="f5v5-head"><span class="f5v5-logo">FarmFresh</span><nav class="f5v5-nav"><a href="#">Fruits</a><a href="#">Veggies</a><a href="#">Dairy</a></nav></div>

How to Add Custom Header to Shopify

Every snippet above is built for Shopify’s Custom Liquid section, so you don’t need to touch a single theme file. Here’s the 2-minute setup:

  1. From your Shopify admin, go to Online Store → Themes.
  2. Click Customize next to your live theme (works with Dawn and all OS 2.0 themes).
  3. Open the template where you want the feature, then click Add section.
  4. Choose Custom Liquid from the section list.
  5. Copy the Liquid code from your favourite variation above and paste it into the Custom Liquid box.
  6. Click Save — it’s live on your storefront instantly. No app, no coding, no risk.

Customize the Header Design

Make it yours:

  • Logo size — bump the font-size up or swap the text logo for an <img>.
  • Sticky or not — keep position:sticky for a floating header, or remove it for a static one.
  • Nav colors — match link colors to your brand palette in one place.
  • Announcement pairing — stack a promo strip above the header like variation 5.
  • Mobile check — preview under 749px wide and simplify links if the bar feels crowded.

More Shopify Code Sections

Keep upgrading your store with these free Liquid tutorials:

Conclusion

Headers look complicated, but the fundamentals are just spacing, color and one sticky rule. With these five styles you can give your store a sharper first impression today — no developer, no app, no theme edits. Nail the basics first; when you are ready for mega menus and drawers, the complete guide below takes you further.

Want more copy-paste Shopify sections? LayoutKart publishes free Liquid tutorials every week — no apps, no monthly fees, just clean code. Bookmark this page and check back for new effects!

anurag Layoutkart
Author: anurag Layoutkart

Scroll to Top