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:


<div class="bottomMenuBack hidden"></div>
<div class="bottomMenu hidden">

    <a aria-label="start" class="menuItem {% if page.PageId == 1 -%} activePage {% endif -%}" href="{{config.DefinedPages.Home.Url}}">
        <div class="svgContainer">
            <svg>
                <use xlink:href="css/img/icons-sprite.svg#home-{{settings.iconStyle}}"></use>
            </svg>
        </div>
        {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}
        <div class="text">{{translations.Start}}</div>
        {% endif -%}
    </a>

    <a aria-label="menu" class="menuItem showBottomMenuSection-js">
        <div class="svgContainer">
            <svg>
                <use xlink:href="css/img/icons-sprite.svg#bars-{{settings.iconStyle}}"></use>
            </svg>
        </div>
        {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}
        <div class="text">{{translations.Hea_Menu}}</div>
        {% endif -%}
    </a>

    <a aria-label="cart" class="menuItem {% if page.PageId == 4 -%} activePage {% endif -%} " href="{{config.DefinedPages.Order.Url}}">
        <div class="svgContainer">
            <svg>
                <use xlink:href="css/img/icons-sprite.svg#shopping-bag-{{settings.iconStyle}}"></use>
            </svg>
            <span class="itemsCounter {% if customer.Cart.Count <= 0 -%} hidden {% endif -%}">{{customer.Cart.Count}}</span>
        </div>
        {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}
        <div class="text">{{translations.Crt_Cart}}</div>
        {% endif -%}
    </a>

    <a aria-label="favouriteItems" class="menuItem favouriteItemsButton" href="{{config.DefinedPages.CustomerProfile.Url}}?fav=1">
        <div class="svgContainer">
            <svg>
                <use xlink:href="css/img/icons-sprite.svg#heart-{{settings.iconStyle}}"></use>
            </svg>
            <span class="itemsCounter favouriteItems {% if customer.WishListCount <= 0 -%} hidden {% endif -%}">{{customer.WishListCount}}</span>
        </div>
        {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}
        <div class="text">{{translations.Favourite}}</div>
        {% endif -%}
    </a>

    <a aria-label="customerProfile" class="menuItem customerProfileButton {% if page.PageId == 6 -%} activePage {% endif %}" href="{{config.DefinedPages.CustomerProfile.Url}}?accountData=1">
        <div class="svgContainer">
            <svg>
                <use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use>
            </svg>
        </div>
        {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}
        <div class="text">{{translations.Account}}</div>
        {% endif -%}
    </a>
</div>

<svg>

</svg>

</div>

{% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}

<div class="text">{{translations.Start}}</div>

{% endif -%}

</a>

<svg>

</svg>

</div>

{% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}

<div class="text">{{translations.Hea_Menu}}</div>

{% endif -%}

</a>

<svg>

</svg>

<span class="itemsCounter {% if customer.Cart.Count <= 0 -%} hidden {% endif -%}">{{customer.Cart.Count}}</span>

</div>

{% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}

<div class="text">{{translations.Crt_Cart}}</div>

{% endif -%}

</a>

<svg>

</svg>

<span class="itemsCounter favouriteItems {% if customer.WishListCount <= 0 -%} hidden {% endif -%}">{{customer.WishListCount}}</span>

</div>

{% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}

<div class="text">{{translations.Favourite}}</div>

{% endif -%}

</a>

<svg>

</svg>

</div>

{% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%}

<div class="text">{{translations.Account}}</div>

{% endif -%}

</a>

</div>

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" -%}

{% 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" -%}

{% 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


<section>
    <h3 class='section-title'>{{displayLabelsOnBottomNavigationMenu}}</h3>
    <div>
        <div>
            <div>
                <input type="radio" name='displayLabelsOnBottomNavigationMenu' value='yes' id="displayLabelsOnBottomNavigationMenu-yes" {% if settings.displayLabelsOnBottomNavigationMenu == 'yes' %} checked {% endif %}/>
                <label class="label" for="displayLabelsOnBottomNavigationMenu-yes">{{yesTranslation}}</label>
            </div>
            <div>
                <input type="radio" name='displayLabelsOnBottomNavigationMenu' value='no' id="displayLabelsOnBottomNavigationMenu-no" {% if settings.displayLabelsOnBottomNavigationMenu == 'no' %} checked {% endif %}/>
                <label class="label" for="displayLabelsOnBottomNavigationMenu-no">{{noTranslation}}</label>
            </div>
        </div>
    </div>
</section>

<h3 class='section-title'>{{displayLabelsOnBottomNavigationMenu}}</h3>

<div>

<label class="label" for="displayLabelsOnBottomNavigationMenu-yes">{{yesTranslation}}</label>

</div>

<div>

<label class="label" for="displayLabelsOnBottomNavigationMenu-no">{{noTranslation}}</label>

</div>

</section>

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}}}}

