Theme Header

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.

Step 1: Access the Header Section

1. Open your website in the Page Builder.
2. Look at the left-hand panel—this is where all your page sections are listed.
3. Find and click on the “Header” section. This will open up the header editing options on the right side of your screen.

Step 2: Change the Logo

1. In the header settings, locate the section labeled “Logo”.
2. Click on the “Change Image” button.
3. Upload your new logo from your computer or select one from your media library.
4. Once uploaded, your new logo will appear in the header.

Tip: Use a high-resolution image for better visual quality.

Step 3: Choose a Different Header Layout

1. In the same header section, click on “Change Header”.
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: Each version has a different design and layout. You can preview them before deciding.

Step 4: 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.

Step 5: Customize Header Styling

1. Click on the “Style” tab within the header section.
2. Here, you’ll find options to:
• Adjust layout spacing
• Modify font styles
• Change colors and backgrounds
3. Make changes according to your brand style.

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

Step 6: 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.