{"id":26498,"date":"2020-08-13T10:14:30","date_gmt":"2020-08-13T08:14:30","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=26498"},"modified":"2025-03-06T10:45:28","modified_gmt":"2025-03-06T08:45:28","slug":"shopify-header","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/shopify-header.html","title":{"rendered":"How To Edit The Header In Shopify: Step-by-Step Guide"},"content":{"rendered":"\n

The topic of this article is Shopify header configuration. We briefly discuss the typical website page structure and then move to the main configuration steps: adding logo and changing Shopify logo size, header menu, announcement bar, creating a sticky header either including an announcement bar or excluding it. As a bonus, we are going to tell how you can edit Shopify header via code template. Let’s get started!<\/p>\n

<\/p>\n

Shopify header block
\n<\/a>How to edit Shopify logo in header
\n<\/a>How to edit Shopify header menu
\n<\/a>How to edit Shopify announcement bar
\n<\/a>How to edit Shopify header via code template
\n<\/a>How to create sticky header Shopify<\/a><\/p>\n

Shopify website page<\/strong> can be divided into a few components:<\/p>\n

1. Header.<\/strong> It is a content block that you can see at the upper part of every page of an online store. Header typically consists of a name of a store, logo, main website navigation menu and shopping cart sign.
\n2. Footer.<\/strong> It is a content block that you can see at the bottom part of every page of an online store. A footer may contain a menu, links to social networks, contact information and sometimes also a newsletter signup.
\n3. Body.<\/strong> It is an area between header and footer on any page of a website. Header or footer are static elements – they remain the same on every page. Compared to them, the web page body is dynamic and its content changes depending on the page that you access.<\/p>\n

In this article, we are going to discuss the header<\/strong> block and how you can configure its components.<\/p>\n

In case you are interested in the footer<\/strong> block configuration – visit this page<\/a> and find everything you need in a comprehensive guide.<\/p>\n

You can also check out creating a menu in Shopify<\/a> tutorial to improve navigation<\/strong>.<\/p>\n

Shopify header block<\/h2>\n

In Shopify, the header<\/strong> looks like this:<\/p>\n

 <\/p>\n

\"shopify<\/p>\n

 <\/p>\n

Basically, it can be divided into 2 blocks. The first block is an announcement bar<\/strong>. It contains a welcome message. The second block contains a logo, menu, search bar and a shopping cart.<\/p>\n

In order to edit the header block, you need to enter the admin panel of your website and then go to Online Store -> Themes<\/strong>.<\/p>\n

 <\/p>\n

\"how<\/p>\n

 <\/p>\n

Then, you need to select your current theme and press the Customize<\/strong> button.<\/p>\n

 <\/p>\n

\"shopify<\/p>\n

 <\/p>\n

Here you will see the block with your website’s sections (header, footer etc). You need to select the header<\/strong> section.<\/p>\n

 <\/p>\n

\"shopify<\/p>\n

 <\/p>\n

Now, let’s take a look at the main Shopify capabilities for the header block customization.<\/p>\n

 <\/p>\n

\"header<\/p>\n

 <\/p>\n

How to edit Shopify logo in header<\/h2>\n

The first element that you can change in the header is the logo. You can change its location by selecting one of the suggested options (Left, Center). Besides uploading your own logo from your device, you can choose one of the free options available by pressing on Explore free images<\/strong>.<\/p>\n

 <\/p>\n

\"shopify<\/p>\n

 <\/p>\n

In our article, we will choose the second option and go for a ready-made logo image.<\/p>\n

 <\/p>\n

\"shopify<\/p>\n

 <\/p>\n

After you apply a new image, three buttons will show up:<\/p>\n

    \n
  1. Change will let you choose another image;<\/li>\n
  2. Remove allows you to delete the image;<\/li>\n
  3. Edit is the button that allows adding a brief image description (it will be placed in the alt attribute). Alt description is necessary for SEO as images also show up in search results by relevant queries and also it is important for visually impaired website visitors.<\/li>\n<\/ol>\n

    You can also configure Shopify logo size
    \n<\/span><\/h3>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    How to edit Shopify header menu<\/h2>\n

    The next element that we discuss here is your website’s main menu.<\/p>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    By default, the main menu is selected. You can choose another menu by pressing on the change button or edit the current menu by pressing the Edit menu<\/strong> button.<\/p>\n

     <\/p>\n

    \"main<\/p>\n

     <\/p>\n

    In the menu editing section, you can create new menu items as well as edit the existing ones. You can also use the drop down menu to group products, collections or pages to improve your online store’s navigation. For example, if you have a lot of products, you can add them to collections and use the drop down menu to organize these collections. It will help a customer to find a necessary product type. You can create a drop down menu by creating or moving sub menu items under the main item. The main item will be displayed in your store’s main menu and sub menu items will be displayed in the drop down menu. There can be 2 levels of sub menu sections.<\/p>\n

    For example, let’s create a menu item connected to a website page can place 2 more items inside of it:<\/p>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    You should pay attention that the 1st-level menu items are left-aligned. The 2nd-level menu items are aligned among themselves but indented to the 1st level menu items.<\/p>\n

    On the front, it will look like this:<\/p>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    It is also worth mentioning that you can edit the menu directly from the admin panel main menu. Just go to online store -> navigation<\/strong>.<\/p>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    How to edit Shopify announcement bar<\/h2>\n

    The next block that you can edit is an announcement message.<\/p>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    By default, this block is hidden but you can make it visible by clicking on show announcement. You can also display this block just on a main page. In order to do it, you need to tick the box saying Home page only<\/strong>.<\/p>\n

    In the text<\/strong> field, you can change the message text.<\/p>\n

    In the link<\/strong> field, you can mention the website page that a user will proceed to when clicking on this block. You can also change the block’s color and text’s color.<\/p>\n

    How to edit Shopify header via code template<\/h2>\n

    You can edit the header block directly via code. In order to do it, go to Theme actions -> Edit code<\/strong>.<\/p>\n

     <\/p>\n

    \"announcement<\/p>\n


    \n<\/span>After you enter the section with templates of your theme, you need to open the header.liquid<\/strong> template in the sections.<\/span><\/p>\n

     <\/p>\n

    \"change<\/p>\n

     <\/p>\n

    Using Shopify layout and HTML, you can change blocks’ location, remove blocks, add your own classes and attributes etc. To edit styles in the Assets<\/strong>, you need to select the theme.scss.liquid<\/strong> file.<\/p>\n

     <\/p>\n

    \"announcement<\/p>\n

     <\/p>\n

    How to create sticky header Shopify<\/h2>\n

    Sticky header means that the navigation, logo and icons will follow the users while scrolling the page. It is very useful when you want your customers to have easy access to your website’s navigation. Let’s look through 2 ways how you can create a sticky header in Shopify<\/strong>. In the first case, the whole header will be sticky (together with an announcement bar); in the second case, the announcement bar won’t be sticky – won’t be fixed.<\/p>\n

    Making the whole header sticky (together with an announcement bar)<\/h3>\n
      \n
    1. At the Shopify admin panel, you need to enter Online Store > Themes<\/strong>.<\/li>\n
    2. Here you need to find your theme and press Actions > Edit code<\/strong>.<\/li>\n
    3. In the Assets<\/strong> folder, you need to open the theme.scss.liquid<\/strong> file.<\/li>\n
    4. Proceed to the very end of this file and insert this code:<\/li>\n<\/ol>\n
      #SearchDrawer {\r\n  z-index:1001;\r\n}\r\n\r\n#shopify-section-header {\r\n  position: fixed;\r\n  z-index:1000;\r\n  left:0;\r\n  right:0;\r\n}\r\n<\/pre>\n
        \n
      • In the Assets<\/strong> folder, you need to open the theme.js<\/strong> file.<\/li>\n
      • Proceed to the very end of this file and insert this code:<\/li>\n<\/ul>\n
        function headerSize() {\r\n  let $headerHeight = $('div#shopify-section-header').outerHeight();\r\n  $('#PageContainer').css('padding-top', $headerHeight);\r\n}\r\n\r\n$(window).on(\"load\", headerSize);\r\n$(window).on(\"resize\", $.debounce(500, headerSize));\r\n<\/pre>\n
        After that, you need to save the changes and reload your website page.<\/p>\n
        Making the header sticky excluding the announcement bar<\/h3>\n
        If you want the announcement bar not to be fixed with the sticky header, you need to follow these steps:<\/p>\n
          \n
        • In the Shopify admin panel, go to Online Store > Themes<\/strong>.<\/li>\n
        • Here you need to find your theme and press Actions > Edit code<\/strong>.<\/li>\n
        • In the Assets folder, you need to open the theme.scss.liquid<\/strong> file.<\/li>\n
        • Proceed to the very end of this file and insert this code:<\/li>\n<\/ul>\n
          #SearchDrawer {\r\n  z-index:1001;\r\n}\r\n\r\n.site-header {\r\n  position: fixed;\r\n  z-index:1000;\r\n  left:0;\r\n  right:0;\r\n}\r\n<\/pre>\n
            \n
          • In the same Assets<\/strong> folder, you need to open the theme.js<\/strong> folder.<\/li>\n
          • Proceed to the very end of this file and insert this code:<\/li>\n<\/ul>\n
            function headerSize() {\r\n  let $headerHeight = $('div#shopify-section-header').outerHeight();\r\n  $('#PageContainer').css('padding-top', $headerHeight);\r\n}\r\n\r\n$(window).on(\"load\", headerSize);\r\n$(window).on(\"resize\", $.debounce(500, headerSize));\r\n\r\n$(window).scroll(function() {\r\n  scroll = $(window).scrollTop();\r\n  if (scroll >= 1) {\r\n    $('.site-header').css('top', '0');\r\n  } else {\r\n    $('.site-header').css('top', 'initial');\r\n  }\r\n});\r\n<\/pre>\n
             <\/p>\n\n","protected":false},"excerpt":{"rendered":"The topic of this article is Shopify header configuration. We briefly discuss the typical website …","protected":false},"author":72,"featured_media":29159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,602],"tags":[],"class_list":["post-26498","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-shopify","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t