Настройки шаблона

Настройка шаблонов

Настройка шаблонов — это раздел административного кабинета, в котором выбирается и редактируется визуальный стиль магазина.

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

Выбор шаблона

Каждая тема отображается отдельной карточкой. В карточке можно увидеть:

1. Название шаблона

   Название готовой темы оформления.

2. Доступные цвета для сайта

   Набор цветовых вариантов, которые можно использовать в выбранной теме.

3. Превью шаблона

   Изображение, которое показывает пример внешнего вида магазина.

4. Кнопка “Использовать”

   Позволяет применить выбранную тему к магазину.

---

Редактирование темы

После выбора шаблона его можно настроить под свой проект.

Страница редактирования темы содержит несколько вкладок:

1. Функционал
2. Изображения
3. Ссылки
4. Кастомизация

---

Функционал

Вкладка Функционал отвечает за общее поведение витрины магазина.

Основные настройки

1. Скрыть блок серверов

   Отключает отображение списка серверов в выбранной теме.

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

2. Скрыть общий онлайн

   Скрывает суммарный онлайн серверов.

   Если настройка включена, пользователи не будут видеть общий онлайн проекта на сайте.

3. Анимация карточек

   Позволяет выбрать анимацию появления карточек товара.

   Настройка влияет только на визуальное отображение карточек на витрине.

4. Количество колонок товаров

   Определяет, сколько карточек товара будет отображаться в одном ряду на витрине.

   Например, если указать 3, товары будут отображаться по две карточки в строке.

5. Шрифт сайта

   Позволяет выбрать основной шрифт витрины магазина.

6. Сообщение на главной странице

   Текстовое сообщение, которое будет отображаться над блоком с категориями или в другом месте главной страницы, если это поддерживается выбранным шаблоном.

---

Изображения

Вкладка Изображения используется для загрузки графических элементов темы: иконки, логотипа, баннеров и фонового изображения.

Основные изображения

1. Иконка магазина

   Иконка сайта, которая может отображаться во вкладке браузера и других элементах интерфейса.

   Рекомендуемые размеры:

   • 32x32
   • 48x48
   • 64x64

2. Логотип магазина

   Изображение, которое отображается в шапке магазина и других местах шаблона.

   Размеры логотипа зависят от выбранного шаблона.

3. Прямоугольный баннер

   Баннеры, которые отображаются на главной странице магазина.

   Количество баннеров можно выбрать в настройках. После выбора количества появятся отдельные ячейки для загрузки изображений.

4. Фоновое изображение

   Фон магазина, который может отображаться на каждой странице сайта.

---

Ссылки

Вкладка Ссылки используется для настройки активного баннера и социальных ссылок магазина.

Активный баннер

1. Использовать активный баннер

   Включает отображение активного баннера для выбранной темы.

   Активный баннер можно использовать для акций, важных объявлений, сезонных предложений или продвижения отдельных товаров.

Социальные ссылки

В этом блоке можно указать ссылки на официальные ресурсы проекта.

Доступные поля:

1. VK

   Ссылка на группу или страницу ВКонтакте.

2. Discord

   Ссылка на Discord-сервер проекта.

3. Telegram

   Ссылка на Telegram-канал или чат.

4. Twitch

   Ссылка на Twitch-канал.

5. YouTube

   Ссылка на YouTube-канал.

6. Steam

   Ссылка на Steam-группу, профиль или другую страницу проекта в Steam.

---

Кастомизация

Вкладка Кастомизация отвечает за цветовую гамму и дополнительные визуальные эффекты магазина.

Цветовая гамма магазина

В блоке Цветовая гамма магазина выбирается основной цвет темы.

Этот цвет используется для:

• кнопок;
• иконок;
• активных элементов;
• выделений;
• некоторых декоративных элементов шаблона.

Выберите цвет, который лучше всего подходит под стиль вашего проекта.

---

Дождь

Блок Дождь включает визуальный эффект дождя на страницах магазина.

1. Эффект дождя

   Включает или отключает анимацию дождя на витрине.

Эффект можно использовать для атмосферного оформления магазина, если он подходит под стиль проекта.

---

Осень

Блок Осень включает сезонное оформление витрины.

1. Осенний эффект

   Включает осеннее оформление на страницах магазина.

Этот эффект можно использовать во время сезонных событий или временного оформления проекта.

---

Новогодние настройки

Блок Новогодние настройки используется для праздничного оформления магазина на Новый год.

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

---

Custom CSS/JS

Блок Custom CSS/JS позволяет добавить дополнительный код, который будет применяться на витрине магазина.

С помощью этих полей можно точечно изменить внешний вид сайта, добавить дополнительные стили или расширить поведение витрины, если стандартных настроек шаблона недостаточно.

CSS

Поле CSS используется для добавления пользовательских стилей.

Через CSS можно изменить внешний вид элементов магазина:

• цвета блоков;
• отступы;
• размеры элементов;
• фон сайта;
• внешний вид карточек товаров;
• стили кнопок;
• адаптацию отдельных элементов под дизайн проекта.

Пример:

body {
    background: #10141B;
}

---

JS

Поле JS используется для добавления пользовательского JavaScript-кода.

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

Пример:

console.log('Hello world');

---

Рекомендации по использованию

1. Сначала настройте шаблон стандартными средствами.
2. Используйте CSS только для точечных визуальных изменений.
3. Используйте JS только для задач, которые нельзя решить настройками шаблона.
4. После добавления кода проверьте главную страницу, карточку товара, корзину и личный кабинет пользователя.
5. Проверяйте отображение сайта на разных устройствах.

Как выбрать и настроить шаблон

1. Откройте раздел Настройка шаблонов.
2. Выберите подходящую тему.
3. Нажмите Использовать.
4. Откройте редактирование выбранной темы.
5. Настройте вкладку Функционал.
6. Загрузите изображения во вкладке Изображения.
7. Укажите социальные ссылки во вкладке Ссылки.
8. Выберите цвет и визуальные эффекты во вкладке Кастомизация.
9. Сохраните изменения.
10. Проверьте отображение магазина на сайте.

---

Рекомендации

Перед публикацией магазина рекомендуется проверить:

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