@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();
        }
    }
});

$('.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');
        }
    },

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');
            }
        }
    },

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');
            }
        }
    },

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);
        })

$(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');
                }
            }

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');
            }
        }

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');
            }
        }

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');
            }
        }

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' -%}

{% 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}}

@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}

.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}}

@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:


               <div class="inputs-container-js mobileLogout" title="{{ translations.Cpr_Logout }}">
                    <input type="hidden" name="__action" value="Customer/Logout">
                    <div class="customerLogout-js mobileLogoutButton">
                        <span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span>
                    </div>
                </div>

<span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span>

</div>

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);
});

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();
            }
        });

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}}

@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}}

.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] -%}

<header class="headerSection headerSection__bg pageHeader-js">
    <div class="headerSection__row">
        <div class="headerSection__row">
            <span class="header__icon mobileMenuIcon headerSection__iconsMenuItem showMenuSection-js" title="{{ translations.Hea_Menu }}">
                    <svg><use xlink:href="css/img/icons-sprite.svg#bars-{{settings.iconStyle}}"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span>
                </span>
            <a aria-label="homepage-url" class="headerSection__logo" href="{{config.DefinedPages.Home.Url}}">
                {% assign logoAlt = config.Shop.Name | H -%}
                {{config.Shop.ImageUrl | Img: '', logoAlt}}
            </a>
            <div class="headerSection__iconsMenu">
                <span class="header__icon mobileSearchIcon headerSection__iconsMenuItem showSearchSection-js" title="{{ translations.Com_Search }}">
                    <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Com_Search }}</span>
                </span>
                {% if usr.Authenticated -%}
                    <span class="headerSection__iconsMenuItem hideOnMobile">
                        <a class="header__customer-profile header__icon" aria-label="customerProfile" href="{{ config.DefinedPages.CustomerProfile.Url }}" title="{{ translations.Hea_CustomerProfile }}">
                            <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg>
                            <span class="iconsMenuItem__text">{{ translations.Hea_CustomerProfile }}</span>
                        </a>
                    </span>
                <div class="header__icon inputs-container-js hideOnMobile headerSection__iconsMenuItem" title="{{ translations.Cpr_Logout }}">
                    <input aria-label="logout" type="hidden" name="__action" value="Customer/Logout">
                    <span class="customerLogout-js">
                        <svg><use xlink:href="css/img/icons-sprite.svg#power-off-{{settings.iconStyle}}"></use></svg>
                    </span>
                    <span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span>
                </div>
                {% else -%}
                <a class="header__login header__icon headerSection__iconsMenuItem" aria-label="loginIcon" href="{{ config.DefinedPages.Login.Url }}" title="{{ translations.Log_Login }}" rel="nofollow">
                    <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Log_Login }}</span>
                </a>
                {% endif -%}
                <span class="headerSection__iconsMenuItem hideOnMobile {% if customer.Cart.Count > 0 -%} activeCart {% endif -%}" title="{{ translations.Crt_Cart }}">
                    <a aria-label="order-url" class="header__cart header__icon" href="{{ config.DefinedPages.Order.Url }}">
                        <svg><use xlink:href="css/img/icons-sprite.svg#{{settings.cartIconStyle}}-{{settings.iconStyle}}"></use></svg>
                        <span class="iconsMenuItem__text"><i>{{ translations.Crt_Cart }}</i> (<span class="incrementProductsInCart-js" data-count="{{customer.Cart.Count}}">{% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}</span>)</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="headerSection__mainMenu headerSection__row headerMainMenu-js">
            <div class="headerSection__mainMenu__navLinks">
                <span class="headerSection__mainMenu__closeBtn mainMenuMobileCloseBtn-js">
                    <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span>
                </span>
                {% if header.Nodes[0] -%}
                <span class="mainMenu__navLink header__icon openCategoryMenu-js">
                    {{ translations.Com_Categories }}
                    <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
                </span>
                {% endif -%}
                <div class="headerSection__navigation">
                    <nav class="mainNavigation mainNavigation__links  mainNavigation-js">
                        <div class="mainNavigation__categories">
                            <ul>
                                {% for category in header.Nodes -%}
                                {% assign categoriesSize = category.Groups | Size -%}
                                {% if categoriesSize > 0 -%}
                                    <li>
                                        <span class="mainNavigation__category">
                                            {{ category | A }}
                                            <span class="header__icon openUndercategoryMenu-js">
                                                <svg class="header__icon--arrowDown">
                                                    <use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use>
                                                </svg>
                                            </span>
                                        </span>
                                        <ul>
                                            {% for undercategory in category.Groups -%}
                                            <li>
                                                <span class="mainNavigation__undercategory">
                                                    <a aria-label="undercategory" href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a>
                                                </span>
                                            </li>
                                            {% endfor -%}
                                        </ul>
                                    </li>
                                {% endif -%}
                                {% endfor -%}
                                <li>
                                    <ul class="mainNavigation__categories__noChilds">
                                        {% for category in header.Nodes -%}
                                        {% assign categoriesSize = category.Groups | Size -%}
                                        {% if categoriesSize == 0 -%}
                                        <li>
                                            <span class="mainNavigation__category">
                                                {{ category | A }}
                                            </span>
                                        </li>
                                        {% endif -%}
                                        {% endfor -%}
                                    </ul>
                                </li>
                            </ul>
                            <div class="mainNavigation__image">
                                {% 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}}
                                     <p class="banner__size">220x295</p>
                                {% endif -%}
                            </div>
                        </div>
                    </nav>
                </div>
                <span class="mainMenu__navLink header__icon openPagesMenu-js">
                    {{ translations.Hea_Pages }}
                    <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
                </span>
                <div class="headerSection__navigation">
                    <nav class="mainNavigation mainNavigation__sites sitesNavigation-js">
                        <ul>
                            <li><a aria-label="definedpages-about" href="{{ config.DefinedPages.About.Url }}"><span>{{config.DefinedPages.About.Name}}</span></a></li>
                            <li><a aria-label="definedpages-payment" href="{{ config.DefinedPages.Payment.Url }}" rel="nofollow"><span>{{config.DefinedPages.Payment.Name}}</span></a></li>
                            <li><a aria-label="definedpages-shipping" href="{{ config.DefinedPages.Shipping.Url }}" rel="nofollow"><span>{{config.DefinedPages.Shipping.Name}}</span></a></li>
                            <li><a aria-label="definedpages-terms" href="{{ config.DefinedPages.Terms.Url }}" rel="nofollow"><span>{{config.DefinedPages.Terms.Name}}</span></a></li>
                        </ul>
                    </nav>
                </div>
                <span class="mainMenu__navLink">{{ config.DefinedPages.Contact | A }}</span>
                {% 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  -%}
                    <span class="mainMenu__navLink header__icon openLookbooksMenu-js">
                        {{ translations.Lookbook }}
                        <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
                    </span>
                    <div class="headerSection__navigation">
                        <nav class="mainNavigation mainNavigation__lookbooks lookbooksNavigation-js">
                            <ul>
                                {% for lookbook in config.Lookbook.List -%}
                                    <li><a aria-label="lookbook" href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li>
                                {% endfor -%}
                            </ul>
                        </nav>
                    </div>
                {% elseif lookbooksQuantity == 1 or fakeLookbook -%}
                    <span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span>
                {% endif -%}
            </div>
            <div class="headerSection__shopData">
                {% if config.Shop.Contact.PhoneNo != '' -%}
                    <span>
                        <svg class="svgIcon footer__icon--rotate100"><use xlink:href="css/img/icons-sprite.svg#phone-{{settings.iconStyle}}"></use></svg>
                        <a aria-label="contact-phone" href="tel:{{config.Shop.Contact.PhoneNo}}">{{config.Shop.Contact.PhoneNo}}</a>
                    </span>
                {% endif -%}
                {% if config.Shop.Contact.Email != '' -%}
                    <span>
                        <svg class="svgIcon svgIcon--envelope"><use xlink:href="css/img/icons-sprite.svg#envelope-{{settings.iconStyle}}"></use></svg>
                        <a aria-label="contact-mail" href="mailto:{{config.Shop.Contact.Email}}">{{ config.Shop.Contact.Email }}</a>
                    </span>
                {% endif -%}
                <span class="uppercase headerSection__languageAndCurrencyMenu__openBtn openLanguageAndCurrencyMenu-js">
                    <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#globe-{{settings.iconStyle}}"></use></svg>
                    {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
                </span>
                <div class="headerSection__languageAndCurrencyMenu languageAndCurrencyMenu-js">
                    <div class="languageAndCurrencyMenu__container">
                        <div class="languageAndCurrencyMenu__language form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js">
                            <span class="languageAndCurrencyMenu__title">{{ translations.Prf_Language }}</span>
                            <input aria-label="languageChange" type="hidden" name="__action" value="Customer/LanguageChange"/>
                            {% for language in config.Languages -%}
                                <input aria-label="currencyChange" id="lang-{{language.Id}}" class="checkbox-input customerCurrencyChange-js" value="{{language.Id}}" type="radio" name="languageId" {% if page.LanguageId == language.Id -%} checked {% endif -%}/>
                                <label for="lang-{{language.Id}}">
                                    <span class="checkBoxes__checkIcon">
                                        <svg><circle cx="7" cy="8" r="2"/></svg>
                                    </span>
                                    {{ language.Language }}
                                </label>
                            {% endfor -%}
                        </div>
                        <div class="languageAndCurrencyMenu__currency form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js">
                            <span class="languageAndCurrencyMenu__title">{{ translations.Com_Currency }}</span>
                            <input aria-label="currencyChange" type="hidden" name="__action" value="Customer/CurrencyChange"/>
                            {% for currency in config.Currencies -%}
                                <input aria-label="languageChange" id="curr-{{currency.Code}}" class="checkbox-input customerLanguageChange-js" value="{{currency.Code}}" type="radio" name="currency" {% if customer.Currency == currency.Code -%} checked {% endif -%}/>
                                <label for="curr-{{currency.Code}}">
                                    <span class="checkBoxes__checkIcon">
                                        <svg><circle cx="7" cy="8" r="2"/></svg>
                                    </span>
                                    {{ currency.Code }}
                                </label>
                            {% endfor -%}
                        </div>
                    </div>
                </div>
            </div>
            {% if usr.Authenticated == false -%}
                <a aria-label="login-register-button" class="primary-action-button customerLogin__mobileButton" href="{{config.DefinedPages.Login.Url}}" rel="nofollow">
                    <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg>
                    {{translations.Com_Login}} / {{translations.Registration}}
                </a>
            {% endif -%}
        </div>
    </div>
    <div class="headerSection__searchForm headerSearchForm-js inputs-container-js" title="{{translations.Com_Search}}">
        <input aria-label="get-search" type="hidden" name="__action" value="Get/Search" />
        <div class="headerSection__mainMenu__closeBtn ">
            <svg class="svgIcon mainMenuMobileCloseSearchBtn-js"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>
        </div>
        <input aria-label="search" type="search" name="search" class="headerSection__searchForm__phrase searchFormPhrase-js getSearchAutocomplete-js" placeholder="{{translations.SearchInShop}}" autocomplete="off" required />
        <button aria-label="searchButton" class="headerSection__searchForm__btn header__icon getSearch-js enterKeyTrigger-js">
            <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg>
        </button>
        <button aria-label="searchButton-mobile" class="headerSection__searchForm__searchButtonMobile hidden header__icon getSearch-js enterKeyTrigger-js">
            {{translations.Com_Search}}
            </button>
        </div>
</header>

{% 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 -%}
<div class="configMessages configMessages__header {% if index > 1 -%} hidden {% endif -%}">
	<span id="{{ cookieName }}" class="configMessages__btn configMessages__btn-js" data-days="{{ msg.Days }}">
		<svg><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>
	</span>
    {% if msg.Title != '' -%}
    <div class="configMessages__title">
        {% if msg.Url != '' -%}
        <a aria-label="message" href="{{ msg.Url }}">{{ msg.Title }}</a>
        {% else -%}
        {{ msg.Title }}
        {% endif -%}
    </div>
    {% endif -%}
    <div class="configMessages__message">{{ msg.Message }}</div>
</div>
{% endif -%}
{% endif -%}
{% endfor -%}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

{% assign categories = page.GroupNodes %}

{% assign lngCount = config.Languages | Size -%}

{% assign currentLang = config.Languages[page.LanguageId] -%}

<span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span>

</span>

{% assign logoAlt = config.Shop.Name | H -%}

</a>

<span class="iconsMenuItem__text">{{ translations.Com_Search }}</span>

</span>

{% if usr.Authenticated -%}

<span class="iconsMenuItem__text">{{ translations.Hea_CustomerProfile }}</span>

</a>

</span>

</span>

<span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span>

</div>

{% else -%}

<span class="iconsMenuItem__text">{{ translations.Log_Login }}</span>

</a>

{% endif -%}

<span class="headerSection__iconsMenuItem hideOnMobile {% if customer.Cart.Count > 0 -%} activeCart {% endif -%}" title="{{ translations.Crt_Cart }}">

<span class="iconsMenuItem__text"><i>{{ translations.Crt_Cart }}</i> (<span class="incrementProductsInCart-js" data-count="{{customer.Cart.Count}}">{% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}</span>)</span>

</a>

</span>

</div>

<span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span>

</span>

{% if header.Nodes[0] -%}

</span>

{% endif -%}

<ul>

{% for category in header.Nodes -%}

{% assign categoriesSize = category.Groups | Size -%}

{% if categoriesSize > 0 -%}

<li>

</svg>

</span>

<ul>

{% for undercategory in category.Groups -%}

<li>

<a aria-label="undercategory" href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a>

</span>

</li>

{% endfor -%}

</ul>

</li>

{% endif -%}

{% endfor -%}

<li>

{% for category in header.Nodes -%}

{% assign categoriesSize = category.Groups | Size -%}

{% if categoriesSize == 0 -%}

<li>

</span>

</li>

{% endif -%}

{% endfor -%}

</ul>

</li>

</ul>

{% assign name = 'menuBanner' -%}

{% if config.Banners[name].Images[0] -%}

{% assign banner = config.Banners[name].Images[0] -%}

{% if banner -%}

{% assign bannerAlt = banner.Alt | H -%}

{% endif -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% endif -%}

</div>

</nav>

</div>

</span>

<ul>

<li><a aria-label="definedpages-about" href="{{ config.DefinedPages.About.Url }}"><span>{{config.DefinedPages.About.Name}}</span></a></li>

<li><a aria-label="definedpages-payment" href="{{ config.DefinedPages.Payment.Url }}" rel="nofollow"><span>{{config.DefinedPages.Payment.Name}}</span></a></li>

<li><a aria-label="definedpages-shipping" href="{{ config.DefinedPages.Shipping.Url }}" rel="nofollow"><span>{{config.DefinedPages.Shipping.Name}}</span></a></li>

<li><a aria-label="definedpages-terms" href="{{ config.DefinedPages.Terms.Url }}" rel="nofollow"><span>{{config.DefinedPages.Terms.Name}}</span></a></li>

</ul>

</nav>

</div>

<span class="mainMenu__navLink">{{ config.DefinedPages.Contact | A }}</span>

{% 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 -%}

</span>

<ul>

{% for lookbook in config.Lookbook.List -%}

<li><a aria-label="lookbook" href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li>

{% endfor -%}

</ul>

</nav>

</div>

{% elseif lookbooksQuantity == 1 or fakeLookbook -%}

<span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span>

{% endif -%}

</div>

{% if config.Shop.Contact.PhoneNo != '' -%}

<span>

<a aria-label="contact-phone" href="tel:{{config.Shop.Contact.PhoneNo}}">{{config.Shop.Contact.PhoneNo}}</a>

</span>

{% endif -%}

{% if config.Shop.Contact.Email != '' -%}

<span>

<a aria-label="contact-mail" href="mailto:{{config.Shop.Contact.Email}}">{{ config.Shop.Contact.Email }}</a>

</span>

{% endif -%}

{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

</span>

<span class="languageAndCurrencyMenu__title">{{ translations.Prf_Language }}</span>

{% for language in config.Languages -%}

</span>

</label>

{% endfor -%}

</div>

<span class="languageAndCurrencyMenu__title">{{ translations.Com_Currency }}</span>

{% for currency in config.Currencies -%}

</span>

</label>

{% endfor -%}

</div>

{% if usr.Authenticated == false -%}

{{translations.Com_Login}} / {{translations.Registration}}

</a>

{% endif -%}

</div>

</div>

</button>

</button>

</div>

</header>

{% 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 -%}

<div class="configMessages configMessages__header {% if index > 1 -%} hidden {% endif -%}">

</span>

{% if msg.Title != '' -%}

{% if msg.Url != '' -%}

<a aria-label="message" href="{{ msg.Url }}">{{ msg.Title }}</a>

{% else -%}

{% endif -%}

</div>

{% endif -%}

<div class="configMessages__message">{{ msg.Message }}</div>

</div>

{% 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');
            }
        });

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}}

@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}}

.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] -%}

<header class="headerSection headerSection__bg pageHeader-js">
    <div class="headerSection__row">
        <div class="headerSection__row">
            <a class="headerSection__logo" href="{{config.DefinedPages.Home.Url}}">
                {% assign logoAlt = config.Shop.Name | H -%}
                {{config.Shop.ImageUrl | Img: '', logoAlt}}
            </a>
            <div class="headerSection__searchForm headerSearchForm-js">
                <span class="closeSearchButton">
                    <svg><use xlink:href="css/img/icons-sprite.svg#times-{{settings.iconStyle}}"></use></svg>
                </span>
                <div class=" inputs-container-js" title="{{translations.Com_Search}}">
                    <input type="hidden" name="__action" value="Get/Search" />
                    <input type="search" name="search" class="headerSection__searchForm__phrase searchFormPhrase-js getSearchAutocomplete-js" aria-label="searchFormPhrase" placeholder="{{translations.SearchInShop}}" autocomplete="off" required />
                    <button class="headerSection__searchForm__btn header__icon getSearch-js enterKeyTrigger-js" aria-label="searchForm">
                        <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg>
                    </button>
                    <button class="headerSection__searchForm__searchButtonMobile hidden header__icon getSearch-js enterKeyTrigger-js">
                        {{translations.Com_Search}}
                    </button>
                </div>
            </div>
            <div class="headerSection__iconsMenu">
                <span class="header__icon mobileMenuIcon headerSection__iconsMenuItem hideOnMobile showMenuSection-js" title="{{ translations.Hea_Menu }}">
                    <svg><use xlink:href="css/img/icons-sprite.svg#bars-{{settings.iconStyle}}"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span>
                </span>
                {% if usr.Authenticated -%}
                <span class="headerSection__iconsMenuItem">
                        <a class="header__customer-profile header__icon hideOnMobile" aria-label="customerProfile" href="{{ config.DefinedPages.CustomerProfile.Url }}" title="{{ translations.Hea_CustomerProfile }}">
                            <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg>
                            <span class="iconsMenuItem__text">{{ translations.Hea_CustomerProfile }}</span>
                        </a>
                    </span>
                <div class="header__icon inputs-container-js hideOnMobile headerSection__iconsMenuItem" title="{{ translations.Cpr_Logout }}">
                    <input type="hidden" name="__action" value="Customer/Logout">
                    <span class="customerLogout-js">
                            <svg><use xlink:href="css/img/icons-sprite.svg#power-off-{{settings.iconStyle}}"></use></svg>
                        </span>
                    <span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span>
                </div>
                {% else -%}
                <a class="header__login header__icon headerSection__iconsMenuItem hideOnMobile" aria-label="headerIconLogin" href="{{ config.DefinedPages.Login.Url }}" title="{{ translations.Log_Login }}" rel="nofollow">
                    <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Log_Login }}</span>
                </a>
                {% endif -%}
                <span class="header__icon mobileSearchIcon headerSection__iconsMenuItem showSearchSection-js" title="{{ translations.Com_Search }}">
                    <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg>
                    <span class="iconsMenuItem__text">{{ translations.Com_Search }}</span>
                </span>
                <span class="headerSection__iconsMenuItem hideOnMobile {% if customer.Cart.Count > 0 -%} activeCart {% endif -%}" title="{{ translations.Crt_Cart }}">
                    <a class="header__cart header__icon" href="{{ config.DefinedPages.Order.Url }}">
                        <svg><use xlink:href="css/img/icons-sprite.svg#{{settings.cartIconStyle}}-{{settings.iconStyle}}"></use></svg>
                        <span class="iconsMenuItem__text">{{ translations.Crt_Cart }} (<span class="incrementProductsInCart-js" data-count="{{customer.Cart.Count}}">{% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}</span>)</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="headerSection__mainMenu headerSection__row headerMainMenu-js">
            <div class="headerSection__mainMenu__navLinks">
                <div class="headerSection__mainMenu__closeBtn mainMenuMobileCloseBtn-js">
                    <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#times-{{settings.iconStyle}}"></use></svg>
                </div>
                {% if header.Nodes[0] -%}
                <span class="mainMenu__navLink header__icon openCategoryMenu-js">
                    {{ translations.Com_Categories }}
                    <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
                </span>
                {% endif -%}
                <div class="headerSection__navigation">
                    <nav class="mainNavigation mainNavigation__links  mainNavigation-js">
                        <div class="mainNavigation__categories">
                            <ul>
                                {% for category in header.Nodes -%}
                                {% assign categoriesSize = category.Groups | Size -%}
                                {% if categoriesSize > 0 -%}
                                    <li>
                                        <span class="mainNavigation__category">
                                            {{ category | A }}
                                            <span class="header__icon">
                                                <svg class="header__icon--arrowDown openUndercategoryMenu-js">
                                                    <use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use>
                                                </svg>
                                            </span>
                                        </span>
                                        <ul>
                                            {% for undercategory in category.Groups -%}
                                            <li>
                                                <span class="mainNavigation__undercategory">
                                                    <a href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a>
                                                </span>
                                            </li>
                                            {% endfor -%}
                                        </ul>
                                    </li>
                                {% endif -%}
                                {% endfor -%}
                                <li>
                                    <ul class="mainNavigation__categories__noChilds">
                                        {% for category in header.Nodes -%}
                                        {% assign categoriesSize = category.Groups | Size -%}
                                        {% if categoriesSize == 0 -%}
                                        <li>
                                            <span class="mainNavigation__category">
                                                {{ category | A }}
                                            </span>
                                        </li>
                                        {% endif -%}
                                        {% endfor -%}
                                    </ul>
                                </li>
                            </ul>
                            <div class="mainNavigation__image">
                                {% 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}}
                                     <p class="banner__size">220x295</p>
                                {% endif -%}
                            </div>
                        </div>
                    </nav>
                </div>
                <span class="mainMenu__navLink header__icon openPagesMenu-js">
                    {{ translations.Hea_Pages }}
                    <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
                </span>
                <div class="headerSection__navigation">
                    <nav class="mainNavigation mainNavigation__sites sitesNavigation-js">
                        <ul>
                            <li><a href="{{ config.DefinedPages.About.Url }}"><span>{{config.DefinedPages.About.Name}}</span></a></li>
                            <li><a href="{{ config.DefinedPages.Payment.Url }}" rel="nofollow"><span>{{config.DefinedPages.Payment.Name}}</span></a></li>
                            <li><a href="{{ config.DefinedPages.Shipping.Url }}" rel="nofollow"><span>{{config.DefinedPages.Shipping.Name}}</span></a></li>
                            <li><a href="{{ config.DefinedPages.Terms.Url }}" rel="nofollow"><span>{{config.DefinedPages.Terms.Name}}</span></a></li>
                        </ul>
                    </nav>
                </div>
                <span class="mainMenu__navLink">{{ config.DefinedPages.Contact | A }}</span>
                {% 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  -%}
                    <span class="mainMenu__navLink header__icon openLookbooksMenu-js">
                        {{ translations.Lookbook }}
                        <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
                    </span>
                    <div class="headerSection__navigation">
                        <nav class="mainNavigation mainNavigation__lookbooks lookbooksNavigation-js">
                            <ul>
                                {% for lookbook in config.Lookbook.List -%}
                                    <li><a href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li>
                                {% endfor -%}
                            </ul>
                        </nav>
                    </div>
                {% elseif lookbooksQuantity == 1 or fakeLookbook -%}
                    <span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span>
                {% endif -%}
            </div>
            <div class="headerSection__shopData">
                {% if config.Shop.Contact.PhoneNo != '' -%}
                    <span>
                        <svg class="svgIcon footer__icon--rotate100"><use xlink:href="css/img/icons-sprite.svg#phone-{{settings.iconStyle}}"></use></svg>
                        <a href="tel:{{config.Shop.Contact.PhoneNo}}">{{config.Shop.Contact.PhoneNo}}</a>
                    </span>
                {% endif -%}
                {% if config.Shop.Contact.Email != '' -%}
                    <span>
                        <svg class="svgIcon svgIcon--envelope"><use xlink:href="css/img/icons-sprite.svg#envelope-{{settings.iconStyle}}"></use></svg>
                        <a href="mailto:{{config.Shop.Contact.Email}}">{{ config.Shop.Contact.Email }}</a>
                    </span>
                {% endif -%}
                <span class="uppercase headerSection__languageAndCurrencyMenu__openBtn openLanguageAndCurrencyMenu-js">
                    <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#globe-{{settings.iconStyle}}"></use></svg>
                    {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
                </span>
                <div class="headerSection__languageAndCurrencyMenu languageAndCurrencyMenu-js">
                    <div class="languageAndCurrencyMenu__container">
                        <div class="languageAndCurrencyMenu__language form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js">
                            <span class="languageAndCurrencyMenu__title">{{ translations.Prf_Language }}</span>
                            <input type="hidden" name="__action" value="Customer/LanguageChange"/>
                            {% for language in config.Languages -%}
                                <input id="lang-{{language.Id}}" class="checkbox-input customerCurrencyChange-js" value="{{language.Id}}" type="radio" name="languageId" {% if page.LanguageId == language.Id -%} checked {% endif -%}/>
                                <label for="lang-{{language.Id}}">
                                    <span class="checkBoxes__checkIcon">
                                        <svg><circle cx="7" cy="8" r="2"/></svg>
                                    </span>
                                    {{ language.Language }}
                                </label>
                            {% endfor -%}
                        </div>
                        <div class="languageAndCurrencyMenu__currency form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js">
                            <span class="languageAndCurrencyMenu__title">{{ translations.Com_Currency }}</span>
                            <input type="hidden" name="__action" value="Customer/CurrencyChange"/>
                            {% for currency in config.Currencies -%}
                                <input id="curr-{{currency.Code}}" class="checkbox-input customerLanguageChange-js" value="{{currency.Code}}" type="radio" name="currency" {% if customer.Currency == currency.Code -%} checked {% endif -%}/>
                                <label for="curr-{{currency.Code}}">
                                    <span class="checkBoxes__checkIcon">
                                        <svg><circle cx="7" cy="8" r="2"/></svg>
                                    </span>
                                    {{ currency.Code }}
                                </label>
                            {% endfor -%}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

{% 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 -%}
<div class="configMessages configMessages__header {% if index > 1 -%} hidden {% endif -%}">
	<span id="{{ cookieName }}" class="configMessages__btn configMessages__btn-js" data-days="{{ msg.Days }}">
		<svg><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>
	</span>
    {% if msg.Title != '' -%}
    <div class="configMessages__title">
        {% if msg.Url != '' -%}
        <a href="{{ msg.Url }}">{{ msg.Title }}</a>
        {% else -%}
        {{ msg.Title }}
        {% endif -%}
    </div>
    {% endif -%}
    <div class="configMessages__message">{{ msg.Message }}</div>
</div>
{% endif -%}
{% endif -%}
{% endfor -%}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

{% assign categories = page.GroupNodes %}

{% assign lngCount = config.Languages | Size -%}

{% assign currentLang = config.Languages[page.LanguageId] -%}

{% assign logoAlt = config.Shop.Name | H -%}

</a>

</span>

</button>

</button>

</div>

<span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span>

</span>

{% if usr.Authenticated -%}

<span class="iconsMenuItem__text">{{ translations.Hea_CustomerProfile }}</span>

</a>

</span>

</span>

<span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span>

</div>

{% else -%}

<span class="iconsMenuItem__text">{{ translations.Log_Login }}</span>

</a>

{% endif -%}

<span class="iconsMenuItem__text">{{ translations.Com_Search }}</span>

</span>

<span class="headerSection__iconsMenuItem hideOnMobile {% if customer.Cart.Count > 0 -%} activeCart {% endif -%}" title="{{ translations.Crt_Cart }}">

<span class="iconsMenuItem__text">{{ translations.Crt_Cart }} (<span class="incrementProductsInCart-js" data-count="{{customer.Cart.Count}}">{% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}</span>)</span>

</a>

</span>

</div>

</div>

{% if header.Nodes[0] -%}

</span>

{% endif -%}

<ul>

{% for category in header.Nodes -%}

{% assign categoriesSize = category.Groups | Size -%}

{% if categoriesSize > 0 -%}

<li>

</svg>

</span>

<ul>

{% for undercategory in category.Groups -%}

<li>

<a href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a>

</span>

</li>

{% endfor -%}

</ul>

</li>

{% endif -%}

{% endfor -%}

<li>

{% for category in header.Nodes -%}

{% assign categoriesSize = category.Groups | Size -%}

{% if categoriesSize == 0 -%}

<li>

</span>

</li>

{% endif -%}

{% endfor -%}

</ul>

</li>

</ul>

{% assign name = 'menuBanner' -%}

{% if config.Banners[name].Images[0] -%}

{% assign banner = config.Banners[name].Images[0] -%}

{% if banner -%}

{% assign bannerAlt = banner.Alt | H -%}

{% endif -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% endif -%}

</div>

</nav>

</div>

</span>

<ul>

<li><a href="{{ config.DefinedPages.About.Url }}"><span>{{config.DefinedPages.About.Name}}</span></a></li>

<li><a href="{{ config.DefinedPages.Payment.Url }}" rel="nofollow"><span>{{config.DefinedPages.Payment.Name}}</span></a></li>

<li><a href="{{ config.DefinedPages.Shipping.Url }}" rel="nofollow"><span>{{config.DefinedPages.Shipping.Name}}</span></a></li>

<li><a href="{{ config.DefinedPages.Terms.Url }}" rel="nofollow"><span>{{config.DefinedPages.Terms.Name}}</span></a></li>

</ul>

</nav>

</div>

<span class="mainMenu__navLink">{{ config.DefinedPages.Contact | A }}</span>

{% 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 -%}

</span>

<ul>

{% for lookbook in config.Lookbook.List -%}

<li><a href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li>

{% endfor -%}

</ul>

</nav>

</div>

{% elseif lookbooksQuantity == 1 or fakeLookbook -%}

<span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span>

{% endif -%}

</div>

{% if config.Shop.Contact.PhoneNo != '' -%}

<span>

<a href="tel:{{config.Shop.Contact.PhoneNo}}">{{config.Shop.Contact.PhoneNo}}</a>

</span>

{% endif -%}

{% if config.Shop.Contact.Email != '' -%}

<span>

<a href="mailto:{{config.Shop.Contact.Email}}">{{ config.Shop.Contact.Email }}</a>

</span>

{% endif -%}

{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

</span>

<span class="languageAndCurrencyMenu__title">{{ translations.Prf_Language }}</span>

{% for language in config.Languages -%}

</span>

</label>

{% endfor -%}

</div>

<span class="languageAndCurrencyMenu__title">{{ translations.Com_Currency }}</span>

{% for currency in config.Currencies -%}

</span>

</label>

{% endfor -%}

</div>

</header>

{% 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 -%}

<div class="configMessages configMessages__header {% if index > 1 -%} hidden {% endif -%}">

</span>

{% if msg.Title != '' -%}

{% if msg.Url != '' -%}

<a href="{{ msg.Url }}">{{ msg.Title }}</a>

{% else -%}

{% endif -%}

</div>

{% endif -%}

<div class="configMessages__message">{{ msg.Message }}</div>

</div>

{% 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');
            }
        });

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);

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

Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz