Home > Shopify Tutorials > Edit Header in Shopify Store

How to Edit Header in Shopify Store

Last updated: April 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

While running an online store on the eCommerce platform, you may have to undertake multiple tasks. One of them is to figure out How to Edit Header in your Shopify Store?.

For some online business administrators, the task of editing header may seem complicated. But with our step-by-step guide, you will come up with a simple answer. You will have a better grasp of the header issues, and learn how to edit header in Shopify.

Please do not go anywhere since we will go through the details right now. Let’s begin!

Exclusive Offer: Get Shopify 33 days for just $1 + The Online Store Starter Kit

Start your 3-day free trial, and enjoy your first month of Shopify for 1$ plus the premium package designed especially for new Shopify merchants!

Start Free Trial

Related posts:

Header issues

The size of the header

If you are a newbie to the Shopify platform, then you may find editing the size of the header tricky. It may be too big or too small for you and you may need to change it until you are fully satisfied.

The color of the header

Like the size, the color is also a vital element of the header if you want to make it unique and stand out from the crowd. If the color is boring or not appealing to you, then you might need to adjust it.

The unwanted title

The unwanted title may occur when you accidentally put the wrong title or when you realize you need to replace the current title with a better and more interesting one.

The unexpected line

The picture is the same for an unexpected line. You may not want it anymore and you need to adjust it in your Shopify store.

How to edit header in Shopify?

Edit the size of the header

Step 1: Go to Customize

After you log in to your Shopify admin, you can go to the Online Store section, then click Customize.

Step 2: Tap on Header

On the menu to the left, tap on Header.

If you have a logo uploaded, you can customize your logo size, and it will automatically adjust the header’s height.

If you do not have a logo, or if you only need to adjust the height, it will be necessary to edit your theme code.

Before modifying any code, duplicating your theme is a crucial step. By doing it, you will not affect your customers if you detect any unintended results!

Step 3: Go to Themes

In your Shopify admin, head to the Online Store section, then click Themes.

Step 3: Go to Online Store>Themes

Step 4: Click Duplicate

Tap on Action, then click Duplicate to duplicate the theme you want to.

Step 4: Click Actions > Duplicate

Once you have duplicated your theme, you can follow the simple steps below:

Step 5: Click Edit Code

In your Shopify admin, go to the Online Store section, click Actions, then tap on Edit Code.

Step 5: Click Online Store > Actions > Edit Code

Step 6: Choose theme.scss.liquid

Next, on the left, you will notice a list of folders. Inside your Assets folder, choose theme.scss.liquid.

Step 6: Choose `theme.scss.liquid`

Step 7: Add height: [your height size here];

In that file, look for ‘site-header {‘, and add height: [your height size here]; below it.

Step 7: Add `height: [your height size here];`

Your code should appear like this:

Step 7: Add `height: [your height size here];`

Step 8: Tap on Save

Step 8: Tap on `Save`

Change the color of the header

In the same file and section as preceding, you may need to change your background color. You can simply substitute background-color: $color-body; with background-color: #000;.

Change the color of the header

#000 is a hex color value for black. Should you want to edit this color in the future, you can replace #000 with the color you want.

Your final .site-header code should be like this:

Change the color of the header

Change header title

Step 1: Go to General

At the top left of your store, you can notice your store name. If you want to change it, you can go to the Settings section, then click General and change your store name.

Step 1: Go to Setting>General

From the theme section, you can tap on the Header section in your Customize Theme Editor and substitute that with a logo.

If you want to change your store name in the meta description of the store, you can head to the Online Store section, then click Preferences.

Step 2: Replace Header section with a logo

Final thoughts

To sum up, the importance of realizing How to Edit Header in your Shopify Store is crucial in improving the appearance of your Shopify shop. By figuring out how to do it, you can boost the performance of your business and gradually bring uniqueness to your brand.

Hopefully, by reading our step-by-step guide will illustrated pictures, you can do edit the header effortlessly and manage your online business on the Shopify platform efficiently and effectively.

For any online business of all kinds and sizes, a strong Terms of Conditions agreement is as vital as selecting your site theme. You can check out our post How to add Terms of Service to your Shopify store for more information.

If you have any questions, comments, or concerns; do not hesitate to leave a comment or contact us directly. We are always ready to help you out in case you need anything.

Featured article:

Shopify Starter Plan Review 2024: Examples of Successful Case Studies Shopify Basic Plan Overview: Pricing, Features, and comparisons in 2023 Shopify Advanced Plan Overview: Pricing, Features, and comparisons in 2023 Shopify Free Trial 2024: Unlock 3, 14, 30, 60 & 90 Days for your Store


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.