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.

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.

3. Scroll down to the Header section and expand by clicking on it.

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.

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.
   Note: 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.
   
2. Find the appropriate Store View in the grid on the “Design Configuration” page. Click on Edit from the dropdown under the “Action” column.
   
3. Expand the Header section.
   
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.

How to Add Store Demo Notice in the Header

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

4. In the Display Demo Store Notice field, change No to Yes.

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.