Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby w wersji mobilnej posiadał nowoczesne dolne menu nawigacji.

Wskazówka

Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka

Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ’ „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

1. Pierwszym krokiem jest dodanie pliku z kodem dolnego menu. W tym celu w plikach szablonu otwórz katalog partials a w nim utwórz plik bottom-menu.html. Wklej do niego poniższy kod:

Dodanie tłumaczeń

Następnie należy dodać tłumaczenia. W tym celu otwórz Panel Administracyjny, a w nim odpowiednio Wygląd sklepu -> Ustawienia -> zakładka Tłumaczenia. Aby dodać nowe tłumaczenia, kliknij przycisk Dodaj, podaj odpowiednie Id, Tekst i zatwierdź przyciskiem Dodaj. Lista tłumaczeń do wprowadzenia (Id – Tekst):
1. Start – Start
2. SearchInShop – Szukaj w sklepie
3. Account – Konto

Wskazówka

Uważaj, aby przy kopiowaniu Id nie znalazła się żadna spacja przed ani po Id, w przeciwnym wypadku tłumaczenie nie wyświetli się w sposób poprawny!

Ustawienie wyświetlania etykiet w Panelu Administracyjnym

Dolne menu obsługuje ustawienie wyświetlania etykiet. Można je wyświetlać lub nie (wtedy zostają same ikonki). Aby wszystko działało poprawnie, otwórz plik __settings.liquid.
Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css. Wyszukaj linię o treści {% when '1′ %}. Pod nią wklej ten kod:

{% assign displayLabelsOnBottomNavigationMenu = "Wyświetlaj etykiety w dolnym menu nawigacji" -%}

W tym samym pliku wyszukaj linię z frazą {% else %}. Pod nią wklej ten kod:

{% assign displayLabelsOnBottomNavigationMenu = "Display labels in the bottom navigation menu" -%}

Poniżej znajdują się sekcje kodu do ustawień. Każda sekcja zaczyna się od <section> a kończy się </section>. Poniższy kod wklej tuż pod sekcją (czyli pod jej tagiem </section>), której kolejna linijka zawiera frazę productListType

Wskazówka

Po dodaniu niniejszego kodu, koniecznie otwórz zakładkę Wygląd sklepu -> Ustawienia w Twoim Panelu Administracyjnym, i wybierz „TAK” lub „NIE” przy nowo dodanej opcji włączania/wyłączania wyświetlania etykiet w dolnym menu!

Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css

@media only screen and (min-width: 769px){.bottomMenuBack{display:none}.bottomMenu{display:none}}@media only screen and (max-width: 769px){.bottomMenuBack{display:block;width:100%;height:56px}.bottomMenu{width:100%;height:41px;background-color:{{settings.primaryPageBgColor}};display:flex;flex-direction:row;flex-wrap:wrap;position:fixed;bottom:0;padding-top:10px;padding-bottom:5px;z-index:12}.bottomMenu .menuItem{flex:0 1 20%;margin:0 auto;display:flex;flex-direction:column;justify-content:center}.bottomMenu .menuItem .svgContainer{margin:0 auto;position:relative}.bottomMenu .menuItem svg{fill:{{settings.primaryFontColor}};width:20px;height:18px;margin:0 auto}.bottomMenu .menuItem .itemsCounter{position:absolute;border-radius:50%;font-size:9px;width:14px;height:14px;top:-5px;right:-6px;font-weight:500;color:{{settings.primaryPageBgColor}};background-color:{{settings.linkFontColor}};text-align:center}.bottomMenu .menuItem .text{font-size:11px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:300;font-family:{{settings.fontFamily}};text-align:center;margin:0 auto}.bottomMenu .activePage svg{fill:{{settings.linkFontColor}}}}

Dodanie funkcji

Następnie należy dodać odpowiednie funkcje do plików w katalogu js. W tym celu otwórz wspomniany przed chwilą katalog, a w nim otwórz plik layout0.js

1. Wyszukaj linię z frazą $(’body’).toggleClass(’noscroll’);. Kolejna linia pod nią zawiera znak }. Pod nią wklej następujący kod:

$('.headerMainMenu-js').scroll(function(){
    if(($(this).css('display') != 'none' && $('.bottomMenu').css('display') != 'none')) {
        if($(this).scrollTop() > 0) {
            $('.go-to-top__btn-js').fadeIn();
        } else {
            $('.go-to-top__btn-js').fadeOut();
        }
    }
});

2. Wyszukaj linię z frazą closePopup: function (e) {. Tuż nad nią wklej poniższy kod:

	showBottomMenuOnMobile: function () {
        var windowWidth = $(window).width();
        if(windowWidth < 769) { $('.bottomMenu').removeClass('hidden'); $('.bottomMenuBack').removeClass('hidden'); } else if (windowWidth >= 769) {
            $('.bottomMenu').addClass('hidden');
            $('.bottomMenuBack').addClass('hidden');
        }
    },

3. Modyfikacja funkcji dodawania i usuwania przedmiotów z listy ulubionych. Wyszukaj frazę productWishListAdd: function (e) {. Należy usunąć całą funkcję (od wyszukanej linijki włącznie, do najbliższej linijki o treści }, (ok. 13 linijek). W ich miejsce wklej ten kod:

productWishListAdd: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        $.post(null, data, function (result) {
            if (result.action.Result) {
                $(e.currentTarget).addClass(['active-js', 'productWishListRemove-js']);
                $(e.currentTarget).removeClass('productWishListAdd-js');
                sessionStorage.removeItem('wish-list');
                app.showTemporaryPopup(result.action.Message, 'success');
				if($(e.currentTarget).hasClass('addToFavouriteButton')) {
                    $(e.currentTarget).children('.favouriteIcon').addClass('wishList');
                    $(e.currentTarget).addClass('wishListBorder');
                }
            } else if (result.action.Code != 100) {
                app.showTemporaryPopup(result.action.Message, 'error');
            }
        });
        if($('.bottomMenu')) {
            var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) +1;
            $('.bottomMenu .menuItem .favouriteItems').text(items);
			if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .favouriteItems').addClass('hidden');
            }
        }
    },

Pod spodem znajduje się linijka o treści productWishListRemove: function (e) {. Usuń treść tej funkcji analogicznie jak poprzednio (do najbliższej linii o treści }, – ok. 13 linijek). Wklej w to miejsce następujący kod:

productWishListRemove: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        $.post(null, data, function (result) {
            if (result.action.Result) {
                $(e.currentTarget).removeClass(['active-js', 'productWishListRemove-js']);
                $(e.currentTarget).addClass('productWishListAdd-js');
                sessionStorage.removeItem('wish-list');
                app.showTemporaryPopup(result.action.Message, 'success');
				 if($(e.currentTarget).hasClass('addToFavouriteButton')) {
                    $(e.currentTarget).children('.favouriteIcon').removeClass('wishList');
                    $(e.currentTarget).removeClass('wishListBorder');

                }
            } else if (result.action.Code != 100) {
                app.showTemporaryPopup(result.action.Message, 'error');
            }
        });
        if($('.bottomMenu')) {
            var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) -1;
            $('.bottomMenu .menuItem .favouriteItems').text(items);
			if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .favouriteItems').addClass('hidden');
            }
        }
    },

4. Wyszukaj linię z frazą $(e.currentTarget).parents(’.inputs-container-js’).find(’.enterKeyTrigger-js’).trigger(’click’);. Pod nią będą dwie linie, pierwsza o treści } a druga o treści });. Pod nimi wklej poniższy kod:

