Header Section


Go to Store Admin > Online Store > Themes. Click Customize and then navigate to Header tab.

Navigate header settings

Header configuration
Header configuration
Style Select header type.
  • Header type 1 Header Type 1 on Green Electronics demo
  • Header type 2 Header Type 2 on Blue Electronics demo
  • Header type 3 Header Type 3 on Yellow Furniture demo
  • Header type 4 Header Type 4 on Navy Electronics demo
  • Header type 5 Header Type 5 on Blue Electronics demo
Padding Set header padding. If no value is given, default design value is applied.
Background color Set header background
Text color Set header text color
Logo settings
Logo
Logo type Select logo type (image or svg).
  • I am using image logo: You are going to upload an image for your logo.
  • I am using svg logo: You are going to upload a svg logo and use.

    How to use SVG logo
SVG file name Input the SVG file name you created.
Logo image Set logo
Mobile logo image(Optional) Set mobile logo
Custom logo width Set maximum logo width. Default value is 250px.

Header menu with mega style 1

How to create menus and style


Menu settings
  • Main Menu: Select main menu you created. See how to create menus in Shopify.
  • Align menu center: Center the menu in the header
  • Sticky header: Show sticky header when scrolls down
  • Show Dropdown Icon: Show/hide dropdown arrow beside menu items that have child menu
  • Space between menu items: Set the space between menus. Unit is pixel

Apply mega menu styles

Venedor supports easy way to apply style on menu items. See how to create mega menus and add eye-catching labels below.

Add mega menu style

You can add menu styles dynamically at the bottom of settings panel.

Add mega menu style

Click Add content > Main Menu Style at the bottom of the settings sidebar.

Input navigation label to apply style. Select images to show at the top and bottom.

Add mega menu style

Add menu item tooltips

Venedor supports easy way to apply style on menu items. See how to create mega menus and add eye-catching labels below.

  1. Click Add content > Menu Icon Tooltip at the bottom of the settings sidebar.
  2. Input name of the menu item you are going to add tooltip.
  3. Select tooltip type.
Add mega menu style

Promotion on Header

This settings only works on header type 2.

Header promotion setting
Header promotion example

Search box

You can add predictive search in the header so that suggested results appear immediately as you type into the search field. Predictive search helps customers articulate and refine their search queries, and provides new ways for them to explore an online store. It also lets them quickly browse matches without having to leave their current page to see a separate list of search results.

Add header search

At the bottom of section settings, you can find a button called + Add content.
Click the button and then select Search Box.

Header search setting
Search Configuration
Style
  • Show box
  • Popup box
  • Popup line
See example images
Icon Name of the svg icon to use for search button. Browse our icons.
Icon size Set the svg icon size. Default is 14px.
Search box border Set the border width of search button and textbox
  • Hide
  • 1px
  • 2px
Search button color Set color of search button.
Search button color on hover Set color of search button when it's hovered.
Search input box border color Set border color of input box.
Search input box text color Set text color of search box.

Header cart

Header type 2, 3, 4, 5 support cart icon. Header type 1 does not show cart icon in its design.

Add header cart

At the bottom of section settings, you can find a button called + Add content.
Click the button and then select Cart Dropdown.

Header cart config
Header Cart
Icon size Set the cart icon size. Default is 14px.
Cart style
  • Show cart amount beside the icon
  • Show cart amount on the icon
  • Show only cart icon
See example images
Cart background color Set background color of cart
Cart text color Set text color of cart
Cart icon color SVG cart icon color
Cart amount position Set the cart amount position
Cart amount background Set the background color of cart amount
Cart amount text color Set the text color of cart amount

Wishlist, Comparison list, Customer Login Link

You can add/remove/customize these links in the header dynamically. And also change their positions by drag/drop them.

Other links