Header

The header is the top section of your store, containing key elements like the logo, navigation menu, search bar, and cart icon to help customers navigate the site easily.

How To Install ?

To install Header section in our app. You can follow these steps and the images below:

  1. From our app, click Library

  2. In the Sections tab, search for the keyword "header".

  3. Click Install and Customize the header you want

  1. From the Shopify editor sidebar, click Add Section.

  2. Select the header section you want.

How To Use?

Follow Our Interactive Guide

HOW TO USE:

  1. Click the hotspot to see the next step. You can also use -> <- on the header tab to follow.

  2. To open window in a full screen, click for better experience

If you would like to add or edit the menu, you can find instructions here.

Mega Menu (Collection)

  1. Click Add Block.

  2. Select the Mega Menu (Collection) block.

  1. Enter the name of menu item. For example, I want to select the Shop item.

  2. Select the number of column displayed on desktop.

  3. Select the Collections to display on.

If you want to use multiple menu items in a mega menu format, you just need to write the menu items you want, separated by commas.

Mega menu (Banner)

  1. Click Add Block.

  2. Click Mega Menu (Banner) block.

  1. Enter the name of menu item. For example, I want to select the Shop item.

  2. Select the Number of Column Displayed on Desktop.

  3. Choose the Banner Position to left or right side.

  4. Select the Image you want to set it up as banner.

  5. In the Heading field, enter the title of banner.

  6. Choose the Heading Size, and insert the Link of banner or URL of product.

Mega menu (Products)

  1. Click Add Block.

  2. Click Mega Menu (Products) block.

  1. Enter the name of menu item. For example, I want to select the Shop item.

  2. Select the Number of Column Displayed on Desktop.

  3. Enter the Heading of product banner.

  4. Choose the Heading Size.

  5. Select the Products you want to display on the mega menu

  1. Choose the Media Ratio.

  2. Choose the Media Shape.

  3. Adjust the Content Alignment.

  4. Enable to show Add To Cart button.

  5. Enable to show Price.

  6. Enable to show The second image on hover.

  7. Enable to show Vendor.

  8. Enable to show Color Swatch

Mega menu (Product tabs)

  1. Click Add Block.

  2. Click Mega Menu (Product Tabs).

  1. Enter the name of menu item. For example, I want to select the Shop item.

  2. Select the Collections you want to display on the mega menu

  3. Select the Number of Product Column displayed on desktop.

  4. Choose the Media Ratio.

  5. Choose the Media Shape.

  6. Adjust the Content Alignment.

  7. Enable to show Add To Cart button.

  8. Enable to show Price.

  9. Enable to show The second image on hover.

  10. Enable to show Vendor.

  11. Enable to show Color Swatch.

Menu label

  1. Click Add Block.

  2. Click Menu Label.

  1. Enter the Label of menu. For example: Hot Items

  2. Select the Color Background for the label.

  3. Select the Color Text.

  4. Enter the Menu Name for the label.

  5. Select the Animation for the label.

Search suggestions

  1. Click Add Block.

  2. Click Search Suggestions block.

  1. Enable Recent Search function.

  2. Enter the Popular Search Keywords.

  3. Enter the Heading of Product Recommendation.

  4. Choose the Heading Size.

  5. Select the Product that you want to display on search bar.

  6. Display the Number of Columns on desktop.

  7. Choose the Media Ratio.

  8. Choose the Media Shape.

  9. Adjust the Content Alignment.

  10. Enable to show Add To Cart button.

  11. Enable to show Price.

  12. Enable to show The second image on hover.

  13. Enable to show Vendor.

  14. Enable to show Color Swatch.

If you don't want 'Popular searches' to be displayed, simply leave the 'Popular search keywords' field empty in the settings.

PreviousMoving SectionsNextProduct Detail

Last updated