Header

Introduction

The Header is the section present at the top of each Jumpseller theme and is one of the most important sections for any E-commerce store.

It provides access to many of the key elements that will allow clients to navigate through your store, such as your Logo (or Store name), Currency and Languages items, the Cart item, among others that will be explained further in this page.

In terms of the Visual Editor of your store, even when the Header itself it’s also a Component, it cannot be moved or re-positioned anywhere else like the rest, as it must show and appear at the very top of each Template (e.g. Home page, Categories, Products, etc.) to provide a consistent functionality and presentation.

---

Component settings

Next, you can find the list of options that will allow you to customize it.

Header Version

This option allows you to choose from different Header designs, in which their differences vary from aspects such as the following:

• The position of the Logo or Store name.
• The position and look of the Search bar.
• Where and how Social networks links are positioned, if enabled.
• How the Main menu navigation items are displayed and where.
• If the Desktop menu is displayed, and where and how.
• The position of the Header items such as the Login, Languages, Wishlist and Cart.

Next, you will find some examples for how each version looks, so you can have a clear view of what you could achieve when choosing any of them.

Note: Here we will refer mainly to the differences on Desktop devices, as for Mobile devices most versions are basically the same in terms of design, with just minor differences between them.

Classic

This version is the one that will come installed by default once you create a store in Jumpseller, or when you install the Simple theme. Within its most important features we can layout the following:

• The Logo or Store name it’s always positioned at the center.
• The Search bar it’s a form in which you can directly type to search for products, and it’s positioned always at the left side.
• At the right side of the Header, you will find the items for customers to perform different actions such as for example Log in and Languages.
• At the bottom part, the Desktop menu is fully visible and hides on Mobile devices.

Retail

This version is the one that comes selected by default on the Mega theme. If you didn’t installed it, but you want to achieve what can be seen on the image above, there are certain options that you will need to activate:

1. Go to the Header component settings and choose Retail.
2. Next, enable the option Show Categories menu, in which case you can edit the options that will become visible.
3. Open the Other options group and within the Header actions display option choose Top bar. You can also enable the Show social networks links option.
4. Then, go back and access the Desktop menu settings, and within the Menu alignment option choose Left.

Compact

This version is the one that comes selected by default on the Starter theme. If you didn’t installed it, but you want to achieve what can be seen on the iamge above, there are certain options that you will need to activate:

1. Go to the Header component settings and choose Compact.
2. Next, open the Other options group and enable the Show social networks links option, so these can be visible at the left side of the Header.

Prime

This version offers a more minimalistic look, where some elements behave in a different way than the previous versions, like for example the following:

• the Logo or Store name will be always positioned at the center.
• the Desktop menu is not visible in any device, and therefore, all the navigation items from the Main menu will be displayed within the Mobile menu panel.
• the Mobile menu is the one that will be used on all devices, Desktop and Mobile.
• the Search bar will open on top of the Header through a button, the same way it does on the previous Header versions on Mobile devices.
• Social networks links will be displayed at the left side of the Header, if enabled.
• the Categories menu items will be displayed within a panel, which can be opened through a button in a similar way than the Mobile menu.

Note: the Desktop menu component even when active, will not be displayed in the storefront.

Slim

This version offers a more “slim” look –hence the name– where elements are intended to use the less possible amount of space. It works similar to the Prime version, but considering the following differences:

• The Logo or Store name will be always positioned at the left side of the Header.
• the Desktop menu will be visible on Desktop devices along with the rest of the elements.
• the Mobile menu will be used on smaller devices and can be opened through the Menu item.
• the Search bar will open on top of the Header through a button, the same way it does on the previous Header versions on Mobile devices.
• Social networks links will be displayed at the right side of the Header, if enabled.
• the Categories menu will be displayed as the first item of the list and will be accessible through it’s respective panel in Mobile devices.

Minimal

This version of the Header offers a different experience, focused on the search behavior by displaying a big and wide field that covers the majority of the space, as well as a secondary Navigation bar which is displayed on Mobile devices. It comes already selected if you choose to install the Delivery theme.

The elements within this section will behave as follows:

