Header (common, top part of the shop)

Owned by Marta Siewierska-Stańczak
Last updated: Nov 15, 2023
7 min read

TABLE OF CONTENTS

Topbar

Magesuite standard

 

Topbar is a thin bar above all other content. It consists of:

ID

 

Comment

ID

 

Comment

1 and 2

2 editable static blocks - USPs and Hotline blocks with texts

blocks IDs are:

header_topbar_hotline

header_topbar_usps

By default these blocks are hidden on mobile. However some shops still show it, but only with the most important texts

3

Sign-in/ sign-out links

On mobile they are moved to the offcanvas navigation (see proper chapter)

4

Language switcher

On mobile they moved to the offcanvas navigation (see proper chapter)

 

Live shops customization examples

URL

Mobile

Desktop

URL

Mobile

Desktop

https://megaport.de/

 

https://www.das-tierhotel.de/

 

 

https://www.krueger-dirndl.de/de/

 

 

https://www.toys-for-fun.com/

 

 

 

Header

Magesuite standard

 

ID

 

Comment

ID

 

Comment

1

Offcanvas menu toggle (burger)

only for mobiles, can be placed on the right or left (see scenarios below)

2

Logo

can be different on mobile/desktop

3

Search input trigger

In basic scenario only on mobile

4

Search field

 

5

User nav account link

5, 6, 7 elements should be placed next to each other

6

User nav wishlist link

 

7

User nav offcanvas minicart trigger

 

 

Magesuite optional scenarios

Functionality

Screens

Comment / Dev hint

Functionality

Screens

Comment / Dev hint

Possibility of special styling for a teaser.

On the frontend it is possible to prepare custom styling for some image teasers. The simplest modifications are:

  • decrease or remove bottom space below given teraser

  • remove spacing between slides in a teaser (this styling can be also introduced as a general rule)

  • change font size/color of texts

  • make images scaled on hover

In order to learn if more advanced customizations

 

Frontend Customizations - examples | Add a special variant for image teaser

 

separate mobile/desktop logos

 

<var name="mobile_logo_path">images/logo-mobile.svg</var> <!-- If path present separate logo (f.e. reduced) is displayed on mobile resolutions (below tablet). In the checkout there is always a standard logo. --> <var name="mobile_logo_width"></var> <var name="mobile_logo_height"></var>

The feature is not tested in a live project

mobile back button

 

<var name="mobile_back_button">true</var> Browsing history back button for mobile devices

Back button is not visible on the homepage

The feature is not tested in a live project

mobile header placed on the bottom

 

<var name="mobile_is_bottom">true</var> The default position of the header is on the top for mobile, but bottom position (true value) is also supported.

The feature is not tested in a live project

 

Live shops customization examples

URL

Mobile

Desktop

URL

Mobile

Desktop

https://megaport.de/

Menu burger on the right. Search input in offcanvas menu.

Header and navigation combined into one row

https://www.haar-shop.ch/en/

 

For logged in customer Hi + their name is displayed

https://www.claireluise.com/en_de/

minimalistic header

Header and navigation combined into one row

https://ipet.ch/

 

 

 

Search field

The basic position and behavior of the search field are shown in the chapter Header of this documentation (see above). On mobile the search field slides out when the magnifier icon is clicked. On the desktop, the field is visible all the time. However, magesuite offers additional positions and behavior scenarios for search input.

Magesuite optional scenarios

Functionality

Screens

Comment / Dev hint

Functionality

Screens

Comment / Dev hint

search in offcanvas on mobile

 

search always in a dropdown, even on desktop

 

 

search inputcovers search trigger and is displayed on the left of trigger icon on desktops

 

 

 

Live shops customization example

URL

Mobile

Desktop

URL

Mobile

Desktop

https://megaport.de/

 

Menu burger on the right. Search input in offcanvas menu.

Search covers navigation

https://www.krueger-dirndl.de/de/

 

 

https://www.nkd.com/de_de/?forced=1

Search filed always visible and sticky to the header

 

https://shop.rieker.com/de-de/

 

Search field below navigation on desktop

Offcanvas navigation (mobile)

Magesuite standard

Click on a burger on the left or right side of the header in order to see the offcanvas mobile navigation:

Magesuite optional scenarios

Search input inside offcanvas

Live shops customizations

Url

Mobile

Url

Mobile

https://roeckl.com/de/

 

https://haka.com/

 

https://www.micro-scooter.com/ch_de/

 

https://www.krueger-dirndl.de/de/

 

https://megaport.de/

 

Main navigation (desktop)

The main navigation bar contains first-level categories.

Live shops customizations

URL

Desktop

URL

Desktop

https://www.claireluise.com/en_de/

 

https://www.haar-shop.ch/en/

 

https://megaport.de/

 

https://www.toys-for-fun.com/

 

Navigation flyout (desktop)

Navigation flyout displays second and third-level categories. Additionally, it can display a teaser (one predefined scenario) or featured products.

Magesuite standard

URL

Desktop

URL

Desktop

https://www.haar-shop.ch/en/

 

https://haka.com/

 

https://megaport.de/

 

https://www.toys-for-fun.com/

 

https://www.micro-scooter.com/ch_de/

 

https://roeckl.com/de/

 

Salebar widget (optional module)

Additionally, or as an option for a topbar, the salebar widget can be added at the top of a page. This is an admin panel customizable bar (text color, background color, texts), with additional counter possibility.

The module can be used in order to display important information:

 

Navigation mega dropdown (optional module)

There can be a mega dropdown with all menu items added, as the first main navigation element on the desktop.

Live shop example: https://www.pack2go.de/

 

Category icon (optional module)

Additional icons configured per each category can be added to the navigation/

Â