Обсудим ваш проект?
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

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

Дария,
CX/UX-аналитик
Поделиться
Просмотров:
1009
Время на прочтение:
Статья обновлена:
16 февраля 2021
Информация о статье
Просмотров: 1009
Время на прочтение:
Статья обновлена: 16.02.2021
Дария, CX/UX-аналитик
Поделиться
Во многих интернет-магазинах в городах их присутствия довольно сложная ценовая политика относительно условий доставки: много районов, много цен, запутаться проще простого. Лучшее UX-решение в этом случае — отображение цен на карте. В этой заметке мы расскажем, как быстро сделать удобную и наглядную карту зон доставки.
Директ Лайн
Кто мы
Крупнейшее агентство
интернет-маркетинга за МКАДом:
1200+ проектов
65 специалистов
14 лет на рынке
ТОП-10
лучших компаний интернет-продвижения России 2020
Коммерчекое предложение

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

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

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

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

    Режим «Многоугольники» в «Конструкторе карт Яндекса»

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

    Настройка многоугольника в «Конструкторе карт Яндекса»

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

    Сохранение настроек в Яндекс картах

  5. Кликаем «Получить код карты». Обычно генерируется код с тегом <iframe>. Если на карте нужно что-то исправить (добавить метку, изменить визуал и т.д.), берем код JavaScript и договариваемся с разработчиком о том, как именно нужно доработать карту.

    Получить готовый код Яндекс карты

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

Пример использования Яндекс карты

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

Комментарии
Написать
Увеличим ваши продажи через интернет!
Разрабатываем и поддерживаем сайты. Приводим на сайт целевой трафик с помощью SEO и рекламы. Увеличиваем конверсию сайтов. Имеем успешные кейсы увеличения продаж интернет-магазинов, медицинских центров, производителей, застройщиков, автоцентров, интернет-сервисов и пр. В команде 33 специалиста.

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»

19 место
В топ-100 perfomance-агентств России

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

1 место
Рейтинг агентств контекстной рекламы Новосибирска

Золотая сотня
Российского Digital

Сертифицированное агентство Яндекс 2020

Работающие инструменты SEO, интернет–рекламы, UX от
60 профессионалов
Директ Лайн — агентство интернет–маркетинга с 15-летним опытом, 1200+ клиентами и 50+ специалистами. Мы сами ведём свой блог. У вас мало времени, мы в вас это ценим, поэтому раз в месяц пришлём самые интересные и полезные публикации.
  • #SEO
  • #интернет-реклама
  • #email рассылки
  • #юзабилити сайта
  • #веб–разработка на bitrix
  • #кейсы
60 профессионалов
Раз в месяц
Без спама и СМС