Header Menu

The header is the top section of your website and appears on all subpages, and that’s exactly why it’s essential to have all the necessary information easily accessible for your customers. Let's take a look at the steps.

First, to edit the header, navigate to the Editor and hover over the header element. Then click Edit Header Component.

Website Title and Icon

In the first tab, you can add your website title. For the icon, you can add your own or generate one using AI. Configure the height, width, and link for the icon. Typically, clicking the icon should navigate to your homepage (index page). Don’t forget to add an image alt text for better SEO.

Buttons

Next, you can add buttons to your header. You have the option to add one or two buttons, or remove them entirely. These buttons can be configured further. For instance, you could add a "Buy" button. To track clicks and conversions, add analytics tags as outlined in our Get Started documentation.

Color Variants and Links

Configure additional color variants for your header. Add links to either external websites or internal pages by selecting the desired page from your site. If you're unsure of the page name, you can copy the slug from the page URL and paste it here.

Styling and Positioning

Adjust the alignment, text colour, and background to match your site’s design. You can also fix the header’s position on the page to create a more distinct separation from the rest of the content. Custom styles and header sizes can be configured to suit your preferences.

Header List

The header list includes the navigation items visible on your header. It’s simple to add new items, but keep in mind that space is limited. Aim for around four to five items to avoid overcrowding. You can nest items to create submenus, rearrange the order, and add icons or descriptions.

For example:

• Shop: Link to your shop page.

• Products: Nest under "Shop" and link to specific product categories.

Tips and Best Practices

Here are some tips to get the most out of your header configuration:

• Be Specific: Ensure your title and button labels are clear and descriptive.

• Experiment: Try different styles and configurations to see what looks best.

• Stay Organized: Limit the number of header items to avoid clutter.