Header

In this knowledge base article, you will know how to set up the Header in Electro theme.

As you can see, you can customize the header by set up for these part:

General

Firstly, Electro theme lets you activate or deactivate the drawer menu on large screens and sticky header. The header remains hidden while scrolling down and only appears when scrolling up.

The drawer menu is more commonly used on mobile devices to save screen space; additionally, when enabled on the larger screen, it can provide a clean and minimalist look to the store design.

Then, you will be able to configure the color scheme, and select between Scheme 1 or Scheme 2. If you want to change the color scheme, please go to the theme settings to update.

Logo

You can add the logo image in 2 steps as follows:

Step 1: Click the Select image button. The media manager will open up.

Step 2: Drag and drop your logo, or select it if it is already uploaded. Note that you can adjust Logo max width by default is 80px with min 40px – max 200px on a large screen and min 40px – max 140px on Mobile.

Navigation

You can customize the navigation in 3 steps as follows:

Step 1: Clicking on the Main menu, it will direct you to go to your Shopify store’s main menu page.

 

Step 2: Click on the Add menu item then enter the menu item name and link (existed link or a new link is available)

Step 3: Clicking on the Change button, you will have 2 option here:

• Change menu: you can select existing menu or create a new one

• Remove menu: remove the selected menu immediately.

Currency Selector

To enable the Show currency selector here, first, you need to add the currency in your Shopify store’s payment settings.

If the currency selector has been enabled, it will be displayed in the header, allowing customers to choose from the added currencies.

Search

You have the option to enable the full search box, which will display the entire search box rather than just an icon.

• If you disable full search box, the header just show the search icon, as shown below:

• If you enable the full search box, the header will display the complete search box and its accompanying icon, as shown below:

Quick Links

You can Show quick links on menu drawer here. Please note that you have to set up the quick link from theme settings first.

Contact Information

At this part, you can enable or disable the Show email address and phone number on menu drawer. Please note that the email address and phone number which have been set up from Theme settings.

Mega menu

The mega menu is a dropdown menu that can display a list of child menu items under a parent menu item. With the Electro theme, you can add up to two blocks with image backgrounds and headers to showcase products, collections, or any page on your store. In the header section, you can add up to three mega menus.

Note: To create child menu items, go to your Shopify admin > go to Online store > Navigation > Menus. Drag and drop child menu items into the parent menu item.

To adjust the settings for a mega menu in the Header section, click on the mega menu.

The Menu item name here must match the parent Menu item name in Shopify menus in order to appear in the header. You can change name or add more menu items by accessing the Shopify admin > Online store > Navigation > Menus.

In the Promotional Content, you can set up an image background, overlay opacity, heading text, and a link for the block.

• Overlay opacity: You can adjust the opacity of the overlay image. This will allow you to see the text and other content behind the image.
• Image: The recommended dimensions for the image are 900 x 500px for best quality. To add an image, you can click the Select image button to choose an image from your store library or upload your own image. You can also click the Explore free images button to choose an image from Shopify’s free image library.
• Heading: You can insert the heading text by filling in the designated field. You also have the option to add a direct link to the heading. If you want to remove the heading, simply delete the text in the heading field.
• Link: You can select the page where you want to redirect visitors to by entering the URL in the Link field.

The settings for Promotional Content 2 are totally the same as the first one.

Check this video tutorial below to learn more: