How to Customize Your Header in Magento 2

A header is the first thing visitors notice when they visit your eCommerce store. It plays a crucial role in helping potential customers navigate around the website.

This tutorial shows how to customize your header in Magento 2 by adding a logo, welcome text, and store demo notice. We’re using Magento 2.4.1 for this Magento 2 header guide.

How to Add Logo to the Header

  1. Go to Content > Design > Configuration from the Magento admin sidebar.

    Magento admin panel sidebar
    Configuration in the Magento admin sidebar
  2. On the “Design Configuration” page, choose the applicable Store View where you want to edit the header section by clicking Edit under the “Action” column.

    Design Configuration page
    Choose the applicable Store View by clicking on Edit on the Design Configuration page
  3. Scroll down to the Header section and expand by clicking on it.

    Header section in the Default Store View
    Header section in the Default Store View
  4. Click Upload to upload a new logo in “Logo Image.” Alternatively, you can use Select from Gallery or Browse to find options.
    Note: The logo can be either a JPG, PNG or GIF file type.

    Configure the details in the Header section
    Configure the details in the Header section
  5. Enter the width and height of the logo in pixels in the Logo Attribute Width and Logo Attribute Height text areas. Alternatively, you can leave these fields blank and proceed with the default width value of 170px.
  6. Insert text in the Logo Image Alt text area that best describes the logo. This text will appear when you hover over the front-end logo image.
  7. Click the orange Save Configuration button on the top right to save the changes.
    Logo on Magento frontendNote: The logo also appears on email templates, PDF invoices, and other documents. However, they must be uploaded separately.

How to Add Welcome Text to the Header

  1. On the Magento admin panel, navigate to Content > Design > Configuration.
    Magento admin panel sidebar
  2. Find the appropriate Store View in the grid on the “Design Configuration” page. Click on Edit from the dropdown under the “Action” column.
    Design Configuration page
  3. Expand the Header section.
    Header section in the Default Store View
  4. Add a welcome message in the Welcome Text text area. It’s worth noting that the message expands to add the customer name once they log in to their account.
  5. Click on the Save Configuration button in the upper right corner.

    Welcome Text on Magento frontend
    Welcome Text on Magento frontend

How to Add Store Demo Notice in the Header

  1. Log in to the Magento admin panel and navigate to Content > Design > Configuration.
    Magento admin panel sidebar
  2. Select the Store View by clicking on Edit under the “Action” column.
    Design Configuration page
  3. Under “Other Settings,” expand the HTML Head section.

    HTML Head section
    Expand the HTML Head section
  4. In the Display Demo Store Notice field, change No to Yes.

    Display Demo Store Notice field in HTML Head
    Select Yes in the Display Demo Store Notice field and click on the Save Configuration button
  5. Click on Save Configuration to save the changes. The Store Demo Notice appears on the top of the frontend. However, its format depends on the store theme.

    Store Demo Notice on the Magento frontend
    Store Demo Notice on the Magento frontend

Was this article helpful?

Leave a Comment