Настройка шапки

Будем идти сверху вниз справа на лево.

Все настройки (за некоторым исключением) «лежат» в секции Настройки шапки.

  1. Верхний баннер
  2. Верхняя панель
  3. Логотип
  4. Поиск
  5. Телефоны
  6. Часы работы
  7. Корзина
  8. Ссылки
  9. Главное меню

По умолчанию верхний баннер включен. Если он вам не нужен, снимите галочку с опции «включить верхний баннер».

Режим закрытия

Здесь доступно три режима:

Не закрывать – если включен этот режим то у посетителей не будет возможности закрыть баннер, при каждом открытии сайта они будут его видеть. Используйте этот режим только в крайних случаях, т.к. он очень навязчивый и может вызывать негативную реакцию и пользователь покинет ваш сайт.

Закрывать, после перезагрузки снова показывать – этот режим почти ничем не отличается от предыдущего, разве что баннер можно закрыть. Но всё равно на следующей странице баннер выскочит снова. Также используйте его осторожно! 

Закрывать, не показывать снова – самый оптимальных режим, он включен по умолчанию. Пользователь может закрыть баннер и больше его не увидит. За количество дней, в течение которых пользователь не будет видеть баннер, отвечает опция ниже – На сколько дней закрывать баннер.

Фоновый цвет и текст контента баннера 

Если тёмный цвет текста плохо читается на выбранном фоне, то нужно отметить галочку Инвертировать цвет текста баннера – тогда цвет текста станет светлым. Если вам нужен тёмный цвет текста – снимите галочку с этой опции. 

Контент баннера

Чтобы было удобнее редактировать контент баннера, потяните за правый нижний уголок поля и растяните поле пошире и повыше. 

За кнопку в баннере отвечает код:

<a href="#" class="uk-button uk-button-small uk-button-default ml-15 mr-15">Кнопка</a>

Чтобы заменить ссылку кнопки, вместо символа # вставьте свою ссылку.
Чтобы изменить текст кнопки, замените слово Кнопка на своё слово.

Таймер

По умолчанию таймер выключен. Чтобы его включить, отметьте соответствующую галочку. 
Стоит упомянуть о настройке даты. Настраивайте дату в соответствии с подсказками в настройках темы:

Формат даты:
YYYY-MM-DD hh:mm:ss

Где:
YYYY – год
MM - месяц
DD - день
hh – час в 24-часовом формате (перед hh идёт пробел)
mm – минута
ss – секунда

Например если вам нужно, чтобы таймер отсчитывал время до 31 декабря 2019 года, то дата должна выглядеть так:

2019-12-31 00:00:00

 

2. Верхняя панель

По настройке верхней панели написана отдельная инструкция.
Ознакомьтесь с ней на этой странице.

 

По причине того, что логотип используется не только в шапке, но и в подвале, его настройка была вынесена в отдельную секцию – Брендирование.


Текстовый логотип

Если у вас нет графического логотипа, вы можете использовать текстовый. 
Просто замените слово Super на своё, в поле опции Текстовый логотип и выберите шрифт, который вам больше подходит. 

Если вам не нравится что логотип повёрнут или вы хотите использовать другой угол, то измените значение угла в опции Повернуть логотип на градусов. Горизонтальное положение логотипа – это 0 градусов либо пустое поле. 

Если вам нужно убрать тень логотипа, то удалите код из полей: CSS правила для логотипа.

Графический логотип

Если у вас есть графический логотип, то загрузите его в соответствующие поля.
Поскольку цвета шапки и подвала могут сильно различаться, то было добавлено поле для логотипа в подвале. Чтобы у вас была возможность загрузить логотип соответствующий цвету подвала. 

Если логотип для подвала не загружен, то там будет выводится логотип из предыдущего поля. 

Retina версия

Ретина версия – это версия изображения (в данном случае логотипа), которая будет показываться на устройствах с большой плотностью пикселей (например большинство современных смартфонов). Обычная версия на таких устройствах будет выглядеть размытой. 

Ретина версия – это то же самое изображение, только в два раза больше. 
Например у вас есть логотип размеры которого 200px в ширину и 150px в высоту.
Значит его Ретина версия должна иметь размеры 400px в ширину и 300px в высоту.

 

Слоган

Если вам не нужна тень текста у слогана, то удалите содержимое полей CSS правила для слогана

 

Возвращаемся в cекцию Настройки шапки.
С поиском всё просто – его можно либо включить, либо выключить. Пока других настроек нет. 

 

5. Телефоны в шапке

Чтобы отредактировать телефоны в шапке, откройте секцию настроек темы: Настройки шапки –> Телефоны в шапке.

Затем отредактируйте телефоны.

Если телефоны не нужны

Снимите галочку с опции «Показывать телефоны в шапке». 

Если нужен только один телефон

Удалите лишний телефон из текстового поля.

Если нужно большее количество телефонов

Настройки темы предусматривают только два телефона. 
Но их можно обойти через блок super.header_phones

Прежде чем создавать данный блок, ознакомьтесь с заметкой о том, что такое блоки и где их добавлять.
Теперь когда вы знаете, что это такое, можно создать блок с именем super.header_phones и добавить туда следующий код:

{strip}

<!-- ПЕРВЫЙ НОМЕР -->
<a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
    +x (xxx) xxx-xx-xx
</a>

<!-- ВТОРОЙ НОМЕР -->
<a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
    +x (xxx) xxx-xx-xx
</a>

<!-- ТРЕТИЙ НОМЕР -->
<a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
    +x (xxx) xxx-xx-xx
</a>

{/strip}

И заменить «иксы» на свои номера.

Мессенджеры в номерах

Можно пойти ещё дальше и добавить номерам иконки мессенджеров и сделать их в виде ссылок.
Для этого, вместо кода выше, добавьте этот код: 

{strip}

<!-- ПЕРВЫЙ НОМЕР -->
<a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
    +x (xxx) xxx-xx-xx
</a>

<!-- whatsapp -->
<a href="whatsapp://send?phone=%2Bxxxxxxxxxxx" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-whatsapp-square fa-lg" style="color:#35B548"></i>
</a>

<!-- viber -->
<a href="viber://chat?number=%2Bxxxxxxxxxxx" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-viber fa-lg" style="color:#7A539B"></i>
</a>

<!-- Telegram -->
<a href="[ссылка на телеграм]" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-telegram fa-lg" style="color:#2F9BD1"></i>
</a>

<br>

<!-- ВТОРОЙ НОМЕР -->
<a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
    +x (xxx) xxx-xx-xx
</a>

<!-- whatsapp -->
<a href="whatsapp://send?phone=%2Bxxxxxxxxxxx" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-whatsapp-square fa-lg"></i>
</a>

<!-- viber -->
<a href="viber://chat?number=%2Bxxxxxxxxxxx" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-viber fa-lg"></i>
</a>

<!-- Telegram -->
<a href="[ссылка на телеграм]" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-telegram fa-lg"></i>
</a>

<br>

<!-- ТРЕТИЙ НОМЕР -->
<a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
    +x (xxx) xxx-xx-xx
</a>

<!-- whatsapp -->
<a href="whatsapp://send?phone=%2Bxxxxxxxxxxx" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-whatsapp-square fa-lg"></i>
</a>

<!-- viber -->
<a href="viber://chat?number=%2Bxxxxxxxxxxx" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-viber fa-lg"></i>
</a>

<!-- Telegram -->
<a href="[ссылка на телеграм]" class="uk-link-reset pl-5 uk-display-inline-block">
    <i class="fab fa-telegram fa-lg"></i>
</a>

<br>

{/strip}

В таком случае иконки мессенджеров нужно удалить из блока со ссылками.
«Иксы» замените на привязанные номера телефонов к мессенджерам.
А вместо [ссылка на телеграм] укажите ссылку согласно вашим потребностям:

Общий чат
Если хотите добавить ссылку на чат, то откройте ваш чат, откройте настройки чата и нажмите на «+ Добавить», затем выберите «Ссылка приглашение». Скопируйте данную ссылку и вставьте в это поле.
Ссылка выглядит примерно так: https://t.me/joinchat/xxxxxxxxxxxxxx

Чат с пользователем
Узнайте @nickname пользователя.
Например @test.
И вставьте в поле ссылку вида: https://telegram.me/nickname
Т.е. для пользователя @test ссылка будет выглядеть так: https://telegram.me/test
@ (знак собаки) нужно убрать из ссылки.

Читайте также про блок ссылок в этой инструкции.

6. Часы работы в шапке

Чтобы отредактировать часы работы, откройте секцию настроек темы Настройки шапки –> Часы работы в шапке.

Часы работы – это обычный HTML код.
Часы работы не берутся из настроек приложения Магазин по нескольким причинам: 

  • Проще редактировать, когда знаешь, что всё в одном месте.
  • У простого HTML кода больше возможностей для кастомизации.

Код «часов работы» по умолчанию выглядит так:

<span style="color:#31A977;">
    <i class="fa fa-clock-o"></i> <b>Пн-Пт</b>
</span> 10:00 - 18:00
<br>

<span style="color:#DE9B39;">
    <i class="fa fa-clock-o"></i> <b>Сб-Вс</b>
</span> 12:00 - 16:00

Разберёмся в этом коде.
Атрибут тега <span> style="color:#31A977;" указывает на то, каким цветом должен отображаться текст внутри тега.
В данном случае это иконка <i class="fa fa-clock-o"></i> и дни недели, выделенные жирным (тег <b> делает текст внутри себя жирным) – <b>Пн-Пт</b>

Тег <br> отвечает за перенос строки.
Таким образом, если вы хотите добавить ещё одну строку с часами, то нужно в самый низ поля добавить подобный код:

<br>

<span style="color:#DE9B39;">
    <i class="fa fa-clock-o"></i> <b>Сб-Вс</b>
</span> 12:00 - 16:00

Если вам не нравится зелёный и жёлтый цвета, которые я подобрал для часов работы, вы можете выбрать собственные цвета и заменить их значение (сразу после слова color).

Например, заменим зелёный цвет на чёрный:

color:#31A977;

Здесь заменим кода зелёного цвета #31A977 на код чёрного цвета #000000.

Чтобы подобрать собственный цвет, вы можете воспользоваться этим сервисом.

 

7. Корзина в шапке

В настройках корзины в шапке можно выключить корзину именно в шапке (в нижней панели она останется), можно также отключить быстрый просмотр корзины. 

По ссылкам в шапке написана отдельная подробная инструкция. 
Вы можете прочитать её по этой ссылке.

7 комментариев

  • Ксения
    24 ноября 2020 14:20

    Здравствуйте, а подскажите, пожалуйста, как в коде в блоке super.header_phones перед номером телефона вместить название города-филиала? например: г. Москва 8(999)999-99-99, г. Нижневартовск 8(999)999-99-99 и тп

    • Сергеев Владимир
      Разработчик
      25 ноября 2020 13:39

      Примерно так:

      {strip}
      
      <!-- ПЕРВЫЙ НОМЕР -->
      <a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
          +x (xxx) xxx-xx-xx
      </a><br>
      Москва
      
      <!-- ВТОРОЙ НОМЕР -->
      <a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
          +x (xxx) xxx-xx-xx
      </a>
      <br>
      Петербург
      
      <!-- ТРЕТИЙ НОМЕР -->
      <a href="tel:+xxxxxxxxxxx" class="header-phones uk-link-reset uk-h4 uk-text-bold">
          +x (xxx) xxx-xx-xx
      </a><br>
      Сочи
      
      {/strip}

      • Ксения
        25 ноября 2020 16:50

        Спасибо. Я проделала эти действия, но у меня шапочка так и осталась с одним телефоном, как и подразумевает тема по умолчанию. 

        П.С. все настройки пока в скрытом поселении. Это видимо из-за того, что новые блоки создаются для этой конкретной темы с префиксом super? И при переходе на эту тему - новые блоки будут работать?

         

        • Сергеев Владимир
          Разработчик
          26 ноября 2020 23:22

          Ксения, я думал у вас тема Super.
          Данный блок подходит только для темы Super.

          Для остальных тем нужно в файле index.preheader.html (темы для приложения Сайт) города указывать после строк:

          {if !empty($preheader_phone)}

          и 

          {if !empty($preheader_phone_2)}

        • Елена
          16 января 2021 14:35

          При нажатии на логотип со страниц товара выходит не главная страница, в ошибка. Как это можно исправить?

        • Сергеев Владимир
          Разработчик
          18 января 2021 17:42

          Здравствуйте, Елена! 

          Мне не удалось воспроизвести проблему на вашем сайте. 
          Я зашёл в первый попавшийся товар, нажал на логотип и вернулся на главную страницу. 

          Анализ кода так же говорит, что со ссылкой логотипа всё в порядке – она ведёт на главную.

          Возможно, проблема проявляется на какой-то определённой странице. Если это так, то пришлите мне ссылку для анализа. 

        • Ярослав
          28 октября 2022 21:04

          Здравствуйте! Подскажите, для темы handmade, как должен называться блок? Так не работает... super.header_phones тоже

          Добавить комментарий
          Чтобы добавить комментарий, зарегистрируйтесь или войдите
          Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
          Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
          Подписывайтесь и получайте скидки!

          Узнавайте первым о скидках и специальных предложениях!