Improve Header and Navigation

Generate the Liquid, CSS, and JavaScript for a sticky nav, announcement bar, search expansion, cart count badge, hover dropdowns, and social icons to add to your header yourself.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Help me improve my store’s header and navigation:


  Make the header sticky on scroll
  Add an announcement bar above the header for [free shipping/sale/new arrivals]
  Add a search icon that expands into a full search bar
  Make the cart icon show the number of items
  Add hover dropdowns to main navigation items
  Reduce header height while keeping it usable
  Add my [phone number/social icons] to the header


For each of the numbered items above, generate the specific Liquid, CSS, and/or JavaScript snippet needed — clearly labeled and described well enough that I can identify where each one goes — so I can paste them into my own header.liquid myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, open sections/header.liquid (or header-group.json and its related snippets, depending on the theme), and paste each generated snippet into the matching spot — markup changes into the HTML/Liquid structure, styles into the section’s {% stylesheet %} block or a linked CSS file, and behavior into the section’s {% javascript %} block or a linked JS file. Save and preview in the theme editor before publishing.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions