An e-commerce store header is the top section of a website that typically includes the logo, navigation menu, search bar, contact details, and sometimes a shopping cart or login button.
It helps users easily find what they need. The footer is the bottom section, usually containing links to policies, customer support, social media, payment methods, and company details.
It reinforces trust and provides quick access to important information.
Let’s start by modifying your store’s header.
1. Store Header
Hover your mouse over “store appearance” on the left sidebar menu and then click on “Store Styling”.
Wait for the page to load and then click on “Header and Navigation”.
Let’s modify the top bar by clicking on the “Top Bar” tab.
Top Bar
The top bar is going to be located at the top of the header. Here you can add important information such as contact details or promotions that you might have running.
You have the option to enable or disable the top bar.
As default, we have enabled it for you. You can also choose the hide the top bar on mobile. We have hidden it for you because we do not want to take up too much vertical space when on the mobile screen.
You can also change the top bar padding which will change the vertical space between the text and the top and bottom of the bar.
You can also change the font size of the text located in the top bar.
To edit the top bar, you should click the blue pencil icon located to the left of the text. Once the widget opens, you can then change the information.
You can do this for all 3 text widgets.
Header
Next, we want to change the header by clicking on the header tab. The header is the part where the logo, search bar, and other helpful links are located such as “my account”, “customer help” and “checkout”.
The first setting available for you is to change the header top and bottom padding by moving the bar to either the left or right.
The next option is to change the header layout. There are a total of 5 options available, but we recommend keeping to the Logo / Search / Secondary option because this option is the easiest to modify and has most of the important information on it.
You also have the option to disable the product search bar. We recommend you keep this feature on because it will help your customers find the products they need.
You can also change the design of the search to either “filled” or “outline” which will change its appearance.
You also have the option to enable or disable the sticky navigation when scrolling. We recommend keeping it enabled.
Mobile Header
You can also change the way your header will look like on mobile devices by clicking on the “Mobile Header” tab.
We also recommend that you select the mobile view by clicking on the mobile icon located at the bottom left. Your screen will automatically change to mobile view.
You can change the height of the mobile header by dragging the bar to the left or right. Make sure you have some white space between the logo and the header but not too much.
The height of the logo can also be changed by dragging the bar to the left or right.
You can also choose to enable or disable search on the mobile header. We recommend that you enable it.
You can also change the location of the product search bar. You can either put it within the navigation, add it below the header, or add it as an icon between the logo and the cart.
The my account link can also enabled on the mobile menu. We recommend leaving it disabled because we do not want to clutter your mobile header with too many options.
We are going to enable the menu label next to the hamburger icon representing three horizontal stripes. The text is also going to be labeled as “MENU”.
You can also enable the mobile sticky menu. The menu will stay on the screen once you scroll down. This is a personal choice but it will be enabled as default.
Navigation
The next step is to change the navigation settings by clicking on the “Navigation” tab. The navigation is going to contain your primary menu and the cart icon. We are going to edit the primary menu at a later stage.
The first setting available will allow you to edit the height of the navigation by moving the bar horizontally.
The “Enable hover intent” and “Display menu descriptions” we will leave disabled.
Cart
You can change the cart icon and also how it is displayed by clicking on the “cart” tab.
You can enable or disable the icon. We recommend keeping it enabled so that customers can use the mini cart.
You can also choose the icon. In this case, we are using the Basket icon as a default. Please keep in mind to view the website on a different browser or incognito when trying to view the changes made to the cart icon.
You can change the Cart Sidebar Title. We have added the text “Your Cart” as default.
You can enable or disable the quantity arrows on the cart sidebar and also the button labeled “View Cart” to visit the cart page.
You can also add text to the bottom of the cart sidebar.
2. Store Footer
To customize the store footer, you need to scroll down to the bottom of the website where the footer is located. The store footer has 3 sections that consist of the “Below Content” section, the “Footer” and the “Copyright” section.
Click on the blue circle with a pencil icon to edit each section.
You can remove or Add an additional text widget that will result in an additional column to add more information.
To add a widget click on “Add a Widget”, scroll down, and select the text widget. Edit the title of the widget and the text.
You can open any of the widgets to edit the information.
The same can be done for the footer and copyright section. Add or edit any of the widgets with your information.
For the footer, we have already created the following widgets.
- We added a shop categories widget where you can add some of your categories.
- We added a help widget where all your helpful pages will be displayed.
- We added a follow widget for social media profiles and
- an about us widget.