Header

Header

What is the header section?

The header section of a theme is a crucial element that serves as the gateway to your online store. It typically appears at the top of each webpage and is the first thing visitors see when they land on your site. This section contains essential navigational elements such as the menu, search bar, and often the logo of your brand, providing users with immediate access to browse through different pages, search for specific products, or return to the homepage.

How do you set up the header section?

1. Start by navigating to the header section within the home page settings. You'll find customization options located on the right side of the screen.

2. Within this section, you can expand the width of the header, make it sticky on the scroll, and show a divider line as per your preferences.

3. Choose the color scheme for the header from the four available options.

4. Next, you can enable the option to show the navigation hub. To edit the navigation hub, navigate to the Popups group and access the navigation hub section for editing.

5. Add the logo image and adjust its width for both desktop and mobile views.

6. Select the navigation menu you want to add, manage its position, and choose the menu type from the available options.

7. Enable the option to show the collection’s featured image and choose to display the menu as a button if desired.

8. Customize the menu color scheme from the four available options.

9. Manage the search functionality, such as enabling inline search on the desktop.

10. You also have options related to localization, such as enabling the language selector, country/region selector, showing the country flag, and displaying the country name.

11. Fine-tune the spacing above and below the header section using the section spacing slider.

12. Lastly, manage the theme settings and optionally add custom CSS to incorporate unique styles into the header section.