You customize the header, navigation menus, and footer in Storefront primarily through the WordPress Customizer and the Menus screen.
Here are step-by-step instructions:
1. Customize Header Logo, Search, and Styling:
- Go to Appearance > Customize in your WordPress dashboard.
- Click on Site Identity to upload your Site Logo, enter your Site Title, and add a Site Icon (favicon).
- Return to the main Customizer menu and click Header.
- Customize the Header Background Color, Header Text Color, and Link Color.
- (Optional) Toggle the header search bar on or off depending on your preference.
- Click Publish at the top to save your changes.
Verification: Preview the header in the live Customizer window to confirm your logo and chosen colors render correctly.
2. Configure Navigation Menus:
- Go to Appearance > Menus in your dashboard.
- Click create a new menu, give it a name (e.g., “Primary Navigation”), and click Create Menu.
- Select pages, product categories, or custom links from the left panel and click Add to Menu.
- Drag and drop items to reorder them or nest them into sub-menus.
- Under Menu Locations at the bottom, check Primary Menu (for header navigation) or Handheld Menu (for mobile navigation).
- Click Save Menu.
Verification: Visit your site front end and ensure the navigation menu items appear in the header layout and collapse properly on mobile viewports.
3. Customize Footer Widgets and Background:
- Go to Appearance > Customize > Footer.
- Adjust the Footer Background Color, Heading Color, and Text Color.
- Click Publish.
- Go to Appearance > Widgets in your WordPress menu.
- Expand the Footer Column 1, Footer Column 2, Footer Column 3, or Footer Column 4 block areas.
- Add widgets such as store address details, useful links, social icons, or customer service info.
- Click Update in the top right corner.
Verification: Refresh your storefront homepage and scroll to the bottom to verify the footer columns display your widgets.