How to add my image banner to the header?

Store Design
, ,

Topic summary

Goal: add an image banner to the header with the logo centered and menu drop-downs on both left and right of the logo.

Proposed approach (Shopify themes):

  • Edit the header template (header.liquid/header-section.liquid), find the logo container (e.g., .logo or .header__logo), and insert an image banner element after it.
  • Update CSS to center the logo and distribute surrounding elements: .logo uses flex and justify-content:center; .header__banner uses flex with space-between; banner image set to be responsive.

Technical notes:

  • Liquid is Shopify’s templating language; changes occur in .liquid files alongside CSS.
  • The provided HTML example for the banner appears incomplete and lacks the menu grouping structure; menus may need explicit left/right containers inside .header__banner for space-between to work.

Status:

  • No confirmation or final result reported; guidance offered but implementation details (exact HTML structure, menu containers) remain to be clarified. Discussion open.
Summarized with AI on January 26. AI used: gpt-5.
1

I am looking to add an image banner to the header. I was hoping the logo could still sit central and the menu drop downs could appear both left and right of the logo? Any suggestions would be lovely!

2

  • In the theme’s HTML files, locate the header section. This is typically found in a file named “header.liquid” or “header-section.liquid”. Look for the code that defines the structure of the header.

    Within the header structure, find the container or element that holds the logo. It might be something like <div class="logo"> or <div class="header__logo">.

    Add the following HTML code after the logo container to insert the image banner:


  

​

  • In the CSS file, locate the styles that target the header or logo container. It might be something like “.header” or “.logo”.

  • Add the following CSS code to center the logo and adjust the positioning of the menu drop-downs:

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header__banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  padding: 10px;
}

.header__banner img {
  max-width: 100%;
  height: auto;
}