Header Customisation

Your website’s header is often the first thing visitors see. A well-designed header can help reinforce your brand and make your site easier to navigate. This guide walks you through every step of customizing your header using the Mystore page builder.

1. Choose a Different Header Layout

Header v1:

Header v2:

Header v3:

1. In the same header section, click on “Change”.
2. You will see a few layout options such as:
• Header V1
• Header V2
• Header V3
3. Click on the version you like. Your header will update instantly to reflect your selection.

Note: You can change the logo in Store settings.

2. Select a Menu / Add Navigation

Select a Menu:

1. Below the header layout options, you’ll see a dropdown menu for navigation settings.
2. Click the dropdown and select the menu you want to show in the header.
3. The selected menu will replace the default one.

Reminder: Make sure the menu you choose is already created in your site’s menu settings.

Add Navigation:

You can create and manage your store’s navigation menus to help customers easily find pages, products, and collections. Follow simple steps below to do so:

1. Open the Navigation Editor
   • Click on the Add Navigation button.
   • A pop-up window will appear.
2. Create a Menu
   • Enter a Menu Name (e.g., “Main Menu”).
   • You can now start adding menu items.
3. Add Menu Items
   • Click the Add Item button.
   • For each menu item, select the Type (e.g., URL, Blog, Page, Brand, Collection, Product).
   • Enter the Link (where the item should point) and Title (what customers will see).
   • Click Add Item to add more items to the same menu.
4. Add Sub-Menu Items (Optional)
   • To create a drop-down or sub-menu, click the “+” icon next to a menu item’s title field.
   • Enter the sub-item details and click Add Sub Item.
   • Repeat to add multiple sub-items under a menu item.
5. Save Your Menu
   • Once all items and sub-items are added, click the Save button to apply your navigation menu.

Add Announcements:

You can add announcements in the header.

1. Enter Announcement Speed - e.g., 10s
2. Add Annoucement Text and Link - e.g., Free delivery on first order!

3. Customize Header Styling

1. Click on the “Style” tab within the header section.
2. Here, you’ll find options to:
• Adjust layout spacing - Margin, Margin mobile, Padding, Padding Mobile (eg., 0, 8, 12).
• Modify font styles - Text color, Link color, Link hover color
• Customize backgrounds - Background color, Background Image

Pro tip: Keep your styling consistent with the rest of your website for a clean look.

4. Add Custom CSS (Optional)

1. For more advanced customizations, go to the “Advanced” tab.
2. Look for a Custom CSS field.
3. You can write your own CSS code here to tweak the header’s appearance even further.

Caution: Only use this if you're familiar with CSS or have specific design requirements.