How to Add Code to Header in Shopify – Verified Methods

The header is one of the most crucial parts of your Shopify store and it’s the first thing customers see when they visit. It usually contains your Logo, Navigation Menu, Search bar, Cart icon, and optionally, an announcement bar. A well-designed header not only builds trust but also reinforces your brand identity and boosts user experience.

In this guide, you'll learn three effective methods to customize your Shopify header using the Theme Editor, custom code, and custom sections.

How to Customize Header in Shopify

There are 3 methods you can use to customize the header in Shopify.

1. Customize Header in Shopify using Theme Editor.
2. Customize Header in Shopify using custom coding.
3. Customize header using a custom section.

Customize Header in Shopify using Theme Editor

Before editing any theme files, make sure to duplicate your theme as a backup in case something goes wrong. Using the Theme Editor, you can modify elements such as the logo, navigation, search bar, and cart within the header. You can also customize the branding of your store in the Header section.

Step 1: Navigate to Online Store > Themes > Duplicate

Step 2: Work on the duplicated version and make changes to prevent the live store issues.

Step 3: Navigate to Online Store > Themes > Customize 

Step 4: Go to the header section on the left side of the customizer and open the header section settings.

Step 5: From these settings you can select the different layout of the header, select the different menu, color scheme and so on. These settings can be different from theme to theme.

Step 6: to change the logo of the site navigate to main settings and open the logo dropdown and add your brand logo here. Location of settings defer from theme to theme. 

Step 7: You can choose different apps here by clicking the app block and selecting the app from the list. It depends on the theme whether a feature is added by the theme developer or not.

Step 8: click Save after making any changes.

Customize Header in Shopify using custom coding

Using custom coding you can customize the header section. you can add different settings in the section schema to allow settings in the Theme Editor for future update. Also you can directly add code using liquid inside the header section. for exampple you want to show announcement on the top of the header section then you can add this using Custom code.

Step 1: Navigate to Online store > Themes > Edit code

Step 2: Navigate to the Header.liquid file. File names can be different from theme to theme. 

For more coding best practices, see W3Schools’ HTML & CSS tutorials to ensure your edits remain clean and functional.

Step 3: Locate the place where you want to add the custom code. For example add this code at the top of your header file to show some announcement.

  
    <div class="custom-header-banner">
        <p>🚚 Free shipping on orders over $50</p>
    </div>
  

Step 4: Navigate to theme.css or base.css file and add this css 

    
        .custom-header-banner {
            background: #fff;
            color: #000;
            padding: 10px;
            text-align: center;
            font-size: 14px;
        }
        .custom-header-banner p {
            Margin: 0;
        }
    

Step 5: Make sure to save the changes.

Customize header using a custom section

In this method you can create a new header section using HTML, CSS and Liquid and show that in your storefront. In this way you can customize header section according to your branding and style. You can show or hide the header section in different pages based on the condition using liquid

Step 1: Navigate to Online store > Themes > Edit code

Step 2: Navigate to the sections part and create a new section called something like custom-header.liquid

Step 3: Click on this icon to create a new file and add .liquid after the file name (eg, custom-header.liquid).

You might also want to explore our guide on How to Add QR Code in Shopify to make your header more interactive for customers.

Step 4: add custom content like 

    
        <div class="custom-header-block">
            <p>{{ section.settings.text }}</p>
        </div>
        {% schema %}
            {
                "name": "Custom Header",
                "settings": [
                    {
                    "type": "text",
                    "id": "text",
                    "label": "Header Message",
                    "default": "Welcome to our store!"
                    }
                ],
                "presets": [
                    {
                    "name": "Custom Header"
                    }
                ]
            }
        {% endschema %}
    

Step 5: Include this section into the header group for json template. Click on Add section and add the section (custom header).

Conclusion

A clean, functional, and brand-aligned header sets the tone for your entire Shopify store. Whether you're using the Theme Editor, writing custom code, or creating flexible sections, these methods let you fully control your store's first impression.

Need help customizing your Shopify header or want something fixed? Reach out to Ecomx Agency, we're here to make your store stand out.