$(window).on('load', function(e) {
            app.showBottomMenuOnMobile();
        });

        $(window).on('resize', function(e) {
            app.showBottomMenuOnMobile();
        });

        $('.showBottomMenuSection-js').on('click', function(e) {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        })

5.Wyszukaj linię z frazą updateProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $(’.incrementProductsInCart-js’).text(newValue);. Wklej tuż pod nią następujący kod:

if($('.bottomMenu')) {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue);
				if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) {
                    $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden');
                } else {
                    $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden');
                }
            }

6. Wyszukaj linię z frazą incrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $(’.incrementProductsInCart-js’).text(newValue);. Wklej tuż pod nią następujący kod:

if($('.bottomMenu')) {
            $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue);
			 if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden');
            }
        }

7. Wyszukaj linię z frazą decrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $(’.incrementProductsInCart-js’).text(newValue);. Wklej tuż pod nią następujący kod:

if($('.bottomMenu')) {
            $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue);
			 if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden');
            }
        }

8. W pliku layout1.js wyszukaj linię productWishListDelete: function (e) {. Pod nią znajduje się linia z kodem app.post(e, customerProfile.currentTabTemplateUpdate, 'wish-list’);. Pod tą linią wklej poniższy kod:

if($('.bottomMenu')) {
            var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) -1;
            $('.bottomMenu .menuItem .favouriteItems').text(items);
            if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .favouriteItems').addClass('hidden');
            }
        }

Modyfikacja stopki – obie wersje stopki

Kolejny krok to modyfikacja pliku ze stopką, pozwalająca na wyświetlanie dolnego menu. Aby to zrobić, otwórz katalogi elements -> footer. W środku znajdziesz jeden plik .html, o nazwie footer-1.html albo footer-2.html. Otwórz plik, i na samym jego końcu wklej tę linię:

{% include 'partials/bottom-menu.html' -%}

Uwaga! Jeśli stopka w Twoim szablonie Topaz jest w wersji 2 (w powyższym katalogu posiadasz plik footer-2.html), to konieczne jest dodanie jednej zmiany w wyglądzie stopki. Otwórz katalog css a w nim plik layout-m.css i doklej na jego końcu poniższy kod:

@media screen and (max-width: 599px){.footer{margin-bottom:56px}}

Modyfikacja przycisku powrotu na górę strony

W pliku layout.css wyszukaj frazę {.go-to-top__btn-js{width:50px;height:50px;bottom:20px}}. Powinna znajdować się pod koniec jednej z linii/jednego z bloków kodu. W znalezionej frazie zamień wartość przy bottom z 20px na 60px. Dzięki temu przycisk odpowiedzialny za powrót na górę strony nie będzie zasłaniał dolnego menu.

Modyfikacja profilu Klienta

Następnie otwórz katalog css a w nim plik layout.css. Wyszukaj duży blok kodu rozpoczynający się od .customer{position:relative}. Usuń cały blok, po czym wklej w jego miejscu następujący:

