Guide to new version of mobile headers

This breaking change enhances mobile headers in all 3rd generation templates. Most visible changes are sticky header reacting to user scroll, reduction in number of icons, and shift of login and currency/language selects to mobile menu. There are also many minor style improvements.

Versioning does not affect templates of older generations (e.g. Pop or Soul) in any way. It does not effect headers on desktop, only on mobile.

All of the changes are applied only if option for mobile header version is switched to 1 (0 is status quo). The newest Disco template already has version 1 as default. Other templates have default version 0 , but projects using these templates will be gradually moved to the newer version.

You can see the new version live in our showcase e-shops https://step.shoptet.cz/, https://classic.shoptet.cz/ etc.

Please contact Shoptet support if you want to try the newer version in your testing project. If you are addon author, make sure that your code supports both current and new version. After 11th October 2021, first e-shops will gradually switch to the new version.

How to detect which version is currently active

List of changes

HTML

There is only one addition after new version is activated. <ul class="navigationActions"> element is added to navigation. No HTML is removed.

JS

If new version is active, classes scrolled and scrolled-down or scrolled-up are dynamically added to html element in reaction to user scroll. It is the same behavior that can be already seen in Techno and Waltz templates.

CSS

This is where most of the changes are applied (so they can be easily overridden). If new version is activated, there are only additions in CSS, no removals. You can find and examine these in Shoptet GitHub repo.

For each template, two .less files are compiled to CSS and added to the end of Shoptet stylesheet:
style updates common for all templates
– style updates specific for the given template, e.g. styles for Samba template

When transition period between versions is over and all users move to the new version, these style updates will be merged to their respectives places in ordinary style files (modules and components). This should have no visible impact.