The Header is the top area of your storefront. It helps customers navigate your store and quickly access important features such as your logo, menu, search, language or currency selector, and cart.

In BurgerShop Theme Editor, the Header usually includes two main sections:

• Announcement Bar
• Header Bar

This guide explains how to customize both sections so your storefront header looks clean, branded, and easy to use

On this page

• Access the Header settings
• Understand the Header structure
• Customize the Announcement Bar
• Customize the Header Bar
• Preview desktop and mobile layout
• Save and publish changes
• Best practices
• Troubleshooting

Access the Header settings

You can customize the Header from the Theme Editor.

Steps:

1. Log in to your BurgerShop admin.
2. Go to Online store.
3. Select Themes.
4. Open the theme you want to edit.
5. Click Customize.
6. In the left sidebar, open the Sections tab.
7. Under Header, choose one of the following:
   • Announcement Bar
   • Header Bar

Understand the Header structure

The Header is made up of separate editable sections.

Announcement Bar

The Announcement Bar is the small bar displayed above the main header. It is usually used for short promotional messages, shipping notices, or important announcements.

Examples:

• Free shipping offer
• Seasonal promotion
• Holiday sale notice
• Limited-time discount
• Store updates

Header Bar

The Header Bar is the main navigation area. It may include:

• Store logo
• Navigation menu
• Search bar or search icon
• Currency selector
• Language selector
• Cart icon

You can customize each section separately depending on what you want to change

Customize the Announcement Bar

The Announcement Bar helps you show a short message at the top of your storefront.

Edit announcement content

Steps:

1. In the Sections tab, click Announcement Bar.
2. In the Content field, enter or edit your message.
3. Use formatting options if available, such as:
   • Bold
   • Italic
   • Underline
   • Link
4. Review the live preview on the right.

You can use the Announcement Bar for promotional messages such as:

• “Free Shipping over $100”
• “Order now for Father’s Day gifts”
• “Shop now and save 10%”

Change announcement text color

The Text color setting controls the color of the message shown in the Announcement Bar.

Steps:

1. In Announcement Bar, find Text color.
2. Choose a color or enter a color code.
3. Review the preview to make sure the text is easy to read.

Change announcement background color

The Background setting controls the background color of the Announcement Bar.

Steps:

1. In Announcement Bar, find Background.
2. Choose a color or enter a color code.
3. Review the preview.

Recommendation
Use a strong color contrast between the background and the text so the announcement is easy to notice and read.

Customize the Header Bar

The Header Bar controls the main header layout and navigation.

Select a navigation menu

The Navigation setting controls which menu appears in the header.

Steps:

1. In the Sections tab, click Header Bar.
2. Find the Navigation field.
3. Select the menu you want to display.
4. If needed, click Create to create a new menu.
5. Review the preview.

Your menu can include links such as:

• Shop
• Product categories
• About Us
• Contact Us
• Policy pages

Choose a header layout

BurgerShop may offer several header layout options, such as:

• Inline
• Rich
• Minimal

Steps:

1. In Header Bar, find Layout.
2. Select the layout you want to use.
3. Review the preview to see how the header changes

Adjust the header height

The Height setting controls how tall the header appears.

Steps:

1. In Header Bar, find the Height slider.
2. Drag the slider left or right.
3. Review the preview to check spacing and alignment.

Change header background color

The Background color setting controls the main header background.

Steps:

1. In Header Bar, find Background color.
2. Choose a color or enter a color code.
3. Review the preview.

Change header text color

The Text color setting controls the color of menu text and other header text.

Steps:

1. In Header Bar, find Text color.
2. Choose a color or enter a color code.
3. Check the preview to confirm readability.

Change navigation background color

The Navigation background setting controls the background color behind the navigation menu area.

Steps:

1. In Header Bar, find Navigation background.
2. Choose a color or enter a color code.
3. Review the preview.

Enable or disable full width

The Full width option controls whether the header stretches across the full width of the page.

Steps:

1. In Header Bar, find Full width.
2. Turn the toggle on or off.
3. Review the preview.

Fix the header when scrolling

The Fix header when scrolling option keeps the header visible while customers scroll down the page.

Steps:

1. In Header Bar, find Fix header when scrolling.
2. Turn the toggle on or off.
3. Test the preview by scrolling the page.

Tip
A fixed header makes it easier for customers to access the menu, search, and cart while browsing

Save and publish changes

After customizing the Header, save your work.

Steps:

1. Click Save in the top-right corner.
2. Review your storefront again.
3. Click Publish if you want the updated theme to go live.

Note
If your theme is already live, saving may update the current theme directly depending on your setup