Навигация по сайту: как помочь покупателям найти нужное
Чем проще покупателям ориентироваться на сайте, тем легче им совершать покупки. Дружелюбный интерфейс оставляет приятное впечатление от магазина, а значит покупателям захочется вернуться. И наоборот — чем запутанней процесс покупки, тем сильнее это раздражает.
Эквид создан так, чтобы сделать процесс покупки максимально комфортным и логичным. При этом вы можете настроить магазин под свой бизнес и направлять внимание покупателей на то, что важно вам.
В этом гайде вы узнаете о ключевых элементах навигации и как оптимизировать их для продаж.
Расскажите о себе
Сориентируйте покупателей через меню категорий
Управляйте вниманием посетителей
Сделайте поле поиска заметным
Добавьте фильтры поиска
Помогите быстрее переключаться между товарами
Не дайте покупателям заблудиться
Упростите продолжение покупок
Рекомендуйте товары для увеличения продаж
Направляйте покупателей после заказа
Расскажите о себе в меню навигации
Когда люди впервые заходят в онлайн-магазин, они хотят не только быстро найти нужную вещь, но и узнать о вас побольше, посмотреть акции и отзывы других покупателей. Посетители ищут эту информацию, чтобы понять, могут они вам доверять или нет. А значит — готовы ли они купить у вас или нет.
Если вы добавите в шапку сайта ссылки на магазин, отзывы, историю бренда и контакты, покупатели быстро найдут то, что им нужно.
Вы также можете добавить в шапку кнопку входа в личный кабинет покупателя. В личном кабинете постоянные покупатели могут посмотреть избранные товары, историю заказов и счета, получить доступ к специальным скидкам.
Из Космоса добавили важные ссылки в шапку. Благодаря кнопке Избранное покупатели понимают, что могут сохранить понравившиеся товары и потом посмотреть их
Чтобы настроить верхнее меню сайта:
Стартовый сайт Эквида позволяет быстро создать сайт с помощью блоков. Каждый блок — это раздел. Например, отдельный блок для истории бренда, отдельный блок для отзывов покупателей, отдельный — для спецпредложений и акций и так далее. Вы можете добавить столько блоков, сколько нужно и дать ссылки на них в верхнем меню сайта.
Чтобы создать верхнее меню со ссылками на Стартовом сайте:
- В Панели управления Эквида откройте раздел Сайт и нажмите Редактировать сайт.
- В меню слева выберите Шапка → Навигационное меню и настройте ссылки, как вам нужно.
- Вы также можете отредактировать кнопку, которая отображается в верхнем меню. Для этого нажмите Шапка → Кнопка действия. Введите название кнопки и выберите, куда она будет направлять при нажатии.
- Когда закончите настройку, нажмите Сохранить и опубликовать.
Пока вы не нажали Сохранить и опубликовать, изменения отображаются в окне редактирования, но не сохраняются на сайте. Вы можете экспериментировать с дизайном сайта, не сохраняя изменения. Чтобы отменить сделанные изменения, нажмите Ваш сайт → Отменить изменения вверху.
Вы можете добавить Эквид-магазин на любой сайт. В зависимости от сайта, редактирование верхнего меню может отличаться. Если вы используете сайтбилдеры, то можете найти видео-инструкции на YouTube, чтобы лучше понять, как менять дизайн. Вот примеры того, как вы можете настроить верхнее меню на WordPress и Wix.
Wordpress
- В панели управления WordPress перейдите в раздел Внешний вид → Меню.
- Вы можете создать новое меню или отредактировать существующее. Если создаёте новое, то можете выбрать расположение. Например, горизонтальное меню. Вы также можете выбрать, на каких страницах или в каких категориях отображать меню.
- В блоке Рубрики вы можете добавить ссылки, которые появятся в шапке сайта.
- В блоке Структура меню вы можете поменять порядок ссылок в шапке, просто перетащив ссылку на нужное место.
- Когда закончите настройку, нажмите Сохранить меню.
Wix
- В панели управления Wix нажмите + Добавить в меню слева, затем выберите Меню.
- Вы увидите список шаблонов меню. Просто перетащите понравившееся меню в окно редактора. Названия ссылок в меню будут совпадать с названиями страниц на сайте.
- Чтобы отредактировать меню, нажмите на него, затем выберите Дизайн и настройте меню.
- Нажмите Опубликовать, чтобы сохранить изменения.
Помогите покупателям найти товары через меню категорий
После того, как покупатели прочитали немного о вас и стали вам доверять, они готовы смотреть каталог. Лучший способ помочь им сориентироваться — создать меню категорий.
Категории — это группы товаров, которые объединяют по принципу схожести и показывают на одной странице магазина. Больше всего категории любят магазины одежды: Женская одежда, Мужские свитера, Детская обувь — всё это категории.
В Эквиде вы также можете создавать подкатегории для каждой категории. Главные категории называются корневыми. Например, внутри корневой категории Детская одежда могут быть подкатегории Для мальчиков и Для девочек, а внутри подкатегории Для мальчиков — ещё две подкатегории Зима и Лето.
Один товар может принадлежать нескольким категориям. Например, футболка с коротким рукавом может входить в категорию Футболки и Распродажа. Чем больше категорий присвоено товару, тем выше шанс, что этот товар увидят покупатели.
С меню категорий покупателям гораздо проще найти нужный товар.
Chukcha использует меню категорий для своих коллекций. Так можно быстро перейти в нужный раздел
Чтобы создать меню категорий:
Когда вы создаёте категорию, она появляется на витрине магазина. Список категорий вы можете использовать как меню. Когда покупатель нажмёт на категорию, он увидит все подкатегории, которые туда входят.
Вы можете добавить изображения для категорий или спрятать их, показывая только названия категорий. Вы также можете раскрыть корневые категории и показывать товары из этих категорий прямо на главной странице магазина. Это отлично подходит для ресторанов, так как напоминает меню.
Настройка меню категорий будет отличаться в зависимости от того, какой сайт вы используете. Где-то нужно будет настраивать меню в панели сайтбилдера, а где-то достаточно будет вставить код.
WordPress
Если вы добавили Эквид-магазин на WordPress, то можете создать меню категорий на сайте.
Вы также можете добавить ссылки на конкретные категории в верхнее меню. Например, вы продаёте посуду и хотите дать ссылку на страницу с кружками. Для этого вам нужно создать новую страницу на сайте и назвать её в соответствии с категорией, которую вы хотите там отображать. Пусть это будет «Кофейные кружки». Затем добавьте категорию с кружками на страницу. После этого просто добавьте ссылку на страницу в шапку сайта.
Wix
Вы можете добавить ссылки на категории товаров в верхнее меню сайта на Wix.
Другие сайтбилдеры
Если ваш магазин на другом сайтбилдере или создан специально для вашего магазина с нуля, вы можете добавить меню категорий на сайт с помощью кода. Меню адаптируется к ширине страницы, поэтому оно будет хорошо смотреться и на компьютере, и на экране телефона. В десктопной версии меню будет горизонтальным, а на экране смартфона будет выглядеть как гамбургер-меню, раскрывающееся при нажатии.
Чтобы добавить меню категорий на свой сайт:
- В Панели управления Эквида перейдите в раздел Сайт.
- Прокрутите страницу до раздела Ваш магазин — на любом сайте и нажмите Выбрать платформу.
- Нажмите на карточку Собственный сайт, созданный с нуля.
- В разделе Дополнительные виджеты нажмите Добавить меню категорий, чтобы скопировать код в буфер обмена.
- Откройте редактор вашего сайта и перейдите на страницу с магазином.
- Вставьте код меню категорий в исходный код страницы. Добавление кода происходит по-разному в зависимости от того, на какой платформе сделан ваш сайт: вкладка HTML, отдельная кнопка для добавления кодов или страница с доступом к исходному коду сайта. Если вы не уверены, как добавлять коды на ваш сайт, обратитесь в службу поддержки вашего сайтбилдера, чтобы получить более детальную инструкцию.
- Сохраните и опубликуйте изменения.
🗂️ Полезные приложения
Multi-level Illustrated Menu создаёт меню категорий для сайта. Стоимость $6.49 в месяц, действует бесплатный пробный период на 7 дней.
Управляйте вниманием посетителей
Вы можете привлечь внимание покупателей, разместив баннер со ссылкой на странице магазина. Это может быть ссылка на акцию, на страницу категории с бестселлерами или товарами по скидке. Отображать можно не только текст, но и картинки, видео или всё вместе.
Покупатели сразу увидят баннер на витрине магазина:
Баннер с текстом и картинкой. Ссылка ведёт на категорию «Распродажа».
Баннеры – отличный способ рассказать о скидках, акциях и новых линейках товаров. Вы можете создать категорию «Новые поступления» и добавить баннер со ссылкой на эту категорию. Так покупатели всегда будут видеть, что нового появилось в магазине.
🗂️ Полезные приложения
Привлекать внимание можно не только баннерами. Вот пара приложений, которые помогут направить внимание покупателей в нужное русло:
- Promo Bar. Выбирайте баннеры, попапы, таймеры обратного отсчёта и другие решения, которые вы хотите показывать на своём сайте.
- 20+ Promotional Sales Tools. Редактируемые попапы для вашего магазина. Вы сможете настроить один из готовых шаблонов, написать собственный текст и выбрать, когда показывать попап покупателям.
Сделайте поле поиска заметным
В любом онлайн-магазине должно быть заметное поле поиска, чтобы покупатель мог быстро найти нужный товар. Это касается даже магазинов с небольшим ассортиментом, ведь иначе покупатель может просто не понять, как найти нужный товар, и уйти.
В Стартовом сайте Эквида иконка поиска отображается в верхнем меню по умолчанию:
Результаты поиска будут отсортированы по релевантности. Например, если вбить в поле поиска «сыр», сначала будут показаны продукты со словом «сыр» в названии. Затем будут показаны товары со словом «сыр» в описании.
Поисковый механизм в Эквиде одинаково хорошо работает с любым количеством товаров — будь их 10 или 2000.
Вы можете добавить виджет поиска на любой сайт. Показывать поиск можно на какой-то конкретной странице или на всех страницах магазина.
WordPress
Узнайте, как добавить поле поиска на ваш сайт на WordPress.
Wix
Узнайте, как добавить поле поиска в Эквид-магазин на Wix.
Другие сайты
Чтобы добавить поле поиска на другой сайт:
- В Панели управления Эквида откройте Сайт.
- Прокрутите страницу до секции «Магазин ещё на одном сайте» и нажмите Выбрать платформу → Другие платформы и конструкторы сайтов.
- Прокрутите страницу до секции «Дополнительные виджеты» и нажмите Добавить поиск по товарам. Код будет скопирован в буфер обмена.
- Добавьте код поиска в исходный код своего сайта. Добавление кода происходит по-разному в зависимости от того, на какой платформе сделан сайт: вкладка HTML, отдельная кнопка для добавления кодов или страница с доступом к исходному коду сайта. Если вы не уверены как добавлять коды на ваш сайт, обратитесь в службу поддержки сайтбилдера, чтобы получить детальную инструкцию.
- Сохраните и опубликуйте изменения.
🗂️ Полезные приложения
CloudSearch помогает покупателям быстрее найти искомое. Приложение показывает ссылки на подходящие категории и товары по мере того, как покупатель вводит слово в поиск. Стоимость $29.95 в месяц. Пробный период — 30 дней.
Добавьте фильтры поиска
Фильтры товаров — незаменимая вещь для больших магазинов. Представьте, если бы в Икее не было фильтров товаров. Поиск нужного матраса или подушки для стула занимал бы в разы больше времени, ведь ни задать диапазон цены, ни выбрать цвет или размер было бы нельзя. Впрочем, даже если у вас не сотни, а несколько десятков товаров, фильтр тоже будет полезен.
В Эквид-магазине фильтровать поиск можно по цене, категории, наличии товара, бренду, цвету, размеру и другим характеристикам. Как только вы добавите товарам новые параметры или атрибуты, они появятся в фильтрах. Покупатели скажут вам спасибо за фильтры, ведь с их помощью найти и купить нужный товар гораздо проще. Воспользоваться фильтрами покупатели могут как на странице категорий, так и на странице поиска.
Чтобы включить фильтры в вашем Эквид-магазине:
- В Панели управления Эквида перейдите в Настройки → Товарные фильтры.
- Нажмите Включить фильтры.
Готово! Осталось только выбрать, какие фильтры показывать в магазине. Вы можете самостоятельно добавить фильтры, нажав на кнопку + Добавить новый фильтр на странице фильтров.
Покупатели увидят фильтры, когда перейдут на страницу магазина или в категорию товара и нажмут на выпадающее меню Фильтры:
📖 Статьи по теме
Как повысить продажи с помощью фильтров
Помогите быстрее переключаться между товарами
На каждой странице товара в вашем магазине есть стрелочки, которые позволяют листать товары без необходимости возвращаться в каталог:
Вы можете включать и выключать стрелки навигации:
- В Панели управления перейдите в Дизайн.
- Пролистайте до блока Навигация.
- В разделе Стрелки «Предыдущий» и «Следующий» на странице товара выберите, показывать или скрыть стрелки.
Не дайте покупателям заблудиться
Если у вас много подкатегорий, то в какой-то момент покупатель может «заблудиться», уходя всё глубже в поиске определённого товара. Помочь ему вернуться могут хлебные крошки — строка, где отображается путь пользователя из категорий и подкатегорий. Каждое название в строке является ссылкой, так что покупатель в любой момент может вернуться и продолжить покупки.
Чтобы отображать хлебные крошки:
- Перейдите на страницу Дизайн.
- Пролистайте до раздела Навигация → Цепочка навигации.
- В выпадающем меню выберите Показывать в верхней панели или Показывать в информации о товаре.
Хлебные крошки будут отображаться и в Стартовом сайте и на вашем сайте.
Как сделать хлебные крошки заметнее
По умолчанию цепочка навигации серого цвета. Её можно сделать заметнее, изменив цвет и размер шрифта с помощью CSS-кода. Навыков программирования для этого не потребуется.
Чтобы изменить цвет и размер ссылок в цепочке навигации:
- Перейдите на страницу Дизайн.
- Пролистайте до раздела Создайте свою CSS тему и нажмите Создать тему.
- В открывшемся окне в разделе Свой CSS-код вставьте следующий код:
/* Make breadcrumbs more visible */ .ec-size .ec-store .product-details .ec-breadcrumbs { font-size: 22px; } .ec-size .ec-store .breadcrumbs__link.ec-link { color: #92974e;} .ec-size .ec-store .breadcrumbs__delimiter {color: #92974e;}
Font-size — это размер шрифта, в примере он равен 22. Вы можете задать любое значение.
Color — это цвет, он обозначается кодом. Вы можете выбрать любой другой цвет, воспользовавшись таблицей цветов для HTML и CSS. Обратите внимание, что в коде два параметра цвета — для ссылок и для разделительных черт в цепочке навигации. Для каждого из них можно выбрать свой цвет. - Нажмите Сохранить и опубликовать.
Если вы захотите вернуться к цвету по умолчанию, просто удалите код из раздела разделе Свой CSS-код.
Это инструкция для тех, кто пользуется новой версией Стартового сайта. Если вы продаете с Эквидом на другой площадке, узнайте, как можно добавить CSS-код в Панели управления →
Упростите продолжение покупок
Посетители вашего Эквид-магазина могут продолжить покупки, даже если они уже положили один товар в корзину или завершили заказ. Для этого в Эквиде есть несколько кнопок, при нажатии на которые покупатель переходит в магазин. Одна из кнопок называется «Вернитесь в каталог товаров» и появляется в корзине, куда покупатель переходит для оформления заказа:
Ещё одна кнопка «Смотреть товары» также появляется в корзине в том случае, если покупатель зашёл в пустую корзину. Кроме того, после оформления покупки показывается страница с деталями заказа и благодарностью. На этой странице есть кнопка «Продолжить покупки».
Поведение кнопки различается в зависимости от того, где она находится:
- Если покупатель открывает корзину с добавленным товаром и нажимает кнопку «Вернитесь в каталог товаров», он переходит на страницу категории, к которой относится товар в корзине.
- Если покупатель нажимает на кнопку «Смотреть товары» в пустой корзине, то попадает на страницу последней посещённой категории или на главную страницу магазина, если он не посетил ни одной страницы категории.
- При нажатии кнопки «Продолжить покупки» на странице благодарности за заказ, покупатель переходит на главную страницу вашего сайта.
Вы можете изменить поведение кнопки и отправить покупателей на другую страницу. Например, перенаправить их в категорию с вашими бестселлерами или на страницу с акциями.
Чтобы кнопка "Продолжить покупки" открывала определённую страницу:
- Установите бесплатное приложение Custom URL for ‘Continue Shopping’ Buttons.
- Из списка Переход выберите Своя ссылка.
- В появившееся поле справа введите адрес нужной страницы.
- Нажмите Сохранить настройки.
Теперь кнопки «Продолжить покупки», «Вернитесь в каталог товаров» и «Смотреть товары» будут перенаправлять на указанную вами страницу.
Чтобы вернуться к стандартному поведению кнопки, выберите опцию По умолчанию в настройках приложения.
Рекомендуйте товары для увеличения продаж
Шансы на импульсивную покупку повышает раздел с рекомендованными товарами, который вы можете добавить в вашем магазине. Он появится на странице товара под заголовком Возможно, вас заинтересует:
Dubihome показывает стулья и табуреты тем, кто заинтересовался подушкой для стульев
Рекомендуемые товары вы можете отображать на странице с деталями товара и в корзине. Тщательно подобрав похожие товары, вы дадите повод покупателям подумать, а не прикупить ли им сразу несколько дополняющих друг друга вещей?
Чтобы добавить рекомендуемые товары на страницу конкретного товара:
- На странице Каталог → Товары выберите товар, где хотите показывать рекомендуемые товары.
- Откройте вкладку Связанные товары.
- Нажмите + Привязать товары. Вы можете выбрать, какие товары показывать или включить опцию Показать случайные товары.
- Нажмите Добавить товары.
Если вы не знаете, какие товары лучше всего связать друг с другом, вот несколько советов:
- Уходовые продукты. Рекомендуйте освежители для обуви, если продаёте обувь, или ролики для чистки одежды, если продаёте пальто и другую верхнюю одежду.
- Другие товары из той же серии. Рекомендуйте комиксы из той же серии или книги того же жанра, но другого автора.
- Расходные материалы. Бумага и чернила станут отличной рекомендацией на странице принтера.
- Товары, которые хорошо сочетаются вместе. Предложите чайник, молочник или сахарницы тем, кто покупает чайный сервиз.
- Праздничные товары. В сезон праздников можно рекомендовать подарочную бумагу или соответствующие дате украшения вроде ёлочных шаров.
🗂️ Подходящие приложения из Магазина приложений Эквида:
Adaptive Sales: Boost your sales per each customer!
Направляйте покупателей после заказа
Обычно после оформления заказа покупатели видят страницу с деталями заказа и благодарностью за их выбор. Однако вы можете показывать покупателям другую страницу — это может быть ваша группа ВКонтакте, ссылка на отзывы других покупателей, страница с кодом купона на следующую покупку. А если ваш магазин принимает взносы, например, на посадку новых деревьев, то можете показывать покупателям страницу, где они смогут пожертвовать вам любую сумму.
Перенаправить покупателей на любую страницу можно с помощью приложения Custom Redirect for 'Thank You' Page. Работает оно так: после того, как покупатель оформил заказ, приложение перенаправит его со страницы вашего магазина на ту страницу, которую вы укажете.
Чтобы перенаправлять покупателей после заказа:
- В Магазине приложений Эквида найдите приложение Custom Redirect for 'Thank You' Page и нажмите Установить.
- Включите перенаправление и укажите ссылку, куда вы хотите отправлять покупателей после оформления заказа:
- Нажмите Сохранить настройки.
Теперь после оформления заказа покупатели смогут перейти на тот сайт, который вы указали в настройках.
Дело за вами
Теперь, когда вы лучше понимаете, как управлять вниманием покупателей, вы можете применить эти знания в вашем Эквид-магазине, чтобы покупателям было проще находить нужные товары и заказывать их у вас.