Header (common, top part of the shop)
- Marta Siewierska-Stańczak
- Alicja Woźniak
TABLE OF CONTENTS
Topbar
Magesuite standard
Topbar is a thin bar above all other content. It consists of:
ID |
| Comment |
|---|---|---|
1 and 2 | 2 editable static blocks - | blocks IDs are:
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
Header
Magesuite standard
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 |
|---|---|---|
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:
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 devicesBack 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 |
|---|---|---|
 Menu burger on the right. Search input in offcanvas menu. |  Header and navigation combined into one row | |
|  For logged in customer | |
 minimalistic header |  Header and navigation combined into one row | |
| 
|
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 |
|---|---|---|
search in offcanvas on mobile |  
| <var name="mobile_search_in_offcanvas">true</var>
Search input can be moved to the offcanvas
if set to true. |
search always in a dropdown, even on desktop |  
| // Set up behavior of 'search' trigger item (search/magnifier icon) on header user nav. Possible options:
// - breakpoint - search icon will be visible upto breakpoint, above breakpoint search icon will be hidden
// - true - search icon will be always hidden
// - false - search icon will be always visible
$global_header-hide-search-item-trigger-breakpoint: false;
// Set up from which breakpoint search input will be visible as a normal header element (layer), by default between logo & user nav.
// Below defined breakpoint search input is located as a dropdown below header. After the search icon is clicked search input is toggled.
$global_header-searchbox-as-layer-breakpoint: false;
|
search inputcovers search trigger and is displayed on the left of trigger icon on desktops | 
| // If you want to cover 'search' item in header by searchbox, provide proper negative margin based on your design
// It works only if '$global_header-searchbox-as-layer-breakpoint' has valid breakpoint,
// `$header_searchbox-justify-content` = flex-end and
// `$global_header-hide-search-item-trigger-breakpoint` = false
$header_searchbox-margin-to-cover-search-item: -6.8rem;
|
Live shops customization example
URL | Mobile | Desktop |
|---|---|---|
Menu burger on the right. Search input in offcanvas menu. |  Search covers navigation | |
Trachtenmode & Dirndl - hochwertig & modisch | Krüger Dirndl |
| 
|
 Search filed always visible and sticky to the header |
| |
|  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
Main navigation (desktop)
The main navigation bar contains first-level categories.
Live shops customizations
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
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:
For more information see https://creativestyle.atlassian.net/wiki/spaces/MGSDEV/pages/2303558054
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/
For more information see: https://creativestyle.atlassian.net/wiki/spaces/MGSDEV/pages/2306605057
Category icon (optional module)
Additional icons configured per each category can be added to the navigation/
See https://creativestyle.atlassian.net/wiki/spaces/MGSDEV/pages/2299363533 for more information