• The Logo or Store name will be always positioned at the left side.
• Both Desktop and Categories menus are accessible through the respective items, opening a sidebar panel for each one. This way, the experience in all devices it’s exactly the same.
• The Cart and Login items are displayed at the right side of the Header on big devices. In Mobile devices, they will be displayed in the Navigation bar located at the bottom part of the browser.
• The Search bar will display on the Header for devices that have a width equal or greater than 576px. For devices less than that, it will be accessible through a modal window that displays at the top part of the browser window.
• Items such as Languages, Currency and Social networks will always be displayed within the Mobile menu panel.

Mobile Navigation bar

As it was mentioned, this version of the Header automatically displays a secondary section, located and fixed at the bottom part of the browser window. Its focus is on providing an experience similar to “Delivery” apps, offering the most useful links and items inside of it. These are following (from left to right):

• Home link: displays at the left side of the navigation bar, allowing clients to quickly head to the Home page of the store.
• Categories button: if you have enabled the Categories menu option within the Header settings, the Home link will be replaced with another one that opens the Categories panel.
• Search: this item is the one that allows to open and display the Search bar, which will be visible at the top part of the browser window.
• Cart: this item is the link that allows to open the Sidebar cart panel, which has a summary of the clients order. It also contains the “Counter” that let clients know the amount of items they have added.
• Login: this item provides a link to the page where clients can log in to their accounts. If they’re already logged in, it will open up a dropdown menu with several links related to their account.
• Contact: this item provides a quick access to the store’s Contact page.

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

Fixed Header

It allows you to fix the Header at the very top of the browser window, so it follows users as they scroll up and down in the store.

When enabling this option, additional ones will also become available to be used and applied:

Overlap

Allows to make the Header be put on top and ahead of all the content of the Homepage of the store.

When enabled, an option called Overlap transparency will show with which you can define the Header’s transparency (opacity).

Note: This option will work only on the Home page of your store and it’s recommended to be used along with a component that has an image and it’s positioned in the first place, like for example a Slider or Big Banner.

Floating style

Allows to display the Header with top, right and left margins or spaces so the content behind is able to be seen when scrolling down.

When enabled, an option called Shadow opacity will show, with which you can display a shadow behind the Header, to increase the contrast with the rest of elements within the theme.

Floating toolbar

Allows to move the the Cart, Search and Login items outside the Header and within its own section, with button styles.

When enabled, an option called Toolbar position will show, with which you can choose its position.

Logo options

This group of options allows you to upload a Logo for the Header, based on the following:

Logo

The one you upload here will replace the one added within your store’s admin panel at Settings > General > Branding.

When uploading it, a new option called Logo (mobile) will show in which you can add another only for mobile devices, which will display in devices that have a width ≤575px.

Note: If you don’t upload any logo here, the Store name defined at Settings > General > Preferences will be displayed instead.

Logo height

You will find two options to handle the height of the logos, for both desktop and mobile devices.

This will be applied to the logos added through the component, as well the one added through the store’s admin panel.

Menu items

This group of options allow you to adjust design aspects about the items (links) of the Desktop and Mobile menus of the Header.

Sizes

With the options Size on desktop menu and Size on mobile menu you can manually adjust the size of the items when visualizing the Main menu on the respective devices.

First level items in all caps

Allows you to force the name of the items to be displayed in uppercase text, even when they weren’t written like that: e.g. ALL PRODUCTS.

Weight

Allows you to define the weight for all items.

Note: This will depend on the available variables of the font that you have defined for the Main font option within Theme settings > Fonts > Font selection.

Show as button

If enabled, the first level menu items will be displayed as buttons, only on desktop devices.

A secondary option will show in which you can define the Style of the buttons, based on the Main or Secondary colores from the Color pack defined for the Header.

Note: If you set a different Color pack within the Menu subcomponent, the buttons will consider the styles of that one instead.

Header items

This group of options allow you to adjust design aspects about the items like for example Currency, Language, Login and Cart.

Sizes

With the options Size (desktop) and Size (mobile) you can manually adjust the size of the items when visualizing them on the respective devices.

Separation border

Allows to display a vertical line between the items to create a visual separation.

Other styles

The following options allow to perform and apply the same effects than the ones mentioned above, but in this case for these items:

• All caps
• Weight
• Show as button and Style

Categories menu

By enabling the option Show menu, an additional menu will display at the start of the list. The items of this one, will be the ones added in Navigation > Categories Menu.

