Темы и шаблоны для дизайна вашего интернет-магазина

Большинство CMS и конструкторов интернет-магазинов предлагает пользователям типовые шаблоны дизайна интернет-магазина или темы. Из этой статьи вы узнаете, что такое тема, как ее выбрать и правильно настроить.

Что Вас ждёт впереди...

1. Что такое тема для интернет-магазина?
2. На что обратить внимание при выборе дизайн-шаблона для интернет-магазина?
3. Какой должна быть главная страница интернет-магазина?
4. Какой должна быть карточка товара интернет-магазина?
5. Как настроить шаблон магазина на платформе Recommerce?
6. Так каким же должен быть шаблон для интернет-магазина?

Что такое тема для интернет-магазина?

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

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

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

Юзабилити сайта — удобство для пользователей, степень простоты и эффективности использования ресурса.

Примеры тем можно увидеть на платформе Recommerce в разделе «Настройки внешнего вида – Шаблон».

Темы для магазинов Recommerce

Внешний вид темы можно оценить после установки.

Оцениваем внешний вид темы 

В следующих разделах пойдет речь о выборе и настройках темы.

На что обратить внимание при выборе дизайн-шаблона для интернет-магазина?

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

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

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

Шаблон для магазина семян и садового инвентаря

Второй момент, на который нужно обратить внимание, — ширина контейнера и полей. В Recommerce можно выбрать один из двух типов шаблонов: с широкими полями и стандартным контейнером или узкими полями и широким контейнером. В каталоге тем эти типы отмечены как Wide (широкий контейнер) и Simple (стандартный контейнер).

Третий важный момент — юзабилити элементов навигации. К ним относятся такие элементы:

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

Следующий критерий выбора — удобство страницы или карточки товаров. О ее характеристиках пойдет речь дальше.  

Какой должна быть главная страница интернет-магазина?

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

1. Удобное основное меню

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

Основное меню на главной магазина

2. Форма поиска

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

• Активные подсказки при вводе символов.
• Расположение в шапке сайта на видном месте.
• Удобство ввода с мобильных устройств.

Активная подсказка в форме поиска

3. Навигационное меню

Навигация по каталогу должна быть логичной, удобной и заметной. Большинству магазинов в качестве основного лучше использовать меню навигации по категориям товаров. Например, магазин семян может использовать такую навигационную цепочку: томаты – сортовые/гибридные – ранние/средние/поздние – сорта.

Обратите внимание на иллюстрацию. На ней видно, как пользователь легко находит подкатегорию «Компьютеры», а в ней подкатегорию «Моноблоки».

Удобное навигационное меню

Узкоспециализированным магазинам, которые продают один вид товара или несколько похожих товаров, имеет смысл делать навигацию по брендам. Например, интернет-магазин электронных книг может вынести в навигационное меню названия производителей: Amazon Kindle, AirBook, PocketBook и так далее.

Навигация по брендам на главной странице

4. Промо-блоки

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

Слайдер на главной странице магазина

Вот идеи для промоблоков:

• Товар дня.
• Вы просматривали такие товары.
• Акции, скидки, распродажи.
• Идеи подарков.
• Топ продаж.
• Рекомендации на основе ваших интересов.
• Новинки.

Также на главной странице должна отображаться ссылка на корзину и личный кабинет. В подвале нужны ссылки на служебные страницы: политику конфиденциальности, условия возврата товара и так далее.

Какой должна быть карточка товара интернет-магазина?

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

1. Название товара

Название должно быть полным и подробным, с указанием модели и основных характеристик продукта. Например, для электрического чайника можно указать такое название: «Электрический чайник Philips Viva Collection, 1,5 литра».

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

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

Подробный заголовок полезен для пользователей и поисковых роботов

2. Фотографии товара

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

Фото в карточке товаров на Amazon можно увеличивать

3. Информация о продукте

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

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

Полезная информация в карточке товара 

4. Промо-блоки

В карточке товаров имеет смысл разместить промо-блоки, которые стимулируют кросс- и апселлинг. Обычно эти блоки называются «С этим товаром покупают» и «Похожие товары». Эти блоки лучше расположить на втором экране, чтобы не отвлекать посетителя от основного конверсионного элемента: кнопки «Купить».

Блок «Похожие товары»

5. Отзывы

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

Блок с отзывами о товаре

6. Конверсионная кнопка

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

Заметные кнопки «Купить» на сайте магазина

7. Блок «Поделиться» и кнопка «Хочу»

Эти элементы выполняют одинаковую функцию. Люди добавляют товары в списки желаний или делятся ссылками в соцсетях, когда планируют приобрести товар. Кнопки шеринга можно добавить под описанием и фото товара. Можно воспользоваться сервисами AddThis или Shareholic.

Кнопки «Поделиться» и «Добавить в список желаний»

Промежуточный вывод: функциональность карточки товара должна обеспечивать покупателю такие возможности:

• Получить информацию о продукте.
• Оценить внешний вид товара по фото.
• Оформить заказ или перейти на страницу оформления.
• Посмотреть похожие и сопутствующие товары.
• Сохранить товар в списке желаний или в соцсетях.

Как настроить шаблон магазина на платформе Recommerce?

После регистрации магазина перейдите в раздел настроек «Шаблон». Выберите и установите подходящую тему.

В разделе «Настройки шаблона» выберите подходящие опции. Обратите внимание на следующие настройки:

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

Настраиваем отображение товаров

При необходимости внесите изменения в названия блоков в соответствующем разделе.

Меняем названия блоков

В разделах «Логотип» и «Иконка» загрузите соответствующие элементы. Обратите внимание, логотип должен быть в формате png и с прозрачным фоном. Фавикон должен иметь размер 512 на 512 пикселей. Этот элемент отображается на вкладке браузера.

Фавиконки на вкладках браузера

В разделе «Фоновое изображение» можно установить на сайт произвольный фон. Например, найдите подходящий градиент на площадке Gradienthunt. Сохраните фон в виде изображения png.

Сохраняем фоновое изображение

Загрузите фон на сайт и сохраните изменения.

Загружаем фон на сайт

После обновления страницы фоновое изображение отобразится в шаблоне.

Поменяли шаблон с помощью фонового изображения

В разделе «Цвет фона» можно настроить соответствующий параметр вручную. Разделы «Произвольный CSS» и «Произвольный JS» предназначены для квалифицированных пользователей. В них можно менять внешний вид и функциональность шаблона с помощью каскадных таблиц стилей и скриптов JavaScript. С помощью этих инструментов шаблоны можно менять до неузнаваемости. Это касается как внешнего вида, так и функциональности темы. Пример можно увидеть на иллюстрации.

С помощью пользовательских стилей и скриптов можно поменять внешний вид и функциональность шаблона

Так каким же должен быть шаблон для интернет-магазина?

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

• Удобное меню навигации.
• Промо-блоки.
• Конверсионные элементы.
• Качественные изображения.
• Наличие разделов с информацией о товарах.

В каталоге дизайн-шаблонов Recommerce можно выбрать визуально привлекательные темы, которые подходят к тематике вашего интернет-магазина. Если у вас остались вопросы по выбору и настройке шаблона, звоните специалистам Recommerce по телефону +380 (44) 499-69-93.

Понравилась статья? Поделитесь с друзьями!