Создаем онлайн-магазин в Readymag: виджеты и инструменты, которые вам понадобятся

Сегодня мы расскажем, как создать интернет-магазин при помощи Readymag. Речь пойдет как о встроенных функциях инструмента, доступных на планах Creator и Professional, так и об интеграциях сторонних сервисов.

Виджет E-commerce

Проще всего сделать онлайн-магазин с помощью виджета E-commerce: он позволяет человеку из любой страны совершать онлайн-платежи с помощью банковских карт. Виджет обрабатывает платежи через Stripe — этот платежный сервис доступен только магазинам, которые зарегистрированы на территории США, Западной Европы, Индии и Австралии (полный список стран можно найти здесь). 

Если вашей страны нет в списке, переходите к разделу «Интеграции сторонних сервисов», там мы рассказываем об альтернативных инструментах.

Шаг 1: Создаем аккаунт в Stripe и добавляем товары

Для работы виджета E-commerce необходим аккаунт в Stripe. Если у вас его нет, активируйте переключатель Connect to Stripe («Подключить к Stripe») в настройках виджета и перейдите в Stripe, чтобы создать аккаунт. Сервис платный, информация о типах аккаунтов и их стоимости указана здесь. Readymag не берет дополнительной платы за использование виджета.

Зарегистрировав аккаунт в Stripe, начните добавлять свои товары. Зайдите в аккаунт и выберите Orders → Products → Add new. Дайте название товару, загрузите фото, добавьте описание, укажите важные атрибуты (например, размер и цвет). Нажмите Save product («Сохранить продукт»). При создании атрибутов в Stripe мы рекомендуем выбирать точное значение свойства, а не общее название. К примеру, вы продаете футболку, которая доступна в двух цветах: голубом и красном. Не используйте слово «цвет» в качестве названия атрибута, а сразу укажите значения: «голубой» и «красный».

Шаг 2: Включаем SSL

Зайдите в настройки своего проекта на Readymag и подключите сертификат SSL — он обеспечивает приватность и безопасность персональных данных пользователей. Это обязательный шаг — виджет E-commerce не работает на сайтах без SSL. 

Шаг 3: Добавляем виджет E-commerce и подключаем Stripe

После этого войдите в режим редактирования проекта и добавьте E-commerce виджет через виджет-панель. Вы увидите, что виджет состоит из двух частей: поп-апа, предлагающего подключить аккаунт в Stripe, и кнопки Cart («Корзина»). Нажмите на поп-ап — вы будете перенаправлены в Stripe. Теперь ваш аккаунт подключен, можно продолжать создавать магазин. 

Шаг 4: Добавляем товары и цены

Нажмите + в настройках виджета, чтобы добавить новый продукт. После этого появится кнопка Add to cart («Добавить в корзину») и выпадающее меню, в котором вы можете выбрать любой из товаров, загруженных в Stripe. Чтобы добавить новый товар, выделите кнопку Cart («Корзина») в конструкторе, а затем еще раз нажмите + в настройках виджета. 

Чтобы добавить изображение к продукту, загрузите его при помощи виджетов Picture («Изображение») или Slideshow («Слайдшоу») и расположите над кнопкой Add to cart («Добавить в корзину»). Указать цену вы можете при помощи виджета Text («Текст»). Если у вашего товара есть атрибуты (например, размер и цвет), они отобразятся в виде выпадающего меню над кнопкой Add to cart («Добавить в корзину»). 

Попробуйте также использовать виджет Hotspot («Хотспот») — он позволяет акцентировать внимание на особенностях товара, добавляя поверх изображения небольшие заметки c фото и текстом. 

Интеграции сторонних сервисов: Shopify, Gumroad, Ecwid

Если Stripe по каким-то причинам не подходит, вы можете интегрировать в ваш проект любой из сторонних E-commerce сервисов при помощи виджета Embed & Code. Несмотря на то, что на тарифе Creator действуют ограничения для кастомного кода, это не касается платежных сервисов Shopify, Gumroad и Ecwid: их можно подключить на любом платном плане. Подробнее об этом читайте здесь. 

Наладьте коммуникацию с посетителями сайта

У Readymag есть виджет Form («Форма»), который позволяет владельцу сайта собирать адреса посетителей. Вы сможете создавать рассылки и рассказывать посетителям о новых товарах, скидках и и акциях. 

Кроме сбора имейлов, через виджет Form вы можете задавать пользователям вопросы и получать обратную связь от них. В ответ вы можете отвечать пользователям письменными сообщениями, либо перенаправлять их на другие веб-страницы.

Также вы можете интегрировать в свой проект сторонние формы: например, если у вас есть платный аккаунт в сервисе MailСhimp, вы можете добавить его форму на свой сайт — имейлы подписчиков будут сразу попадать в отдельный список. 

Запускайте рекламу в соцсетях и анализируйте конверсию

Разобравшись с торговой механикой вашего магазина, не забудьте настроить аналитические инструменты. Пользователи на планах Creator и Professional могут интегрировать пиксель Facebook, Instagram и Pinterest с помощью вставки кода — эти инструменты позволяют отслеживать поведение пользователей на сайте, анализировать их целевые действия и создавать аудитории, наиболее точно соответствующие целям ваших рекламных кампаний.

Google Analytics по умолчанию встроен в проекты на Readymag, поэтому для его активации достаточно указать ID трекинга в настройках проекта или профиля.

Дополнительные идеи: карты, комментарии, чат-бот

Если у вас есть склад или шоурум, помогите клиентам его найти, добавив на свой сайт карту через виджет Google Maps.

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

До того как принять решение о покупке, посетитель сайта, возможно, захочет задать несколько вопросов. Здесь на помощь могут прийти чат-боты, например, Intercom или Livechat. Оба интегрируются через вставку кода.

****

Прочитать оригинал этого материала на английском можно здесь.

Создать свой первый проект на Readymag бесплатно — здесь.