The position in which this will be placed will vary depending on the Header version you have chosen.

The following options will be displayed too for you to customize it:

• Display on: Allows to define in which devices it will show.
• Title: Allows to modify the text of the item for this menu.
• Icon: Allows to modify the icon that goes along the item text.
• Show as button: Allows to apply a button style to the item that opens the dropdown menu. This style will also be applied if you enable Show as button within the Menu items group above.
  • Style: Allows to define the style of the button, in the same way as it was explained above. This will override the other Style option within Menu items.

Appearance

This group of options allows you to define other design aspects and behaviors of the Header.

Bottom border

Allows you to show a border at the bottom of the Header. This can help to create a visual separation between this component and the rest of the content that comes after it on the theme.

Actions position

Allows you to define the position in which the Currencies and Languages items will be displayed.

When choosing Top bar within this option, there are a few things you need to consider for it to work properly:

• You need to have added a Top bar component inside the Header, and have at least one Top bar slide.
• You need to have at least 2 or more Currencies, and/or 2 or more Languages added within your store settings.
• If you don’t have more than one Language and/or Currency, and you set the actions to be visible in the Top bar, you will see a blank space at the right side of this section.

Social media links

Allows you to display all the links (and their icons) that you can add in your store’s Admin panel at Settings > General > Preferences > Social media.

The position in which these links appear will depend on each Header version.

Content colors

Allows you to choose the Color Pack for the Header.

Menus used in this context

It provides a direct link to the configuration of the Navigation menus that this component uses. For this case you will find the following:

• Main menu
• Categories menu

---

---

Menu (desktop)

The Menu is a subcomponent of the Header and allows you to display the navigation items defined at Customization > Navigation > Main Menu for Desktop devices with a width equal or greater than 992px.

This menu will hide on devices that have a width equal or lower than 991px, and when that occurs, an item will display at the left side of the Header, which will allow to open the Mobile Menu upon click.

This item will also displays if you choose to hide the Menu subcomponent as well.

More details about this can be found in this section of the documentation.

The available options for customizing it are the following:

Layout

This group contains options to change the design of the component.

Width

Allows you to define its width based on the following options:

1. Header width: It will expand the content of the menu based on the option defined within the Header’s Width settings.
2. Full width: It will expand the content to the maximum width of the browser, regardless of the Width defined on the Header settings.

Top border

Allows you to show a border at the top of the menu, to separate it from the rest of the content that’s above.

Left and right space

Allows you to decide if the menu will have a space on the left and right side of the browser. Useful if you choose to use the Full width option above.

Alignment

Allows you to define the alignment of the items present in the menu.

If you have enabled the Social media links option and these display within menu, the alignment will will work as follows:

• Left: Menu items will be positioned at the left side, while social links at the right.
• Center: All items, including social links, will align and position at the center of the section.
• Right: Menu items will be positioned at the right side, while social links at the left.

Customize colors

With this option you can define an invidual Color pack just for this menu, so it differentiates from the rest of the Header’s content.

When enabled, the Content colors option will show, in which you can choose a Color pack to use.

Submenus

This group of options allow you to define the behavior of the Submenus, which are a list of items for an item that has inner levels.

Open event

Defines the mouse event that will open a dropdown menu for first level items that have sub-items inside of it.

Depending on what you choose, this will change the way in which the first level items behave, so it’s important to consider the following:

• On click:
  • The dropdown menu will only open once a user clicks on the first level item, and it will close when clicking anywhere else outside.
  • The first level item will not take to any page when clicking on it, therefore, if this is for example a category, it will only be accessible by clicking on the “View all” item at the end of the dropdown menu list, if enabled.
• On hover (or mouseover):
  • The dropdown menu will open once the user places the mouse over the item, and it will close automatically once the mouse it’s positioned outside its area.
  • The first level item will take to the content that was defined in the navigation’s Main menu configuration (e.g. category, product, page, etc).
  • The only instance in which it won’t take to any content of the store on click, will be if the item type it’s equal to No URL.

Style

Allows you to define the look of the Dropdown menus, based on two options:

Flyout

Sub-items will stack one below the other vertically. If any of these also have levels inside, they will display at the right side.

Consider the following regarding the behavior of this option:

