О чём прежде всего думаешь, когда выбираешь тему дизайна для витрины своего интернет-магазина? Конечно, чтобы она нравилась вам — владельцу магазина!
Если вы выберете дизайн только по рекомендации специалиста и потом будете каждый день смотреть на свою витрину и страдать от того, что видите, то далеко так развитие вашего бизнеса не пойдёт. Выбирайте дизайн по душе!
Нравятся вам пёстрое многоцветье и завитки с цветочками — значит, это ваше. И покупатели у вас соберутся с таким же внутренним настроем, так что вы будете лучше чувствовать их потребности и желания. Либо ваш стиль — строгий минимализм. Почему нет! Сколько людей, столько и вкусов. Да и не к каждому товару подойдёт любой дизайн — тоже подбирать надо.
Сегодня мы познакомимися со строгой, но при этом лёгкой и благодаря этой лёгкости очень удобной темой дизайна — Ahead.
Особенности темы дизайна
Первое, что увидит посетитель магазина — это яркое главное меню на светлом фоне в верхней части страницы.
Это меню, кажется, задаёт основное поведение посетителя на сайте. Обычный текстовый поиск тут не на первом месте — чтобы поискать товары привычным способом, надо отыскать глазами иконку-лупу и ещё нажать на неё, чтобы появилось поле поиска.
Зато главное меню можно формировать по-разному: в каждом пункте можно «поселить» несколько простых подпунктов
или несколько подпунктов с изображениями,
или даже целый всплывающий блок с большим изображением и несколькими ссылками.
Всё это можно релизовать с помощью документации разработчика и настроек темы дизайна.
Конструктор настроек
Кстати, о настройках — в теме Ahead они выполнены в виде удобного конструктора, которым можно пользоваться прямо на витрине! Если вы авторизованы в панели управления магазина, то увидите на витрине кнопку для перехода к управлению дизайном.
Нажмите на неё, и вы попадёте в приятно оформленный раздел управления внешним видом и наполнением своего сайта.
В дополнение к стандартному интерфейсу настроек, который привыкли видеть в панели управления Webasyst, разработчик темы Ahead постарался подарить нам особенные ощущения при управлении дизайном. Названия и подсказки всех настроек те же самые, но насколько приятнее они стали в использовании!
А если установить бесплатное приложение «Настройки шаблонов» этого же разработчика, то в конструкторе настроек появится и функция предварительного просмотра — с её помощью можно сначала посмотреть, как будет выглядеть сайт с новыми настройками, и только потом их окончательно применить, если вам всё нравится.
Какие настройки есть в конструкторе
Конечно, в теме дизайна Ahead много стандартных настроек вроде
- цветовая гамма
- шрифты
- стиль кнопок
- график работы магазина
- логотип
- и т. п.
Но есть и свои особенности, которые имеются не во всех темах и которые вы можете посчитать полезными для себя.
Готовые наборы настроек дизайна
Разработчик темы дизайна подготовил готовые наборы настроек — для разных тематик интернет-магазинов: универсальный магазин, большой гипермаркет, украшения и аксессуары, одежда и мода. У темы Ahead довольно много параметров регулировки внешнего вида сайта, и теперь для многих пользователей задача выбора подходящего дизайна заметно упростится: можно просто загрузить в редакторе дизайна подходящий архив настроек и потом при необходимости отредактировать несколько индивидуальных мелочей.
Скачайте несколько примеров:
Больше вариантов настроек доступно на сайте разработчика.
Поддержка приложений Webasyst
Ahead — это не просто тема дизайна, а целое семейство тем. Она подходит не только для витрины интернет-магазина, но и для других видов сайтов, которые можно создавать с помощью приложений Webasyst:
- Сайт
- Блог
- Фото
- Хаб
- Рассылки
- Поддержка
Полноценный дизайн, конечно, предусмотрен в основном для страниц всех остальных приложений, кроме «Рассылок», а для «Рассылок» поддерживается только соответствующий раздел личного кабинета — страница с выбором тематических подписок.
Встроенная поддержка приложений и плагинов
Если вы установили или собираетесь установить какие-то из этих приложений и плагинов, то их не придётся вручную встраивать в тему дизайна Ahead:
- Приложение «Форма обратной связи»
- Приложение «Отзывы»
- Плагин «SEO оптимизация»
- Плагин «SEO фильтры»
- Плагин «Бренды PRO»
- Плагин «Информация о доставке и оплате»
- Плагин «Купить в 1 клик»
- Плагин «Автоопределение и выбор города»
- Плагин «Изображения для категории»
- Плагин «Изображения для блога»
Выпадающие хлебные крошки в категориях интернет-магазина
Когда посетитель находится на странице товара или категории, вверху видны ссылки хлебных крошек. Вроде бы ничего необычного — зачем о них рассказывать? Но в теме дизайна Ahead у хлебных крошек есть полезная особенность — они работают как выпадающие меню. При наведении на ссылку с названием категории появляется список соседних категорий на этом же уровне каталога товаров — очень удобно переходить по смежным категориям.
Список всех категорий товаров на одной странице
Вот как это выглядит:
В настройках темы Ahead есть инструкция для настройки такой страницы. Чтобы открыть её, посетителю нужно нажать на кнопку «Каталог товаров», которая обычно раскрывает меню выбора категорий при наведении на неё курсора мыши.
Получается, что у кнопки «Каталог товаров» будет 2 функции:
- при наведении курсора раскрывается меню каталога товаров;
- при нажатии на неё открывается отдельная страница со списком всех категорий товаров.
Всплывающее окно предпросмотра товара
Эта возможность есть во многих темах, но не лишним будет упомянуть о том, что она есть и в Ahead. Всплывающее окно поможет посетителю посмотреть более подробную информацию о товаре, находясь на странице категории или в результатах поиска и не переходя при этом на страницу товара.
Дополнительные изображения в списках товаров
Если у товара есть несколько изображений, то посетитель сможет посмотреть их все, не открывая страницу товара и даже окно предварительного просмотра товара.
Дополнительные вкладки на странице товара
По умолчанию тема дизайна показывает на странице товара 3 основных вкладки: «Описание», «Характеристики» и «Отзывы». В настройках можно добавить ещё сколько угодно вкладок — одинаковых для всех товаров — например, со описанием условий оплаты, доставки, гарантии и возврата.
Из 3 основных вкладок можно выбрать ту, которая будет открыта автоматически, когда посетитель открывает страницу товара.
Всплывающая корзина
Когда покупатель добавил в корзину один или несколько товаров, то на любой странице витрины можно навести курсор на иконку корзины и увидеть всплывающее окно, в котором есть возможность:
- посмотреть названия, изображения и цены всех товаров в корзине;
- посмотреть стоимость всех товаров в корзине;
- удалить любой товар из корзины;
- удалить сразу все товары из корзины;
- перейти к оформлению заказа.
Настраиваемая боковая панель
То, что на английский манер иногда также называют «сайдбаром». Эта часть страниц витрины в теме дизайна Ahead формируется из отдельных блоков-виджетов, которые можно менять местами. На разных видах страниц можно выбирать свой набор этих виджетов. Например, на страницах категорий будет показан один набор виджетов, на страницах товаров — другой, на информационных страницах — третий, на страницах каждого из приложений — «Сайт», Блог», «Фото», «Хаб», «Поддержка» — какой-то свой.
Порядок расположения виджетов для каждого раздела сайта можно регулировать индивидуально — простым перетаскиванием в настройках.
Какие виджеты можно показывать в боковой панели:
- ссылки на информационные страницы
- ссылки на категории товаров
- баннер
- форма подписки на рассылки, если установлено приложение «Рассылки»
- ссылки на последние записи блога (можно выбрать блог, из которого показывать записи, и количество записей)
- кнопки действий: заказ звонка (если используется приложение «Форма обратной связи»), отправка сообщения на электронную почту, собственная кнопка с любым HTML/Smarty/JavaScript-кодом
- последние добавленные изображения из приложения «Фото»
- виджеты соцсетей: «Фейсбука», «Твиттера», «Вконтакте»
Кроме этих стандартных виджетов, на страницах каждого приложения можно также показывать дополнительные виджеты:
- Блог
- список блогов
- хронология записей
- содержимое, добавленное плагинами
- ссылка на RSS-ленту
- Фото
- список альбомов
- Хаб
- информация об авторизованном посетителе
- список последних комментариев
- список сотрудников компании
- Поддержка
- кнопка для перехода на страницу с формой отправки запроса в службу поддержки
- список категорий справочных статей
Два варианта оформления всплывающей формы авторизации
Вертикальная и горизонтальная:
Изображение в форме авторизации можно заменить на любое своё.
Всплывающая подсказка при уходе посетителя с сайта
Когда посетитель покидает интернет-магазин, то обычно с помощью плагинов можно настроить появление всплывающего окна, которое призывает его вернуться и, например, воспользоваться специальным предложением.
С темой Ahead не придётся покупать или даже устанавливать для этого бесплатный плагин — всплывающее окно можно просто включить в настройках, написать для него нужный текст и указать ссылку на страницу со специальным предложением.
Впечатления
Самое яркое впечатление от темы Ahead — это конструктор настроек, который работает прямо на витрине. Как минимум, это эстетически приятно, а вообще просто практически удобно: не нужно переключаться между двумя вкладками — с витриной и панелью управления, а достаточно оставаться на одной вкладке и управлять настройками дизайна.
Ещё одно сильное впечатление — это настраиваемая боковая панель с отдельными виджетами. Если в других темах там обычно показывается какой-то фиксированный набор информации, то тут вы сами управляете не только набором отображаемых данных, но даже его порядком расположения элементов.
Стилистика оформления темы Ahead тоже на высоте: все элементы выполнены единообразно — так, чтобы создавался один общий стиль. Который не теряется и при смене стандартных настроек: выборе цветовой гаммы, шрифтов и видов кнопок.
Тема дизайна Ahead — из тех программных продуктов, которые хочется рекомендовать, даже если в них есть небольшие недочёты, — настолько качествено и красиво он выполнен. Перед покупкой посмотрите сайт разработчика с демонстрацией этой темы, там можно поиграться со всеми настройками и посмотреть, как будет выглядеть ваш собственный сайт с таким оформлением. Функционально, удобно, красиво!
