Shopify Header Section .liquid File

Posted 3 weeks ago

Worldwide

Summary

I need a custom Shopify header section (.liquid file) for Bound In Infinity — an anime, gaming, and pop culture wall art brand. Premium, minimal, clean. White background, black text/icons, thin black dividers, no gradients. ANNOUNCEMENT BAR Neon lime (#CCFF00) background, black centered uppercase text, default "BUY 2 GET 1 FREE" (editable). Height 28–36px desktop, 32–42px mobile. Close X button. Scrolls away on scroll. MOBILE HEADER Left: hamburger + search icons. Center: bold logo "BOUND IN INFINITY" (no wrap). Right: account + cart icons with black count bubble. Thin black border below. MOBILE HAMBURGER DRAWER Slides in from left, full-screen, white. Top: logo + X close. Below: horizontal shortcut icons with labels (merchant-editable). Then vertical nav links with chevrons: ALL WALL ART / WORLD / COLOR / SIZE / COLLECTION / BEST SELLERS. Below nav: secondary links (Login/Register, Gift Cards, Help). Optional promo banner image at bottom. Closes on X or outside tap. MOBILE SEARCH OVERLAY Full-screen white overlay. Top: pill search input with back arrow and X. Default state: "Popular searches" heading + tappable terms list (merchant-editable). Below: "Trending products" heading + 2-column product grid (image, name, subtitle). While typing: live autocomplete rows appear above trending products. MOBILE CATEGORY NAV BAR Below header. Horizontally scrollable, hidden scrollbar, no wrap. Uppercase black text. Default items: ALL WALL ART / BEST SELLERS / POKÉMON / ANIME / VIDEO GAMES / COMICS / FANTASY. Merchant-editable. DESKTOP HEADER Single row: logo left, nav center with dropdown chevrons, icons right (search, account, cart). Logo alignment setting (left or center). Thin black border below. Compact height. DESKTOP NAV DROPDOWNS (hover, fade animation, white panel): SHOP ALL — direct link. WORLD — mega menu. Left col: "Shop by Medium" with circular thumbnails + View All. Right col: "Shop by Style" with circular thumbnails + View All. Far right: featured image with "SHOP TRENDING DESIGNS" button overlaid. COLOR — mega menu. Three cols: Warm (Red, Orange, Yellow, Pink), Cool (Blue, Green, Purple), Neutrals (White, Black, Brown, Beige, Grey). Filled circle swatch per color. View All link. SIZE — mega menu. Four illustrated cards: Small / Medium / Large / XL Prints with line-art room illustrations. Plus black VIEW ALL card. COLLECTION — mega menu. Two large image cards side by side, collection name overlaid as large bold text. NEW badge option. Merchant-editable images and names. BEST SELLERS — direct link. No ROOM or THEME items. DESKTOP SEARCH Full-width overlay on click. Search input + popular searches + trending products grid. STICKY Header sticky by default. Announcement bar scrolls away. No layout shift. SETTINGS (all editable in theme editor) Announcement text, logo text or image, logo font size (mobile + desktop), nav font size, header padding, nav item spacing, icon spacing, mobile nav padding, logo alignment, sticky on/off. DELIVERABLE Single header.liquid file plus required CSS/JS that installs into any Shopify theme with live cart, search, nav, and account connected. Please share examples of Shopify headers with mega menus or mobile drawers you have built.

  • $75.00

    Fixed-price
  • Intermediate
    Experience Level
  • Remote Job
  • One-time project
    Project Type
Skills and Expertise
Mandatory skills
HTML
CSS
Nice-to-have skills
Shopify
Web Design
Activity on this job
  • Proposals:15 to 20
  • Last viewed by client:3 weeks ago
  • Hires:
    1
  • Interviewing:
    18
  • Invites sent:
    27
  • Unanswered invites:
    2
About the client
Member since May 31, 2026
  • USA
    Elgin2:59 PM
  • $566 total spent
    1 hire, 1 active

Explore similar jobs on Upwork

Ecommerce exicutiveFixed-price‐ Posted 3 weeks ago
Amazon Seller Central
Shopify
Shopify Lead Magnet IntegrationFixed-price‐ Posted 3 weeks ago
Shopify
HTML
Shopify Templates
JavaScript

How it works

  • Post a job icon
    Create your free profile
    Highlight your skills and experience, show your portfolio, and set your ideal pay rate.
  • Talent comes to you icon
    Work the way you want
    Apply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
  • Payment simplified icon
    Get paid securely
    From contract to payment, we help you work safely and get paid securely.
Want to get started? Create a profile

About Upwork

  • Rating is 4.9 out of 5.
    4.9/5
    (Average rating of clients by professionals)
  • G2 2021
    #1 freelance platform
  • 49,000+
    Signed contract every week
  • $2.3B
    Freelancers earned on Upwork in 2020

Find the best freelance jobs

Growing your career is as easy as creating a free profile and finding work like this that fits your skills.

Trusted by

  • Microsoft Logo
  • Airbnb Logo
  • Bissell Logo
  • GoDaddy Logo