.customer{position:relative}.customer__blockContent.hide-on-mobile{display:block}.customer .form__input-wrapper:focus-within>label{color:{{settings.inputActiveLabelColor}}}.customer .form input:focus,.customer .form select:focus{border-bottom:1px solid {{settings.inputActiveLabelColor}}}.customer .form input,.customer .form select{border-bottom:1px solid {{settings.primaryFontColor}}}.customer .customer__emptySection{width:100%}.customer .customer__emptySection ol{padding:30px 20px 30px 71px;margin:0;box-sizing:border-box;counter-reset:my-counter;list-style:none}.customer .customer__emptySection ol li{position:relative;counter-increment:my-counter;margin-bottom:30px;color:#959494;font-size:14px;font-weight:400;line-height:1.8}.customer .customer__emptySection ol li:before{content:counter(my-counter);border-radius:50%;padding:8px 11px 7px;font-size:12px;color:{{settings.linkFontColor}};background-color:#f5f4f4;position:absolute;font-weight:600;left:-51px;line-height:normal;top:-2px}.customer .loyaltyProgram .customer__emptySectionImage .icon{top:39px;left:34px}.customer .loyaltyProgram .customer__emptySectionImage .icon .svgIcon{width:44px;height:33px}.customer .customer__emptySectionImage{width:115px;height:115px;border:1px solid #E5E5E5;text-align:center;position:relative;margin:40px auto}.customer .customer__emptySectionImage--bg:before,.customer .customer__emptySectionImage--bg{background:white;height:121px;position:absolute;width:57px;left:28px;top:-3px}.customer .customer__emptySectionImage--bg:before{content:' ';transform:rotate(90deg);left:-1px;top:0}.customer .customer__emptySectionImage .icon{fill:#E5E5E5;position:absolute;top:37px;left:39px}.customer .customer__emptySectionImage .icon .svgIcon{width:37px;height:37px}.customer .customer__emptySectionImage .icon--small{fill:#e5e5e5;position:absolute;background-color:#fff;bottom:30px;right:35px}.customer .customer__emptySectionImage .icon--small .svgIcon{width:19px;height:19px}.customer .customer__sectionTitle,.customer .customer__emptySectionTitle{color:#a9a8a8;display:block;font-size:14px;font-weight:400;max-width:90%}.customer .customer__sectionTitle--center,.customer .customer__emptySectionTitle--center{text-align:center;margin:0 auto}.customer .customer__sectionTitle--left,.customer .customer__emptySectionTitle--left{margin:0 0 10px 22px}.customer .customer__sectionTitle--bold,.customer .customer__emptySectionTitle--bold{margin-top:45px;color:{{settings.primaryFontColor}};font-weight:500}.customer .customer__emptySectionButton{display:block;width:265px;margin:40px auto;text-decoration:none;box-sizing:border-box}.customer__flexboxContainer{display:flex}@media screen and (min-width: 600px){.customer__flexboxContainer{margin-top:40px}}.customer__content{max-width:100%;min-width:62%;min-height:500px}.customer .customer__addresses .customer__contentBox{min-height:100px}@media screen and (min-width: 600px){.customer .popupBackground-js{background-color:#00000014;position:fixed;top:0;left:0;right:0;z-index:11;bottom:0;content:' '}}.customer .customer__contentSection{display:block;position:relative;margin:0 22px 45px;max-width:100%}.customer .customer__contentSection--edit{position:absolute;color:{{settings.linkFontColor}};top:0;right:-5px;padding:0 5px;cursor:pointer}.customer .customer__contentSection--edit .svgIcon__pen{width:16px;height:16px;fill:{{settings.linkFontColor}}}@media screen and (min-width: 600px){.customer .customer__contentSection{max-width:310px}}.customer .customer__contentSection.customer__contentBox{border:1px solid #d6d6d6;padding:20px 30px 18px;box-sizing:border-box}.customer .customer__contentSection.customer__contentBox .customer__contentBoxTitle{display:none;visibility:hidden}.customer .customer__contentSection.customer__contentBox--color{border-color:{{settings.linkFontColor}}}.customer .customer__contentSection.customer__contentBox .customer__contentPreview>span{color:#999}.customer .customer__contentSection.customer__contentBox .customer__contentPreview>span:first-of-type{display:block;height:45px;line-height:27px;font-size:18px;font-weight:300;color:{{settings.primaryFontColor}}}.customer .customer__contentSection.customer__contentBox .customer__contentSection--edit{bottom:15px;right:15px;top:unset}.customer .customer__contentSection.customer__contentBox.editSection-js{margin:0;border-color:white;position:absolute;background-color:white;z-index:11}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentBox.editSection-js{position:fixed !important;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{cursor:pointer;display:block;visibility:visible;padding:0 0 40px;position:relative;font-size:18px;font-weight:500}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{color:{{settings.primaryBtnBgColor}};position:absolute;padding:12px;border-radius:50%;bottom:unset;width:43px;height:43px;text-align:center;box-sizing:border-box}.customer__title{text-transform:uppercase;font-size:14px;font-weight:500;color:{{settings.primaryFontColor}};display:block;padding-bottom:35px}.customer__title--smallLetters{text-transform:none;font-size:12px}.customer__title--color{color:{{settings.linkFontColor}};text-transform:none}@media screen and (max-width: 599px){.customer .customer__breadcrumbs--desktop{display:none;visibility:hidden}}.customer .customer__breadcrumbs--mobile{background-color:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};font-size:14px}@media screen and (min-width: 600px){.customer .customer__breadcrumbs--mobile{display:none;visibility:hidden}}.customer .customer__breadcrumbs--mobile>span{padding:27px 0;display:inline-block;margin:0 22px}.customer .customer__breadcrumbs--mobile>span>svg{margin:0 15px -4px -5px}.customer .customer__menu{background-color:#fff;transition:200ms;z-index:9}.customer .customer__menu .mobileLogout{display:none}@media screen and (min-width: 600px){.customer .customer__menu{margin-right:4%;padding-left:3%}}@media screen and (min-width: 768px){.customer .customer__menu{margin-right:5%}}@media screen and (min-width: 600px){.customer .customer__menu li.active-js .customer__menu--submenu{display:block;background-color:#fff;padding:5px 0 5px 25px;margin:9px 0 -10px -30px}.customer .customer__menu>ul>li.active-js{border-left:5px solid {{settings.linkFontColor}}}.customer .customer__menu>ul>li{border-left:5px solid #fff}.customer .customer__menu li .customer__menu--submenu .active-js{color:{{settings.linkFontColor}}}}.customer .customer__menu--submenu{display:none}@media screen and (min-width: 600px){.customer .customer__menu>ul{border-right:1px solid #d6d6d6}}.customer .customer__menu ul{list-style:none;padding:5px 0 5px 43px;font-size:14px;color:#959494;margin:0}@media screen and (min-width: 600px){.customer .customer__menu ul{padding:5px 0 0 2px;margin-left:-10px;box-sizing:border-box;min-width:210px}}.customer .customer__menu ul>li{padding:10px 0 10px 23px}.customer .customer__menu ul>li:first-of-type{padding-top:10px}.customer .customer__menu ul>li li{padding:10px 0 10px 23px}.customer .customer__menu ul>li li:first-of-type{padding-top:10px}.customer .customer__menu ul li{cursor:pointer}.customer .customer__submenu{font-size:14px}.customer .customer__submenu ul{margin:0;padding:0;list-style:none;position:relative}.customer .customer__submenu li{color:#a9a8a8;display:inline-block;padding:20px 17px 20px 22px}@media screen and (min-width: 600px){.customer .customer__submenu li{padding-bottom:30px}.customer .customer__submenu li.active-js{position:absolute;left:0}}@media screen and (min-width: 600px){.customer .customer__submenu{font-weight:400;margin-bottom:6px}}@media screen and (min-width: 600px){.customer .customer__submenu--mobile{display:none;visibility:hidden}}@media screen and (min-width: 600px){.customer .customer__addresses .customer__contentSection.customer__contentBox{min-height:140px}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{top:18px}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{padding:15px;top:18px;left:unset;right:15px}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit .svgIcon{width:16px;height:16px}}.customer .customer__contentSection .customer__contentSection--inner{font-size:14px}.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>.form__input-wrapper,.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>button,.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>.form__checkBox{display:inline-block;visibility:visible}.customer .customer__contentSection .customer__hiddenForm-js.editMode-js .customer__contentPreview{display:none;visibility:hidden}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper,.customer .customer__contentSection .customer__hiddenForm-js>button,.customer .customer__contentSection .customer__hiddenForm-js>.form__checkBox{display:none;visibility:hidden}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper{margin-bottom:13px}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper.form__input-lastSmall{padding-bottom:15px}.customer .customer__contentSection .customer__hiddenForm-js .secondary-action-button{margin-top:0}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview{display:block;visibility:visible;line-height:2}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview label{display:block;font-size:11px;color:#d6d6d6}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview input:disabled{font-size:26px;color:#AEADAD;background-color:transparent;border:none}.customer .customer__contentSection.customer__contentSection--hidden{border:none}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{font-size:16px;color:{{settings.primaryBtnBgColor}}}}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{display:inline-block}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};font-size:40px;background-color:transparent;cursor:pointer;position:absolute;top:55px;left:128px}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit .svgIcon{width:48px;height:48px}}.customer .smallBoxesSection .customer__title{padding-bottom:25px;margin:-40px 0 0 22px}@media screen and (min-width: 600px){.customer .smallBoxesSection .customer__title{margin:-25px 0 0 22px;width:100%;box-sizing:border-box}}.customer .smallBoxesSection .customer__contentBox{position:relative}.customer .smallBoxesSection .customer__contentSection.customer__contentBox{margin-bottom:35px}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span{display:block;font-size:14px}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(1){font-size:18px;font-weight:300}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(2){padding:15px 0}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(2):first-letter{text-transform:uppercase}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(3){opacity:.5}.customer .smallBoxesSection .customer__contentBoxButton{cursor:pointer;fill:{{settings.linkFontColor}};position:absolute;padding:12px;bottom:3px;right:5px}.customer .smallBoxesSection .customer__contentBoxButton .svgIcon{width:15px;height:15px}.customer .complaints .complaints__productBox,.customer .complaints .reviews__productBox,.customer .complaints .wishList__productBox,.customer .customerReviews .complaints__productBox,.customer .customerReviews .reviews__productBox,.customer .customerReviews .wishList__productBox,.customer .wishList .complaints__productBox,.customer .wishList .reviews__productBox,.customer .wishList .wishList__productBox{margin:20px 25px 40px;position:relative;max-width:375px;box-sizing:border-box}.customer .complaints .wishList__removeProduct span,.customer .customerReviews .wishList__removeProduct span,.customer .wishList .wishList__removeProduct span{font-size:19px;color:#939292;fill:#939292;position:absolute;right:-15px;top:-16px;padding:15px;cursor:pointer}.customer .complaints .complaints__product,.customer .complaints .reviews__product,.customer .complaints .wishList__product,.customer .customerReviews .complaints__product,.customer .customerReviews .reviews__product,.customer .customerReviews .wishList__product,.customer .wishList .complaints__product,.customer .wishList .reviews__product,.customer .wishList .wishList__product{text-decoration:none;display:flex;padding-bottom:25px;border-bottom:1px solid #e5e5e5}.customer .complaints .complaints__productDetails,.customer .complaints .reviews__productDetails,.customer .complaints .wishList__productDetails,.customer .customerReviews .complaints__productDetails,.customer .customerReviews .reviews__productDetails,.customer .customerReviews .wishList__productDetails,.customer .wishList .complaints__productDetails,.customer .wishList .reviews__productDetails,.customer .wishList .wishList__productDetails{margin-left:15px;width:calc(100% - 145px)}.customer .complaints .complaints__productDetails span,.customer .complaints .reviews__productDetails span,.customer .complaints .wishList__productDetails span,.customer .customerReviews .complaints__productDetails span,.customer .customerReviews .reviews__productDetails span,.customer .customerReviews .wishList__productDetails span,.customer .wishList .complaints__productDetails span,.customer .wishList .reviews__productDetails span,.customer .wishList .wishList__productDetails span{display:block;color:#191616;font-size:14px;max-width:100%;overflow:hidden;max-height:23px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px}.customer .complaints .complaints__productDetails span.product__previousPrice,.customer .complaints .reviews__productDetails span.product__previousPrice,.customer .complaints .wishList__productDetails span.product__previousPrice,.customer .customerReviews .complaints__productDetails span.product__previousPrice,.customer .customerReviews .reviews__productDetails span.product__previousPrice,.customer .customerReviews .wishList__productDetails span.product__previousPrice,.customer .wishList .complaints__productDetails span.product__previousPrice,.customer .wishList .reviews__productDetails span.product__previousPrice,.customer .wishList .wishList__productDetails span.product__previousPrice{margin-bottom:0;color:#999fa2;font-weight:400}.customer .complaints .complaints__productDetails span a,.customer .complaints .reviews__productDetails span a,.customer .complaints .wishList__productDetails span a,.customer .customerReviews .complaints__productDetails span a,.customer .customerReviews .reviews__productDetails span a,.customer .customerReviews .wishList__productDetails span a,.customer .wishList .complaints__productDetails span a,.customer .wishList .reviews__productDetails span a,.customer .wishList .wishList__productDetails span a{color:#191616;text-decoration:none}.customer .complaints .complaints__productDetails span.wishList__addToCart,.customer .complaints .reviews__productDetails span.wishList__addToCart,.customer .complaints .wishList__productDetails span.wishList__addToCart,.customer .customerReviews .complaints__productDetails span.wishList__addToCart,.customer .customerReviews .reviews__productDetails span.wishList__addToCart,.customer .customerReviews .wishList__productDetails span.wishList__addToCart,.customer .wishList .complaints__productDetails span.wishList__addToCart,.customer .wishList .reviews__productDetails span.wishList__addToCart,.customer .wishList .wishList__productDetails span.wishList__addToCart{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};text-transform:uppercase;bottom:25px;margin-bottom:0;position:absolute}.customer .complaints .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .complaints .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .complaints .wishList__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .wishList__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .wishList__productDetails span.wishList__addToCart .svgIcon{width:19px;height:19px;margin-bottom:-2px}.customer .complaints .complaints__productDetails .complaint__statusText,.customer .complaints .complaints__productDetails p.reviews__reviewText,.customer .complaints .reviews__productDetails .complaint__statusText,.customer .complaints .reviews__productDetails p.reviews__reviewText,.customer .complaints .wishList__productDetails .complaint__statusText,.customer .complaints .wishList__productDetails p.reviews__reviewText,.customer .customerReviews .complaints__productDetails .complaint__statusText,.customer .customerReviews .complaints__productDetails p.reviews__reviewText,.customer .customerReviews .reviews__productDetails .complaint__statusText,.customer .customerReviews .reviews__productDetails p.reviews__reviewText,.customer .customerReviews .wishList__productDetails .complaint__statusText,.customer .customerReviews .wishList__productDetails p.reviews__reviewText,.customer .wishList .complaints__productDetails .complaint__statusText,.customer .wishList .complaints__productDetails p.reviews__reviewText,.customer .wishList .reviews__productDetails .complaint__statusText,.customer .wishList .reviews__productDetails p.reviews__reviewText,.customer .wishList .wishList__productDetails .complaint__statusText,.customer .wishList .wishList__productDetails p.reviews__reviewText{display:none;line-height:2;font-size:14px;margin:10px 0 0 -115px}.customer .complaints .complaints__productDetails .complaint__statusText,.customer .complaints .reviews__productDetails .complaint__statusText,.customer .complaints .wishList__productDetails .complaint__statusText,.customer .customerReviews .complaints__productDetails .complaint__statusText,.customer .customerReviews .reviews__productDetails .complaint__statusText,.customer .customerReviews .wishList__productDetails .complaint__statusText,.customer .wishList .complaints__productDetails .complaint__statusText,.customer .wishList .reviews__productDetails .complaint__statusText,.customer .wishList .wishList__productDetails .complaint__statusText{max-height:100px}.customer .complaints .complaints__productDetails .complaint__statusText span,.customer .complaints .reviews__productDetails .complaint__statusText span,.customer .complaints .wishList__productDetails .complaint__statusText span,.customer .customerReviews .complaints__productDetails .complaint__statusText span,.customer .customerReviews .reviews__productDetails .complaint__statusText span,.customer .customerReviews .wishList__productDetails .complaint__statusText span,.customer .wishList .complaints__productDetails .complaint__statusText span,.customer .wishList .reviews__productDetails .complaint__statusText span,.customer .wishList .wishList__productDetails .complaint__statusText span{display:inline-block;font-weight:400}.customer .complaints .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .complaints .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .complaints .wishList__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .wishList__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .wishList__productDetails .complaint__statusText span:nth-child(odd){width:111px;opacity:.5}.customer .complaints .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .complaints .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .complaints .wishList__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .wishList__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .wishList__productDetails .complaint__statusText span:nth-child(even){width:50%}.customer .complaints .complaints__productDetails span.complaint__moreDetails,.customer .complaints .complaints__productDetails span.review__link,.customer .complaints .reviews__productDetails span.complaint__moreDetails,.customer .complaints .reviews__productDetails span.review__link,.customer .complaints .wishList__productDetails span.complaint__moreDetails,.customer .complaints .wishList__productDetails span.review__link,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails,.customer .customerReviews .complaints__productDetails span.review__link,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails,.customer .customerReviews .reviews__productDetails span.review__link,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails,.customer .customerReviews .wishList__productDetails span.review__link,.customer .wishList .complaints__productDetails span.complaint__moreDetails,.customer .wishList .complaints__productDetails span.review__link,.customer .wishList .reviews__productDetails span.complaint__moreDetails,.customer .wishList .reviews__productDetails span.review__link,.customer .wishList .wishList__productDetails span.complaint__moreDetails,.customer .wishList .wishList__productDetails span.review__link{font-size:14px;margin-top:70px;text-decoration:underline;font-weight:400;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};margin-bottom:0;cursor:pointer}.customer .complaints .complaints__productDetails span.complaint__moreDetails a,.customer .complaints .complaints__productDetails span.review__link a,.customer .complaints .reviews__productDetails span.complaint__moreDetails a,.customer .complaints .reviews__productDetails span.review__link a,.customer .complaints .wishList__productDetails span.complaint__moreDetails a,.customer .complaints .wishList__productDetails span.review__link a,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails a,.customer .customerReviews .complaints__productDetails span.review__link a,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails a,.customer .customerReviews .reviews__productDetails span.review__link a,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails a,.customer .customerReviews .wishList__productDetails span.review__link a,.customer .wishList .complaints__productDetails span.complaint__moreDetails a,.customer .wishList .complaints__productDetails span.review__link a,.customer .wishList .reviews__productDetails span.complaint__moreDetails a,.customer .wishList .reviews__productDetails span.review__link a,.customer .wishList .wishList__productDetails span.complaint__moreDetails a,.customer .wishList .wishList__productDetails span.review__link a{color:{{settings.linkFontColor}}}.customer .complaints .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .complaints__productDetails span.review__link .svgIcon,.customer .complaints .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .reviews__productDetails span.review__link .svgIcon,.customer .complaints .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .wishList__productDetails span.review__link .svgIcon,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .complaints__productDetails span.review__link .svgIcon,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .reviews__productDetails span.review__link .svgIcon,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .wishList__productDetails span.review__link .svgIcon,.customer .wishList .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .complaints__productDetails span.review__link .svgIcon,.customer .wishList .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .reviews__productDetails span.review__link .svgIcon,.customer .wishList .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .wishList__productDetails span.review__link .svgIcon{margin-bottom:-4px;transition:300ms}.customer .complaints .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .complaints .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .complaints .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .wishList__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .wishList__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .wishList__productDetails span.review__link .svgIcon.rotateUp-js{transform:rotate(-90deg);transition:300ms}.customer .complaints .complaints__productDetails span.complaint__moreDetails,.customer .complaints .reviews__productDetails span.complaint__moreDetails,.customer .complaints .wishList__productDetails span.complaint__moreDetails,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails,.customer .wishList .complaints__productDetails span.complaint__moreDetails,.customer .wishList .reviews__productDetails span.complaint__moreDetails,.customer .wishList .wishList__productDetails span.complaint__moreDetails{margin-top:45px}.customer .complaints .complaints__productDetails span.complaint__link,.customer .complaints .reviews__productDetails span.complaint__link,.customer .complaints .wishList__productDetails span.complaint__link,.customer .customerReviews .complaints__productDetails span.complaint__link,.customer .customerReviews .reviews__productDetails span.complaint__link,.customer .customerReviews .wishList__productDetails span.complaint__link,.customer .wishList .complaints__productDetails span.complaint__link,.customer .wishList .reviews__productDetails span.complaint__link,.customer .wishList .wishList__productDetails span.complaint__link{color:#939292;fill:#939292;margin-top:0;padding:15px;cursor:pointer;position:absolute;top:-17px;right:-17px}.customer .complaints .complaints__productDetails span.complaint__type,.customer .complaints .reviews__productDetails span.complaint__type,.customer .complaints .wishList__productDetails span.complaint__type,.customer .customerReviews .complaints__productDetails span.complaint__type,.customer .customerReviews .reviews__productDetails span.complaint__type,.customer .customerReviews .wishList__productDetails span.complaint__type,.customer .wishList .complaints__productDetails span.complaint__type,.customer .wishList .reviews__productDetails span.complaint__type,.customer .wishList .wishList__productDetails span.complaint__type{font-size:12px;font-weight:400;text-transform:uppercase;display:inline}.customer .complaints .complaints__productDetails span.complaint__type>span,.customer .complaints .reviews__productDetails span.complaint__type>span,.customer .complaints .wishList__productDetails span.complaint__type>span,.customer .customerReviews .complaints__productDetails span.complaint__type>span,.customer .customerReviews .reviews__productDetails span.complaint__type>span,.customer .customerReviews .wishList__productDetails span.complaint__type>span,.customer .wishList .complaints__productDetails span.complaint__type>span,.customer .wishList .reviews__productDetails span.complaint__type>span,.customer .wishList .wishList__productDetails span.complaint__type>span{margin-left:2px;font-size:12px;font-weight:400;text-transform:capitalize;text-overflow:ellipsis;white-space:nowrap;display:inline-block;margin-bottom:-3px;max-width:50%}.customer .complaints .complaints__image,.customer .complaints .reviews__image,.customer .complaints .wishList__image,.customer .customerReviews .complaints__image,.customer .customerReviews .reviews__image,.customer .customerReviews .wishList__image,.customer .wishList .complaints__image,.customer .wishList .reviews__image,.customer .wishList .wishList__image{position:relative;width:100px;margin:0;height:130px;padding:0;text-align:center;font-size:50px;color:#E5E5E5;overflow:hidden}.customer .complaints .complaints__image img,.customer .complaints .reviews__image img,.customer .complaints .wishList__image img,.customer .customerReviews .complaints__image img,.customer .customerReviews .reviews__image img,.customer .customerReviews .wishList__image img,.customer .wishList .complaints__image img,.customer .wishList .reviews__image img,.customer .wishList .wishList__image img{width:auto;min-width:100px;max-width:100%}.customer .complaints span.complaints__lightText,.customer .customerReviews span.complaints__lightText,.customer .wishList span.complaints__lightText{opacity:.5;font-weight:400;margin-top:8px}.customer .customer__dateHourSpace{display:inline !important;padding:0 7px}@media screen and (min-width: 600px){.customer .customerReviews{margin-top:20px}}.customer .customerReviews .customer__title{margin-left:22px}.customer .customerPagination{list-style:none;margin:0 0 0 22px;padding:0}.customer .customerPagination li{display:inline-block;margin:0;color:rgba(25,22,22,0.5);padding:0;cursor:pointer}.customer .customerPagination li.active span{color:#191616}.customer .customer__orderContent{color:{{settings.primaryFontColor}};position:absolute;top:0;background-color:white;right:0;left:0}.customer .customer__orderContent .orderContent__setIcon{margin-bottom:-2px;fill:{{settings.secondaryFontColor}}}.customer .customer__orderContent .orderContent__showSet{display:block;font-size:14px;font-weight:400;cursor:pointer}.customer .customer__orderContent .orderContent__productsRow.orderContent__setElement{display:none;max-height:159px}.customer .customer__orderContent .orderContent__productsRow.orderContent__setElement.elementVisible-js{animation:showSetAnimation .5s;animation-fill-mode:both;display:flex}@keyframes showSetAnimation{from{height:0}to{height:210px}}@media screen and (min-width: 600px){.customer .customer__orderContent{left:240px;width:calc(100% - 250px);z-index:11;top:125px}}.customer .customer__orderContent .form__input-info[for="defectDate"]{top:-5px;font-size:11px}.customer .customer__orderContent .form__icons{fill:{{settings.linkFontColor}}}.customer .customer__orderContent textarea{height:auto}.customer .customer__orderContent .form .form__icon_padding{padding-left:25px}.customer .customer__orderContent .customer__title{padding-bottom:25px}.customer .customer__orderContent .orderContent{padding:25px;box-sizing:border-box}.customer .customer__orderContent .orderContent__infoBox{margin-bottom:30px}.customer .customer__orderContent .orderContent__infoBox>span{display:block}.customer .customer__orderContent .orderContent__infoBox .orderContent__lightText{font-size:14px;color:#adabab;line-height:2;font-weight:400}.customer .customer__orderContent .orderContent__productDetails{font-weight:500;font-size:14px;width:calc(100% - 130px)}.customer .customer__orderContent .orderContent__productTitle{display:block;color:#191616;font-size:14px;max-width:100%;overflow:hidden;max-height:70px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px}.customer .customer__orderContent .orderContent__productTitle a{text-decoration:none;color:#191616;max-height:20px}.customer .customer__orderContent .orderContent__productDetails span.orderContent__productAttributes{font-size:12px;color:#a9a7a7;display:block;line-height:1.2;white-space:normal}.customer .customer__orderContent .orderContent__productPrice{display:block}.customer .customer__orderContent .orderContent__bottomText{margin-top:62px;display:inline-block}.customer .customer__orderContent .orderContent__complainBtn{display:block;margin:20px 0 5px;text-decoration:underline;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};font-weight:400;cursor:pointer}.customer .customer__orderContent .orderContent__complainBtn svg{margin:0 3px -4px 0}.customer .customer__orderContent .orderContent__summary div{display:flex;justify-content:space-between;align-items:center;font-size:14px}.customer .customer__orderContent .orderContent__summary div span:nth-child(2){font-weight:500}.customer .customer__orderContent .orderContent__summary .orderContent__finalPrice{font-weight:500;font-size:18px;margin:40px 0}.customer .customer__orderContent .orderContent__status{margin:37px 0;font-size:14px;justify-content:space-between;display:flex}.customer .customer__orderContent .orderContent__status span:first-letter{text-transform:uppercase}.customer .customer__orderContent .orderContent__status span:first-of-type{color:#a9a7a7}.customer .customer__orderContent .orderContent__status span:last-of-type{color:{{settings.linkFontColor}};font-weight:500}.customer .customer__orderContent .orderContent__btn{width:100%;margin:0 0 20px}.customer .customer__orderContent .orderContent__productsRow{border-bottom:1px solid {{settings.borderColor}};padding:14px 0;max-height:210px;box-sizing:border-box;display:flex}.customer .customer__orderContent .orderContent__productsRow.orderContent__titleRow{height:auto;padding:0}.customer .customer__orderContent .orderContent__productsRow.orderContent__titleRow span:nth-child(2){min-width:190px}.customer .customer__orderContent .orderContent__productImage{width:100px;height:130px;overflow:hidden;margin-right:22px;flex-shrink:0}.customer .customer__orderContent .orderContent__productImage img{width:auto;min-width:100px;max-width:100%}.customer .customer__orderContent .checkBoxes__container--radio{display:flex;justify-content:flex-start;margin:30px 0 25px -10px}.customer .customer__orderContent .orderContent__link{text-decoration:underline;color:{{settings.linkFontColor}}}.customer .customer__orderContent .orderContent__docsToPrint{font-size:14px;margin:-10px -4px 23px}.customer .customer__orderContent .orderContent__docsToPrint__item{display:block;padding:0 0 5px 5px;margin-bottom:5px}.customer .customer__orderContent .orderContent__docsToPrint__item svg{width:14px;margin:0 3px -3px 0;fill:{{settings.secondaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .quantityField__label{display:block;margin-bottom:10px}.customer .customer__orderContent .form__input-wrapper.min-js .button-minus-add-product svg{fill:#dddddd;transition:200ms}.customer .customer__orderContent .form__input-wrapper.max-js .button-plus-add-product svg{fill:#dddddd;transition:200ms}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product,.customer .customer__orderContent .form__input-wrapper .button-plus-add-product{cursor:pointer;outline:none;background-color:{{settings.primaryPageBgColor}};border:none;color:{{settings.primaryFontColor}};width:55px;height:55px;display:inline-block;font-weight:700;margin:0}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product{font-size:23px}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product svg{transition:200ms;margin-bottom:-2px;fill:{{settings.primaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .button-plus-add-product{font-size:20px}.customer .customer__orderContent .form__input-wrapper .button-plus-add-product svg{margin-bottom:-2px;transition:200ms;fill:{{settings.primaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .quantity-field{border:1px solid #191616;background-color:{{settings.primaryPageBgColor}};color:{{settings.primaryFontColor}};width:70px;height:55px;text-align:center;padding:0;box-sizing:border-box;font-size:17px;font-weight:500;left:-2px;margin-right:-4px;display:inline-block;position:relative}.customer .complain__product{display:flex;margin:35px 0 20px;padding:12px 0;border-bottom:1px solid {{settings.borderColor}}}.customer .complain__product figure svg{display:none;visibility:hidden}.customer .complain__product figure img{display:inline-block;visibility:visible}.customer .complain__product figure.noImage-js img{display:none;visibility:hidden}.customer .complain__product figure.noImage-js svg{display:inline-block;visibility:visible;height:40px;margin-top:25px}.customer .complain__product .complain__productTitle{font-weight:500;color:{{settings.primaryFontColor}};display:block;font-size:14px}.customer .complain__product .complain__lightText{font-weight:400;color:#adabab;font-size:13px}.customer .complain__product figure{width:85px;height:100px;overflow:hidden;margin:0 15px 0 0;display:inline-block}.customer .complain__product img{width:100%;height:auto}.customer .complain__product p{margin:0}.customer .customer__consents{font-size:14px}@media screen and (max-width: 599px){.customer .customer__consents{margin-top:20px}}.customer .customer__consents .primary-action-button,.customer .customer__consents .secondary-action-button{display:block;margin:15px 0 30px;width:100%}.customer .customer__consents ul{margin:0;padding:0;list-style:none}.customer .customer__consents li{line-height:1.8}.customer .customer__consents span{display:block}.customer .customer__consents .consentWithdraw__warning{color:#CE283E;font-size:12px;margin-top:15px}.customer .customer__consents .consentAccepted__date{color:#959494}.customer .customer__consents .acceptedConsents li{margin-bottom:30px}.customer .customer__consents .consentChannel{margin-top:10px}.customer .customer__consents .consentDetails{display:none;margin-bottom:-10px}.customer__socialButton{color:#fff;font-size:14px;text-transform:uppercase;font-weight:400;display:block;margin-bottom:20px;padding:17px;text-align:center;cursor:pointer;letter-spacing:1px}.customer__socialButton svg{fill:#fff}.customer__socialButton__google{background-color:#DD4B39}.customer__socialButton__google svg{margin:0 5px -7px 0;height:26px;width:26px}.customer__socialButton__facebook{background-color:#3B5998}.customer__socialButton__facebook svg{margin:0 5px -4px 0;height:20px;width:20px}@media screen and (min-width: 600px){.customer .complaints.complaints__emptySectionMargin{margin-top:-52px}.customer .complaints{margin-top:-60px}}.customer .showOrder-js{cursor:pointer}.customer .orderContent__additionalInformation .customer__title__attachments{padding-top:25px;text-align:left !important}.customer .orderContent__additionalInformation .attachmentsFile{display:block;text-decoration:none}.customer .orderContent__additionalInformation .attachmentsFile .attachmentsFile__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%;display:inline-block;margin-bottom:-9px}.customer .orderContent__additionalInformation .attachmentsFile .svgIcon{margin-bottom:-3px}.customer .customer__history{width:100%;padding:0 20px;box-sizing:border-box;text-align:center}.customer .customer__history__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.customer .customer__history__row:last-of-type{border-bottom:none;margin-bottom:20px}.customer .customer__history__rowTitle{font-size:15px;width:35%;text-align:left;font-weight:400}.customer .popupDialog__complain .popupDialog__wrapper{max-width:700px;padding-bottom:0}.customer .complain__product{width:40%;padding:0;margin:40px 0;vertical-align:top;display:inline-block;border:none}.customer .complain__product figure{width:100%;height:auto;margin:0 0 20px}.customer .complain__form{width:calc(60% - 84px);display:inline-block;margin:40px}.customer .complain__form>strong{display:block;margin-bottom:20px}.customer .complain__form textarea{margin-top:10px;padding:10px}.customer .customer__orderContent .checkBoxes__container--radio{margin-top:0}.customer .form__attachement-input-container{position:relative}.customer .form__clear-attachement-input{position:absolute;top:11px;cursor:pointer}

W tym samym katalogu otwórz plik layout-m.css. Wyszukaj blok kodu z frazą .hide-on-mobile-order. Usuń go i wklej w jego miejsce następujący kod:

@media screen and (max-width: 768px){.hide-on-mobile-order{display:none;visibility:hidden}.customer__blockContent.hide-on-mobile{display:none}.hide-on-desktop-order{display:inline-block;visibility:visible}.customer .customer__menu ul{border-right:none}}@media screen and (max-width: 599px){.temporaryPopup{width:100%;text-align:center;min-height:72px;background-color:#f2f2f2;box-sizing:border-box;top:0;margin:0;padding:26px 0}.customer .customer__menu ul{padding:12px 0 5px 0}.customer .customer__menu ul>li.active-js{color:{{settings.linkFontColor}}}.customer .customer__menu ul>li{padding:18px 0 18px 23px}.customer .customer__orderContent .orderContent__status{margin:0 0 37px}.customer .customer__orderContent{min-height:100%}}@media screen and (max-width: 359px){.customer .customer__orderContent .orderContent__complainBtn{margin:7px 0 0 -130px}}@media screen and (max-width: 479px){.customer .popupDialog__complain{padding:0}.customer .popupDialog__complain .popupDialog__closeBtn{top:17px;right:17px}}@media screen and (max-width: 768px){.customer__flexboxContainer{flex-direction:column}}@media screen and (max-width: 599px){.customer .customer__contentSection.customer__contentBox.editSection-js{padding:5px 20px 15px;top:155px}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{display:none;visibility:hidden}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{top:-77px;right:13px;background-color:#fff;width:45px;height:44px;padding:14px 11px 11px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}}@media screen and (min-width: 600px) and (max-width: 768px){.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{font-size:16px;padding:10px 0 30px}}@media screen and (min-width: 630px){.customer .customer__contentSection.customer__contentBox.editSection-js{max-width:360px}}@media screen and (max-width: 599px){.customer .customer__contentSection.customer__contentSection--hidden{position:static}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{position:absolute;color:white;fill:white;background-color:{{settings.linkFontColor}};border-radius:50%;font-size:18px;width:43px;height:43px;text-align:center;box-sizing:border-box;top:80px;padding:13px 11px 11px;box-shadow:0 2px 5px 1px #0000001c}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{background-color:transparent}}@media screen and (max-width: 599px){.customer__content{flex-grow:5}}@media screen and (max-width: 768px){.customer .customer__breadcrumbs--desktop{display:none;visibility:hidden}}@media screen and (max-width: 768px){.customer .customer__breadcrumbs--mobile{display:inherit;visibility:visible}}@media screen and (max-width: 768px){.customer .customer__menu{position:absolute;top:71px;left:-300px;flex-grow:1}.customer .customer__menu.customer__menuActive-js{left:0;bottom:0;right:0}}@media screen and (max-width: 768px){.customer .mobileLogout{display:block !important;width:100% !important;margin-top:50px}.customer .mobileLogoutButton{width:calc(100% - 40px);padding:18px 0;margin-left:20px;margin-right:20px;text-align:center;color:{{settings.primaryBtnFontColor}};background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400}.customer .mobileLogoutButton:hover{cursor:pointer;color:{{settings.primaryBtnHoverFontColor}};background-color:{{settings.primaryBtnHoverBgColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}}}}@media screen and (max-width: 599px){.customer .customer__submenu{margin-bottom:30px}}@media screen and (max-width: 599px){.customer .customer__submenu.customer__submenu--desktop{display:none;visibility:hidden}}@media screen and (max-width: 599px){.customer .customer__menu .active-js,.customer .customer__submenu .active-js{color:{{settings.linkFontColor}}}}.customer .complain__product{width:100%;margin:20px 0}.customer .complain__form{width:100%;margin:20px 0}@media screen and (max-width: 599px){.loyaltyProgram .customer__title,.wishList .customer__title{margin:-40px 0 0 22px}}

Kolejnym krokiem jest otwarcie pliku static-elements -> customer-profile -> customer-profile.html. Kilka linii przed końcem pliku znajduje się linia z frazą </nav>. Tuż nad nią (a przed linią z frazą </ul>) wstaw poniższy kod:

Inne zmiany

Otwórz plik layout1.js. Wyszukaj linię z frazą var mainSection = $(’main’);. Tuż pod nią wklej poniższy kod:

mainSection.on('click', '.customerLogout-js', function (e) {
    app.customerLogout(e);
});

Następnie w tym samym pliku wyszukaj linijkę mainSection.on(’click’, ’.customer__menuActivate-js’, customerProfile.showCustomerProfileMenu); i tuż nad nią wklej:

jest
		$(window).on('load', function(e) {
			let searchFavParam = new URLSearchParams(window.location.search);
            if(searchFavParam.has('fav')) {
                $('.customer__menu').addClass('customer__menu-js');
                $('.customerProfileButton').removeClass('activePage');
                $('.favouriteItemsButton').addClass('activePage');
                var favourites = $('.customerPrimaryMenu-js').find('[data-template="wish-list"]');
                favourites.click();
            } else if (searchFavParam.has('accountData')) {
                var accountData = $('.customerPrimaryMenu-js').find('[data-template="account-data"]');
                accountData.click();
            }
        });

Otwórz plik css -> layout.css. Wyszukaj .popup-dialog.after-adding-to-cart-popup{z-index:12;bottom:0;top:0;right:0;left:0;margin:auto;position:fixed;padding:30px;box-sizing:border-box}. Zamień liczbę 12 przy z-index na 101.

Modyfikacja nagłówków – obie wersje nagłówka

Na koniec należy zmodyfikować wygląd nagłówków. Aby sprawdzić, którą wersję nagłówka posiadasz, wejdź do katalogu elements -> header. Jeśli w środku znajduje się plik header-1.html to posiadasz wersję 1. Jeśli header-2.html to wersję 2. W zależności od posiadanej wersji, wykonaj odpowiednie instrukcje (kod dla obu wersji będzie się różnić).

Jeśli posiadasz nagłówek w wersji 1:
Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod:

@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}.headerSection .header__icon svg{width:18px;height:18px}.headerSection .header__icon.header__login{display:none}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__shopData{position:absolute;top:30px;right:30px}.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:none}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg,.headerSection .headerSection__logo{min-height:30px;height:30px}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 35px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none;position:fixed;top:0;bottom:56px;overflow-y:auto;overflow-x:hidden;z-index:1}.headerSection .headerSection__mainMenu{position:absolute;top:50px;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{text-align:left;position:absolute;padding:15px;width:105px;box-sizing:border-box;left:20px;top:-40px;font-size:16px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};background-color:{{settings.headerBgColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn span{display:none}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn svg{margin-bottom:-3px;margin-top:50px}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 22px)}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:50px 40px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block;margin-top:5px}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text i{display:none}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:15px}.headerSection .mobileMenuIcon .iconsMenuItem__text{text-transform:uppercase}.headerSection .mobileMenuIcon svg{top:3px;margin:4px 0 0;width:20px;height:20px}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;font-size:10px;position:static;bottom:22px;right:35px}.headerSection .headerSection__searchForm{position:fixed;top:45px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;max-width:100%;height:100%;padding:35px 0 0;margin:-45px 0 0 0}.headerSection .headerSection__searchForm svg{fill:{{settings.linkFontColor}};display:block;margin-left:33px;margin-bottom:25px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__btn{background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__phrase{margin:10px 0;width:calc(100% - 71px);max-width:calc(100% - 71px)}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:15px;position:relative}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:block}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}.headerSection .hideOnMobile{display:none}}

