Перейти к основному содержимому

Активация продукта. Дизайн и меню

Удобный интерфейс и привлекательный дизайн шаблона интернет-магазина SalesArt на Drupal с модулем Drupal Commerce хорошо влияют на конверсию. Если сайт сложно воспринимается или навигация запутана, пользователи будут уходить к конкурентам. В этом разделе рассмотрим активацию, настройку темы оформления, смену цветовой схемы, базовую кастомизацию и управление меню.

1. Активация. Настройка темы​

Предпологается, что Вы уже купили лицензию на продукт SalesArt. Если Вы этого еще не сделали, то можете купить сейчас — купить готовый интернет-магазин

Чтобы изменить цветовое оформление, установите базовые настройки темы:

  1. Перейдите в Внешний вид → Установленные темы.
  2. Выберите Itechway SalesArt theme
  3. Введите лицензионный ключ, полученный при покупке.
  4. Настройте параметры (загрузите логотип, favicon, цветовую схему).

🔹 Возможности кастомизации:

  • добавление фирменного логотипа и слогана;
  • настройка цветовой гаммы;
  • выбор шрифтов (скоро);
  • настройка макета (расположение блоков). Allow theme debug нужен для разработчиков. Выводит TWIG переменные.

Настройка цветовой схемы, кастомизация темы.

Настройка цветовой схемы, кастомизация темы.

2. Управление блоками (Blocks)​

Шаблон интернет магазина на Drupal SalesArt уже имеет правильное, с точки зрения дизайна, расположение блоков. Drupal позволяет размещать блоки (виджеты) в разных регионах страницы. Для управления размещением в админ-меню нажмите Структура — Схема блоков. (/ru/admin/structure/block)

🔹 Типичные регионы:

  • шапка (header);
  • боковая панель (sidebar);
  • подвал (footer).

🔹 Типичные блоки для интернет-магазина:

  • поиск по сайту;
  • корзина;
  • меню категорий;
  • акции и баннеры;
  • подписка на рассылку.

3. Меню сайта​

Меню — главный элемент навигации интернет-магазина.

3.1. Типы меню в готовом интернет магазине SalesArt:​

  • Главное меню (Main navigation) — разделы: Блог, Оплата, Доставка, Бренды, О нас, Гарантия.
  • Категории (Categories). Каталог сайта, все категории товаров.

Для ускорения заполнения контента в этот тип меню можно автоматически скопировать ссылки из Таксономии (см раздел Таксономия). Для этого нужно нажать «Редактировать» на термин словаря и на открывшейся странице в настройках меню внизу страницы установить «Создать ссылку в меню» и выбрать в пункте «Родитель»: Categories. (см. скриншот)

Копирование ссылок меню из Таксономии.

Копирование ссылок меню из Таксономии.

  • Меню пользователя (User menu) — личный кабинет, заказы, выход.
  • Инфо в подвале (Footer info) — Блог, Бренды, О нас и тд.
  • Популярные категории в футере

3.2. Управление меню​

  1. Перейдите в Структура → Меню.
  2. Выберите нужное меню (например, «Главное меню»).
  3. Добавьте новый пункт (страница, категория или ссылка).
  4. Укажите порядок элементов с помощью drag&drop (перетаскивания мышкой по значку).

Меню можно настроить, добавив иконки к меню, подходящие по смыслу. Для этого при редактировании выберите подходящую. Если Вам не нужна такая функциональность — отключите модуль UI Icons for Menu.

Пример главного меню:

«Каталог», «Акции», «О компании», «Контакты»;

4. Рекомендации по дизайну и меню​

  • Используйте простую иерархию меню (не более 2–3 уровней вложенности).
  • Размещайте корзину и поиск всегда на видном месте.
  • В подвале добавляйте служебные ссылки: «Политика конфиденциальности», «Условия возврата».
  • Тестируйте юзабилити: удобный интерфейс = больше заказов.