This article will focus on Shopify header configuration. The typical website structure is briefly discussed. Next, we will move on to the main configuration steps: adding logo, changing Shopify logo size and header menu, announcement bars, creating sticky headers, either with or without an announcement bar. We will also show you how to edit Shopify’s header using a code template. Let’s get started!
The Shopify website page can be broken down into several components:
1. Header. Header is the content block you will see on every page of an online shop. The header typically includes the name of the store, logo, main website navigation menu, and shopping cart sign.
2. Footer. This is the content block you will see at bottom of any page in an online store. The footer can contain links to social networks, contact information, and sometimes even a signup for the newsletter.
3. Body. It is the area between header or footer on any page. The header and footer are static elements that remain the same on every page. The web page body, which is dynamic in comparison to them, changes according to the page you access.
This article will discuss the header block, and how to configure its components.
If you’re interested in footer block configuration, visit this page and get all the information you need in a comprehensive guide.
To improve navigation, you can also see creating menus in Shopify tutorial.
Shopify header block
The Shopify header looks something like this:
It can be broken down into two blocks. The announcement bar is the first block. It includes a welcome message. The second block includes a logo, menu and search bar.
To edit the header block you will need to go into the admin panel and then to Online Store->Themes.
Next, select the theme you wish to use and then click on the Customize button.
This block will contain your website’s sections (header and footer). Select the header section.
Let’s now take a look at Shopify’s main capabilities for customizing header blocks.
How to edit the Shopify logo in the header
You can edit the header’s first element, the logo. The logo can be moved by choosing one of the suggested options (Left or Center). You can upload your logo directly to your device or choose from one of the available free options by pressing Explore free images.
We will use the ready-made logo image in our article.
Three buttons will appear after you have applied a new image:
- You can choose another image by changing your mind
- You can delete an image by using the Remove option
- Edit allows you to add a short description of the image (it will be added in the alt attribute). It is essential for SEO because images can also be shown in search results for relevant queries. Also, it is important for visually impaired visitors to websites.
Shopify can also be configured to change the size of your logo
How to edit the Shopify header menu
Next, we will discuss your website’s main navigation. By default, it is selected. You can change the menu by clicking on the Change button, or edit the current menu using the Edit menu button.
You can edit existing menu items and create new ones in the menu editing section. The drop-down menu can be used to group products, collections, or pages in order to improve the navigation of your online store. If you have many products, you can add them all to collections. The drop-down menu will allow you to organize the collections. This will allow customers to quickly find the product they need. A drop-down menu can be created by moving or creating sub menu items below the main item. Your store’s main menu will display the main item, while sub menu items will appear in the drop-down menu. There are two levels of sub-menus.
Let’s take, for example, a menu item that is connected to a webpage. It can contain 2 additional items.
Pay attention to the fact that 1st-level menu item are left-aligned. The 2nd-level menu item are aligned between themselves, but indented to 1st level menu items.
It will look this on the front:
You can also edit the menu from the main menu of the admin panel. Navigate to the online store.
How to edit the Shopify announcement bar
An announcement message is the next block you can edit.
This block is defaulty hidden, but you can make this block visible by clicking show announcement. This block can be displayed on any page. To do this, tick the box that says “Home page only”.
You can edit the message text in the text field.
You can also mention the URL page to which the user will go when they click on the block in the link field. You can also alter the color of the text and block.
How to edit the Shopify header using code template
The code allows you to edit the header block. To do this, visit Theme actions -> Edit Code.
After you have entered the section with the templates for your theme, you will need to open the header.liquid in the sections.
Shopify layout and HTML allow you to modify blocks’ locations, remove them, and add your own classes or attributes. You will need to choose the theme.scss.liquid folder in order to edit the styles in the Assets.
Shopify: How to make a sticky header
Sticky header is when the navigation, logo and icons follow the user while they scroll the page. This is a great way to make sure your customers have easy access the navigation on your website. We will look at two ways to create a sticky header on Shopify. The first example will make the entire header sticky, together with the announcement bar. In the second, the announcement bar won’t be sticky and can’t be fixed.