W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod:

.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:120px;box-sizing:border-box;position:relative;z-index:13}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:120px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;z-index:1}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{height:36px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__row{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .mainNavigation{display:none}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative;padding:10px 0 0}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px;position:absolute;bottom:-37px;right:0;z-index:1}.headerSection .headerSection__iconsMenu .mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .iconsMenuItem__text i{font-style:normal}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{position:absolute;top:100px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;display:none;padding:30px 15px;margin:0;overflow:hidden;box-sizing:border-box;text-align:center;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .headerSection__searchForm__searchButtonMobile{display:none}.headerSection .headerSection__searchForm__phrase{max-width:436px;width:100%;height:36px;padding:0 0 11px;box-sizing:border-box;border-bottom:1px solid {{settings.linkFontColor}};color:{{settings.headerFontColor}};background-color:transparent}.headerSection .headerSection__searchForm__btn{position:absolute;top:30px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:none;display:none}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:45px;position:relative;box-sizing:border-box;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;position:absolute;top:-40px;right:0}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.breadcrumbsFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;margin:10px 0 5px;opacity:.5}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}

Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-1.html, usuń jego zawartość i wklej następujący kod:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}

{{ translations.Hea_Menu }} {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: ”, logoAlt}}

{{ translations.Com_Search }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }}

{% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})

{{ translations.Hea_Menu }} {% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%}

- {{ category | A }}
  - - {{undercategory.Name}}
  {% endfor -%}

{% endif -%} {% endfor -%}

- - - {{ category | A }}
  {% endif -%} {% endfor -%}

{% assign name = 'menuBanner’ -%} {% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: ”, bannerAlt}} {% endif -%} {% else -%} {{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}

220×295

{% endif -%}

{{ config.DefinedPages.Contact | A }} {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook’ and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }}

{% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%}

{% if config.Shop.Contact.PhoneNo != ” -%} {{config.Shop.Contact.PhoneNo}} {% endif -%} {% if config.Shop.Contact.Email != ” -%} {{ config.Shop.Contact.Email }} {% endif -%} {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%}

{% if usr.Authenticated == false -%} {{translations.Com_Login}} / {{translations.Registration}} {% endif -%}

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}’ -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%}

{% endif -%} {% endif -%} {% endfor -%}

Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on(’click’, ’.openCategoryMenu-js’, function() { i wstaw tuż nad nią kod:

pageHeader.on('click', '.closeSearchButton > svg', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
        });

        pageHeader.on('input', '.searchFormPhrase-js', function() {
            if($(this).val().length > 0) {
                $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden');
            } else {
                $('.headerSection__searchForm__searchButtonMobile').addClass('hidden');
            }
        });

Jeśli posiadasz nagłówek w wersji 2:
Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod:

@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon svg{width:15px;height:15px}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg,.headerSection .headerSection__logo{min-height:30px;height:30px}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 20px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none}.headerSection .headerSection__mainMenu{position:fixed;top:0;bottom:56px;overflow:auto;z-index:1;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{display:block;text-align:left;position:relative;padding:15px;width:50px;box-sizing:border-box;left:-15px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 20px)}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:10px 20px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .headerSection__row{flex-direction:row}.headerSection .headerSection__iconsMenu .hideOnMobile{display:none !important}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text,.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:block;margin-top:5px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:0}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;margin-top:-9px;font-size:10px}.headerSection .headerSection__searchForm{position:fixed;top:0;padding-top:25px;left:0;right:0;width:100%;max-width:100%;bottom:0;overflow:auto;height:auto;background-color:{{settings.primaryPageBgColor}};z-index:1}.headerSection .headerSection__searchForm .closeSearchButton{display:block;margin-bottom:25px;margin-left:20px}.headerSection .headerSection__searchForm .closeSearchButton:hover{cursor:pointer}.headerSection .headerSection__searchForm .closeSearchButton svg{width:18px;height:18px;fill:{{settings.linkFontColor}}}.headerSection .headerSection__searchForm__btn{display:none;background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__phrase{margin:10px 20px 10px 20px;width:calc(100% - 40px);max-width:calc(100% - 40px);border-left:none;border-right:none;border-top:none;padding-bottom:14px;border-bottom:1px solid {{settings.primaryFontColor}}}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:-5px}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__searchForm__phrase{background-color:rgba(255,255,255,0.4);color:{{settings.secondaryFontColor}}}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.secondaryFontColor}}}.headerSection .searchForm__searchAutocomplete{position:fixed;display:block;top:110px;left:0;width:100%}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}}@media only screen and (max-width: 360px){.headerSection.headerSection__bg>.headerSection__row{padding:15px}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{padding:10px 20px 40px}.headerSection .headerSection__shopData{left:0}}

