Header Section
The Header section appears at the top of every page in your store and includes the logo, navigation menu, and essential icons like cart, search, and account.
1. About the Header Section
- The Header is a fixed section displayed at the top of every page in your Shopify store.
- It contains your store logo, navigation menu, and important icons.
- The header helps customers easily navigate your store and access key pages.
- It also plays an important role in building strong brand visibility.
- The theme provides flexible layout options and stylish icons for features like cart, search, and account.
2. How to Configure the Header
- Log in to your Shopify Admin Dashboard.
- Navigate to Online Store ? Themes.
- Click Customize on your active theme.
- In the theme editor, select the Header section from the left sidebar.
- Adjust the available settings and layout options according to your needs.
- Click Save after making changes.
3. Header Settings
- Color Scheme: Choose a predefined color scheme to style the header.
- Show Border: Enable this option to display a border below the header.
- Enable Sticky Header: Keeps the header visible while customers scroll through the page.
- Select Logo: Upload your store logo to display in the header.
- Logo Width: Adjust the size of the logo using the width slider.
- Logo Position: Control how the logo appears within the header layout.
4. Logo Position
- Logo Left: The logo appears on the left side of the header.
- Logo Center: The logo appears centered in the header.
- Logo Center with Menu Bottom: The logo appears centered with the navigation menu displayed below it.
- Drawer Layout: Uses a compact navigation style that works well for minimal layouts or mobile-focused designs.
5. Additional Header Options
- Show Border Below Logo: Displays a divider line below the logo to visually separate it from the menu.
- Select Menu: Choose the primary navigation menu that will appear in the header.
- Select Secondary Menu: Optionally add another menu when using certain header layouts.
- Text Display: Control the appearance of menu text.
- Default: Standard text style.
- Uppercase: Displays menu text in uppercase for a bold look.
6. Important Notes
- The header layout may change depending on the selected logo position.
- The secondary menu option works only with specific header layouts.
- Always click Save after updating header settings.
- Make sure your logo image size is optimized for the best appearance.