Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

Автор: Дария Осадчая, CX/UX-аналитик диджитал-агентства DirectLine

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

Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

Удобный инструментарий для зонирования карт с возможностью добавления комментариев к каждой зоне предлагает сервис Яндекс.Карты. Обратите внимание: к созданию карты не нужно привлекать программиста. Его помощь может потребоваться лишь на последнем этапе — чтобы вставить код на страницу сайта или конструктора сайтов, что займет не более 10 минут.

<i>Пример зонированной карты, которую можно сделать с помощью Яндекс.Карт. Подсказка появляется по клику на определенную зону</i>
Пример зонированной карты, которую можно сделать с помощью Яндекс.Карт. Подсказка появляется по клику на определенную зону

Итак, чтобы создать карту, нужно сделать следующее:

1. Заходим в «Конструктор карт Яндекса», авторизуемся и кликаем «Создать новую карту».

2. Нажимаем «Многоугольники» и точками обозначаем края области. Да, вам придется отрисовать все области вручную. Несмотря на то, что в основной версии Яндекс.Карты показывают края области, в «Конструкторе» при поиске района границы области не отображаются. Это значит, что вам придется вручную отрисовать все области. Для этого откройте на одном мониторе Яндекс.Карты, на другом — «Конструктор» и перерисуйте границы.

Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

3. Настраиваем полученный многоугольник. Можно поменять цвет заливки и границы, прозрачность заливки и границы, толщину границы, а также вставить комментарий. Нажимаем «Готово».

Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

4. Разметив все зоны, нажимаем «Сохранить и продолжить». Задаем размер и выбираем видимую область — тот фрагмент карты, который будет отображаться на странице сайта по умолчанию. Карту можно отредактировать в любой момент, даже после установки кода на сайт. При этом сам код менять не нужно; изменения будут отображаться сразу же после сохранения.

Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

5. Кликаем «Получить код карты». Обычно генерируется код с тегом

<iframe>

Если на карте нужно что-то исправить (добавить метку, изменить визуал и т.д.), берем код JavaScript и договариваемся с разработчиком о том, как именно нужно доработать карту.

Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

Все! Карта на сайте, аудитория счастлива, уровень UX — максимальный при минимальных затратах.

Инструкция: как создать карту зон доставки для интернет-магазина за 5 шагов

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

1010
3 комментария

А теперь работаем над CX и делаем зоны понятными, а не запутанными :)

Ответить

Спасибо за информацию, а я вот недавно нашла качественную доставку, с которой можно сотрудничать, доставку нашла тут https://dostavista.ru/ , компания надежная и при этом доставка по городу быстрая и при этом цена приятная

Ответить

Очень полезная статья! 🌐📈 Создание карты зон доставки — ключевой шаг для оптимизации работы интернет-магазина. Эффективная логистика – залог довольных клиентов и успешного бизнеса. 🚚💼

Мы, как специалисты по разработке доставки в Тильда (https://drik.by/delivery-calculation), полностью разделяем важность правильной организации зон доставки. Наши проекты также внедряют инновационные решения для оптимизации логистики и улучшения процесса доставки. 🌟🛍️

Ответить