• Nested dropdown menus will inherit the “mouse event” defined at the option above, e.g. third, fourth and deeper levels.
• Take into consideration the amount of sub-items within each dropdown menu, as if you add too many of them and the list becomes extremely large, it will be most likely that the last ones will not be fully visible within the browser window.

Mega Menu

Sub-items will be distributed within columns within a big and wide dropdown menu, to allow sufficient space for all of them to be visible.

Consider the following regarding the behavior of this option:

Depth: It is recommended that you have at least 3 levels for each item to work properly, like for example:

• Jackets (1st level)
  • Leather jackets (2nd level)
    • Brown leather jackets (3rd level)
    • Black leather jackets (3rd level)
  • Wool jackets (2nd level)
• Pants (1st level)
• Shirts (1st level)

Note: 4th level items (or deeper) won’t be displayed at all.

Mouse event: This submenu will also inherit the behavior defined at the Submenus open event option, and therefore, it will open based on that.

Amount of columns: 2nd level items will distribute at a maximum amount of 6 columns within the horizontal axis. Therefore, if you have more than six 2nd level items, the rest will be stacked and positioned below within a new row. On the opposite, if you have five or less 2nd level items, they will adapt accordingly within one single horizontal row.

‘View all’ link

Allows to show a link that takes to the main level of each navigation item.

Mega menu options

This group of options will become visible if you chose Mega menu within the Style option above.

With them you can adjust the following:

Custom columns

If enabled, you will be able to define the amount of columns that each 2nd level item will have, related to the full width of the dropdown, by choosing between 3 and 6 within a new option called Columns amount.

If disabled, they will arrange automatically based on calculations made within the theme, depending on how many sub-items each dropdown menu has.

Item images

With this option you can choose to display the images for items of type Category, Product or Page. If it’s another type of item, no image will be displayed. The same will happen if any of the item that do allow it, don’t have images.

When enabled, you will also be able to choose the Ratio (or dimension), as well as the Position at which the images will be displayed.

---

---

Menu (mobile)

Even when the Mobile Menu it’s not a component that’s available within the Header of the theme, it’s a section that will display and be accessible in the following contexts:

1.- Hidden Menu component

If you choose to hide the Menu, an item will appear at the left side of the Header and will allow to open the Mobile Menu, for all types of devices (Desktop and Mobile).

Note: the position of the item that opens the Mobile menu will vary within the Header, depending on the Header version you choose.

Example of how the Header will look when the Desktop Menu is hidden on a Desktop device.

2.- Tablet and Mobile devices

Even when we usually refer only to mobile devices within this documentation, more than often this also -inherently- includes Tablet devices.

The Mobile Menu will be automatically accessible for devices that have a width equal or lower than 991 pixels, and therefore, the Menu will hide in devices less than that.

---

---

Top Bar

This subcomponent of the Header allows you to add multiple child items called Slides. These will be displayed always within a carousel.

Component settings

The options for you to customize it are the following:

Width

Allows to define the width of the section, based on the following options:

• Header width: It will expand the content of the menu based on the option defined within the Header’s Width settings.
• Full width: It will expand the content to the browser’s maximum width.

Fix Top bar

Allows to fix (stick) the Top Bar at the top of the browser window so it follows users as they scroll up and down in the store.

This will only be applied on Desktop devices that have a width equal or greater than 576px.

For devices with width less than that, the Top Bar will be positioned below the Header.

Autoplay

If enabled, Slides will automatically transition from one to the next based on the speed defined below.

Also, the option Autoplay speed will show so you can control time or speed at which the carousel will wait to move from one Slide to the next.

A third option called Continuous autoplay will also be available, which will make the carousel have a transition that will make seems like it’s infitite.

When enabling this, Autoplay speed (mobile) will allow you to define the speed just for mobile devices.

Content colors

It allows you to choose the Color Pack for the entire Top bar.

Subcomponent settings

Slides are the children elements of a Top Bar component and they have the following options to customize them:

Icon

Allows you to display an icon at the left side of the text.

Text

Here you can add the text to be displayed on the Slide.

Link

Allows you to add a link to any content of the store, such as Categories, Products, Pages, etc.

When adding one, the following options will also become available to be used:

• Link text: Mandatory. Text that will be displayed in the link.
• Enable as external link: If enabled, the link will open in a new browser tab.