W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod:

.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:150px;box-sizing:border-box;position:relative;z-index:13}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:150px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;overflow:hidden}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{height:36px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .headerSection__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;position:relative}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2),.headerSection .mainNavigation{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{height:36px;position:relative;box-sizing:border-box;width:30%;max-width:420px}.headerSection .headerSection__searchForm__searchButtonMobile,.headerSection .headerSection__searchForm .closeSearchButton{display:none}.headerSection .headerSection__searchForm__phrase{max-width:420px;width:100%;height:36px;padding:12px 10px 11px;box-sizing:border-box;border:1px solid {{settings.borderColor}};color:{{settings.headerFontColor}};background-color:rgba(255,255,255,0.25)}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.headerFontColor}};opacity:.7}.headerSection .headerSection__searchForm__btn{position:absolute;top:0;right:-35px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:1px solid {{settings.borderColor}}}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{display:block;margin:0 auto;padding:20px 0;top:45px;z-index:9;width:100%;position:absolute;box-sizing:border-box}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;width:80%;max-width:500px;margin:0 auto;padding:15px 20px;background-color:{{settings.headerBgColor}};border-bottom:1px solid #f2f2f2;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2);font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;top:7px;position:relative;color:{{settings.headerFontColor}}}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.headerFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;opacity:.5;margin:10px 0 5px}@media screen and (min-width: 768px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:0}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory{margin-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__undercategory a{text-transform:none;color:{{settings.headerFontColor}};width:100%;font-weight:300;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__category a{color:{{settings.headerFontColor}};font-size:12px;font-weight:500;width:100%;display:inline-block}}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (max-width: 949px){.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:inline-block}}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}

Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-2.html, usuń jego zawartość i wklej następujący kod:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}

{% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: ”, logoAlt}}

{{ translations.Hea_Menu }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }}

{% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Com_Search }} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})

{% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%}

- {{ category | A }}
  - - {{undercategory.Name}}
  {% endfor -%}

{% endif -%} {% endfor -%}

- - - {{ category | A }}
  {% endif -%} {% endfor -%}

220×295

{% endif -%}

{% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%}

{{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%}

{% endif -%} {% endif -%} {% endfor -%}

Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on(’click’, ’.openCategoryMenu-js’, function() { i wstaw tuż nad nią kod:

    pageHeader.on('click', '.closeSearchButton > svg', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
        });

        pageHeader.on('input', '.searchFormPhrase-js', function() {
            if($(this).val().length > 0) {
                $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden');
            } else {
                $('.headerSection__searchForm__searchButtonMobile').addClass('hidden');
            }
        });

W tym samym pliku wyszukaj linię z frazą $(’.go-to-top__btn-js’).click(function(){. Tuż pod nią wklej ten kod:

    $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800);

Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz