Будем идти сверху вниз справа на лево.
Все настройки (за некоторым исключением) «лежат» в секции Настройки шапки.
1. Верхний баннер
По умолчанию верхний баннер включен. Если он вам не нужен, снимите галочку с опции «включить верхний баннер».
Режим закрытия
Здесь доступно три режима:
Не закрывать – если включен этот режим то у посетителей не будет возможности закрыть баннер, при каждом открытии сайта они будут его видеть. Используйте этот режим только в крайних случаях, т.к. он очень навязчивый и может вызывать негативную реакцию и пользователь покинет ваш сайт.
Закрывать, после перезагрузки снова показывать – этот режим почти ничем не отличается от предыдущего, разве что баннер можно закрыть. Но всё равно на следующей странице баннер выскочит снова. Также используйте его осторожно!
Закрывать, не показывать снова – самый оптимальных режим, он включен по умолчанию. Пользователь может закрыть баннер и больше его не увидит. За количество дней, в течение которых пользователь не будет видеть баннер, отвечает опция ниже – На сколько дней закрывать баннер.
Фоновый цвет и текст контента баннера
Если тёмный цвет текста плохо читается на выбранном фоне, то нужно отметить галочку Инвертировать цвет текста баннера – тогда цвет текста станет светлым. Если вам нужен тёмный цвет текста – снимите галочку с этой опции.
Контент баннера
Чтобы было удобнее редактировать контент баннера, потяните за правый нижний уголок поля и растяните поле пошире и повыше.
За кнопку в баннере отвечает код:
<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. Верхняя панель
По настройке верхней панели написана отдельная инструкция.
Ознакомьтесь с ней на этой странице.
3. Логотип
По причине того, что логотип используется не только в шапке, но и в подвале, его настройка была вынесена в отдельную секцию – Брендирование.
Текстовый логотип
Если у вас нет графического логотипа, вы можете использовать текстовый.
Просто замените слово Super на своё, в поле опции Текстовый логотип и выберите шрифт, который вам больше подходит.
Если вам не нравится что логотип повёрнут или вы хотите использовать другой угол, то измените значение угла в опции Повернуть логотип на градусов. Горизонтальное положение логотипа – это 0 градусов либо пустое поле.
Если вам нужно убрать тень логотипа, то удалите код из полей: CSS правила для логотипа.
Графический логотип
Если у вас есть графический логотип, то загрузите его в соответствующие поля.
Поскольку цвета шапки и подвала могут сильно различаться, то было добавлено поле для логотипа в подвале. Чтобы у вас была возможность загрузить логотип соответствующий цвету подвала.
Если логотип для подвала не загружен, то там будет выводится логотип из предыдущего поля.
Retina версия
Ретина версия – это версия изображения (в данном случае логотипа), которая будет показываться на устройствах с большой плотностью пикселей (например большинство современных смартфонов). Обычная версия на таких устройствах будет выглядеть размытой.
Ретина версия – это то же самое изображение, только в два раза больше.
Например у вас есть логотип размеры которого 200px в ширину и 150px в высоту.
Значит его Ретина версия должна иметь размеры 400px в ширину и 300px в высоту.
Слоган
Если вам не нужна тень текста у слогана, то удалите содержимое полей CSS правила для слогана
4. Поиск в шапке
Возвращаемся в 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. Корзина в шапке
В настройках корзины в шапке можно выключить корзину именно в шапке (в нижней панели она останется), можно также отключить быстрый просмотр корзины.
8. Ссылки в шапке
По ссылкам в шапке написана отдельная подробная инструкция.
Вы можете прочитать её по этой ссылке.
7 комментариев
Здравствуйте, а подскажите, пожалуйста, как в коде в блоке super.header_phones перед номером телефона вместить название города-филиала? например: г. Москва 8(999)999-99-99, г. Нижневартовск 8(999)999-99-99 и тп
Примерно так:
Спасибо. Я проделала эти действия, но у меня шапочка так и осталась с одним телефоном, как и подразумевает тема по умолчанию.
П.С. все настройки пока в скрытом поселении. Это видимо из-за того, что новые блоки создаются для этой конкретной темы с префиксом super? И при переходе на эту тему - новые блоки будут работать?
Ксения, я думал у вас тема Super.
Данный блок подходит только для темы Super.
Для остальных тем нужно в файле index.preheader.html (темы для приложения Сайт) города указывать после строк:
и
При нажатии на логотип со страниц товара выходит не главная страница, в ошибка. Как это можно исправить?
Здравствуйте, Елена!
Мне не удалось воспроизвести проблему на вашем сайте.
Я зашёл в первый попавшийся товар, нажал на логотип и вернулся на главную страницу.
Анализ кода так же говорит, что со ссылкой логотипа всё в порядке – она ведёт на главную.
Возможно, проблема проявляется на какой-то определённой странице. Если это так, то пришлите мне ссылку для анализа.
Здравствуйте! Подскажите, для темы handmade, как должен называться блок? Так не работает... super.header_phones тоже