header customisation

Topic summary

Goal: Make the header a consistent 50px tall across all pages and display text labels “Cart (0)” and “Account” next to the icons.

What’s been tried:

  • CSS added via theme.css to force a 50px header height. A second CSS set adjusted logo/icon heights and visibility to improve consistency.
  • Result: Header height is close to 50px, but alignment issues persist on the home page. Other pages look correct.

Current issues:

  • Home page header content isn’t centered, and the header height still varies slightly when navigating between pages.
  • Adding the text labels “Cart (0)” and “Account” requires edits to header.liquid (Shopify’s Liquid templating file), not just CSS. One participant requested collaborator access to implement this.

Recent updates:

  • Verification in Developer Tools showed the CSS working for some cases, but the cross-page height shift remains.
  • A later CSS snippet targeted a specific home page h1, which does not address the header issue.

Status and next steps:

  • No final resolution yet. Needs Liquid modifications for labels and further CSS/template adjustments to stabilize home page header alignment. Screenshots are central to illustrating the discrepancy.
Summarized with AI on December 13. AI used: gpt-5.

Hi

I would like:

The height of the header to be 50px on all pages

The cart icon to say ‘Cart (0)’

The account icon to say ‘Account’

Any help would be greatly appreciated!

https://4hl6tt8p7sag5076-70626345282.shopifypreview.com

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-account {
    height: 50px !important;
}

Thanks!

Hi @brandonkyt

add This CSS it will help you to show the account and cart but not desire what you are looking for because the thing you looking for for that we have to modify the liquid code in the header.liquid for that I need the collaboration access if you can provide me I will make that for you

header.header {
    max-height: 50px;
}

header.header .header__heading {
    height: 50px;
}

header.header .header__heading .header__heading-link,
header.header .header__heading .header__heading-logo-wrapper,
header.header .header__heading .header__heading-logo{
    height: 100%;
}

header.header .header__icons .header__icon .visually-hidden {overflow: unset;width: 100%;height: 100%;margin: 0;clip: unset;position: unset !important;}
header.header .header__icons .header__icon.header__icon--account, header.header .header__icons #cart-icon-bubble {width: 100px;}
1 Like

hi, thanks… the header is now 50px but the content inside is not not aligned center

but weirdly enough on every other page it is fine @topnewyork

as you can see here @topnewyork

1 Like

as you can see here weirdly it is fine on other pages but not the home page

1 Like

let me check

Did you use the CSS code I provided you it worked on the developer Tool here is the result

hi yes i have done that it looks better but if you flick through the pages the header still slightly changes in height

#shopify-section-template--23663895937346__background_video_CMJRwz h1 {
    color: #fefffc !important;
    text-align: center;
    font-family: "FTRegolaNeue-Semibold", sans-serif;
    font-size: 4rem !important;
    font-style: normal;
    letter-spacing: 0px;
}