Epika — контрастная обзорность

Аккуратное и гармоничное оформление для интернет-магазинов и информационных сайтов

7 апреля 2017, версия 1.1.0


Тема дизайна Epika выпущена совсем недавно, в марте 2017 года, и поддерживает пока только приложения «Сайт», Shop-Script и «Блог». Владельцам сайтов с приложениями «Фото», «Хаб» и «Поддержка» придется подождать, пока эти приложения будут добавлены в список поддерживаемых.

Вот так выглядит раздел настроек темы для Shop-Script:

Общее оформление

Цветовое оформление темы Epika построено на сочетании 2 цветов. По умолчанию выбраны цвета, близкие к красному и черному — их можно заменить на любые другие. Возможности загрузить фоновое изображение, у этой темы нет. Основная область страницы, на которой отображается остальное содержимое, всегда заполнена белым фоном, цвет которого в настройках не регулируется (но, конечно, может быть изменена с помощью CSS).

Тема дизайна предлагает собственную настройку для загрузки фавиконки, которая перекрывает иконку, выбранную в настройках приложения «Сайт». К этому факту можно относиться двояко: с одной стороны, это излишнее дублирование стандартной функции Вебасиста, а с другой — удобный доступ к популярной настройке для неопытных пользователей.

В настройках есть возможность загрузить два варианта логотипа компании: для главного меню и для подвала сайта.

Навигация по сайту

Навигация по основным разделам сайта выполнена в виде небольшого выпадающего меню.

Это меню дублируется с помощью ссылок в подвале.

Как и многие другие темы дизайна с поддержкой Shop-Script, Epika на всех страницах сайта показывает иконки корзины, сравнения и просмотра избранных товаров. При наведении курсора на иконку корзины в правом верхнем углу появляется всплывающая область, показывающая ее содержимое.

При прокручивании страницы вниз основные иконки магазина остаются видимыми, «плавая» у верхнего правого угла страницы.

Переход по категориям товаров на витрине интернет-магазина может быть реализован в виде общего для всех категорий выпадающего меню или в виде отдельных ссылок-меню для каждой из основных (корневых) категорий товаров.

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

Каталог товаров

В списках категорий и результатах поиска каждый товар представлен в хорошо очерченной области с неяркими границами — это делает дизайн магазина «воздушным», и в нем легко ориентироваться.

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

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

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

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

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

Если в категории настроена фильтрация товаров по характеристикам типа «checkbox» и «select», то значения-флажки характеристик по умолчанию отображаются в 2 столбца для экономии высоты фильтра. Если длинные значения характеристик не будут помещаться по ширине, то в настройках темы нужно переключить количество столбцов в фильтре с 2 на 1 — ширина одного оставшегося столбца станет больше.

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

Оформление заказа

На странице оформления заказа тема показывает содержимое корзины (чего нет в стандартной теме дизайна) и позволяет быстро перейти к редактированию списка товров в корзине.

Вот так выглядит финальная страница оформления заказа.

Дополнительные возможности

В теме Epika есть встроенный «живой» поиск товаров — по мере ввода названия товара подсказка показывает часть найденных товаров с изображениями и ценами и ссылку для просмотра полного списка.

В теме дизайна есть два переключателя валюты: верхний показывает флаги для некоторых валют рядом с их названиями:

  • армянский драм
  • белорусский рубль — только неденоминированный (BYR), для нового белорусского рубля (BYN) иконки флага нет
  • евро
  • казахский тенге
  • российский рубль
  • украинская гривна
  • доллар США

В левой боковой панели покупатель найдет список последних просмотренных им товаров — полезная функция, не требующая установки дополнительного плагина для этих целей.

Интересной показалась возможность показать карту с адресом магазина на онлайн-карте, глядя на настройку для ввода координат, однако посмотреть в действии эту возможность не удалось — возможно, из-за недостаточно подробной документации. Перед приобретением темы стоит уточнить особенности использования этой функции у разработчика.

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

В теме есть встроенная интеграция с «Фейсбуком», «Твиттером» и «Вконтакте» — в виде виджетов страницы, ленты и сообщества соответственно. Для их отображения на страницах сайта необходимо вставить код виджета в соответствующее поле в настройках темы.

Кроме того, в подвале сайта можно добавить ссылки на ваши страницы в «Фейсбуке», «Твиттере», «Вконтакте», «Инстаграме» и «Ютюбе». Достаточно указать адреса этих страниц в настройках темы, чтобы ссылки на них появились на сайте.

Итоги

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

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

Это очень неплохой вариант оформления для интернет-магазинов самой разной тематики: от смартфонов до книг и сантехники, т. к. позволяет выгодно представить почти любой товар.

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

* * *

«Epika» в магазине Webasyst: https://www.webasyst.ru/store/theme/epika/