Website Building » Shopify » How Do I Add a Header in Shopify?

How Do I Add a Header in Shopify?

Last updated on October 2, 2022 @ 12:27 am

Adding a header to your Shopify store is a great way to give your customers an easy way to navigate your site. You can add a header to your store by going to the “Themes” tab in your Shopify admin, clicking on the “Edit HTML/CSS” button, and then adding the following code to your “Layout/theme.liquid” file:

Header Code:

<div id="header">
  <a href="/">Home</a> | 
  <a href="/about">About Us</a> | 
  <a href="/contact">Contact Us</a>
</div>

You can style the header code using the “style” attribute in the “div” tag. For example, you could add the following CSS code to your “Layout/theme.scss.liquid” file:

#header {
  background-color: #333;
  color: #fff;
}

You can also style the text in the header using the “p”, “b”, and “u” tags.liquid” file:

.header-text {
  font-size: 18px;
  font-weight: bold;
}

Adding a header to your Shopify store is a great way to give your customers an easy way to navigate your site. You can add a header by going to the “Themes” tab in your Shopify admin, clicking on the “Edit HTML/CSS” button, and then adding code to your “Layout/theme.liquid”.

PRO TIP: Warning: Adding a header in Shopify can be tricky. Make sure you follow the instructions carefully or you may end up with a header that looks odd or doesn’t work correctly.
Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.