Как работать с конструктором Sitebox? Показываем на примере интернет-магазина тортов на заказ

Пошаговая инструкция

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

Крупным компаниям с большим потоком заказов нужен мощный сайт, поэтому они обращаются к разработчикам. Для небольших проектов — личный блог, страница мероприятия или интернет-магазин с ограниченными категориями товаров — подойдет конструктор сайтов. Например, сервис Sitebox от платформы «Mail.ru для бизнеса». В нем есть раздел специально под запуск интернет-магазина. Можно создать каталог товаров, заполнить карточки, установить и корректировать цены, подключить оплату и статистику, а также разобраться с доставкой.

Все эти действия мы разберем на примере онлайн-магазина тортов на заказ https://best-cakes.ru.

Регистрация и выбор домена

Создаем аккаунт на платформе «Mail.ru для бизнеса». Можно указать произвольное имя домена. Потом его можно будет задать отдельно.

Кликаем на конструктор сайтов и нажимаем «Перейти в сервис».

Откроется каталог шаблонов. Слева можно выбрать тематику, которая подходит для вашего проекта. Чтобы рассмотреть шаблон поближе, наведите на него курсор и нажмите «Посмотреть». Выберете шаблон, который понравился больше всего. Его всегда можно заменить на другой или отредактировать, добавив нужные элементы.

Кликаем «Выбрать шаблон» и переходим в конструктор.

Прежде, чем начать собирать магазин, укажем домен (имя) нашего сайта. Нажимаем на логотип Sitebox в самом левом углу и попадаем в основное меню. Здесь находятся глобальные настройки и инструменты для продвижения и сбора статистики.

Открываем раздел «Домены».

Доменное имя лучше приобрести. Поисковые системы лояльнее относятся к сайтам с платным доменом. Пользователи легко смогут найти домен, в котором прописано название вашего интернет-магазина. К тому же бесплатный домен, который формируется автоматически при регистрации, вряд ли вызовет доверие у клиентов.

Кликаем «Прикрепить домен» и указываем купленный домен.

Создаем разделы и добавляем виджеты

Разбираем сайт Best-cakes.ru — онлайн-магазин тортов на заказ.

В верхней части есть ссылка на контакты магазина. Справа мелькает корзина, а ниже расположен каталог тортов.

Варианты тортов дизайнеры расположили в нижней части сайта. О том, как добавлять товары на сайт и создавать каталог, расскажем позже.

Начнем с первых шагов — выберем шаблон интернет-магазина. Он будет состоять из нескольких страниц — например, «Главная», «О нас», «Контакты» и т.д. Их список можно найти в левом меню — верхняя кнопка. Страницы можно добавлять и удалять, но для начала используйте текущий вариант.

Настроим главную страницу — кликните по ней, чтобы она стала выделена цветом.

Нажимаем на третью иконку в меню слева и попадаем в раздел «Дизайн». Здесь можно настроить цветовую палитру сайта. Посмотрите предложенные варианты или создайте свою схему. Для этого кликните по зеленой кнопке «Создать схему».

Появится новая линия во вкладке «Мои схемы». Наведите курсор и нажмите на иконку с карандашом, чтобы отредактировать палитру.

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

В этом разделе можно выбрать шрифты и загрузить изображение в качестве фона.

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

В шапку добавляем виджет «Контакты».

А в нижней части страницы расположим «Отзывы клиентов».

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

Добавление товаров

Чтобы конструктор понял, что мы делаем интернет-магазин, нужно активировать его модуль. Для этого пролистываем список виджетов почти до самого конца и находим подраздел «Интернет-магазин». Перетаскиваем виджет «Товар магазина» на страницу. Кликаем дважды по нему и заполняем настройки товара.

Чтобы добавить изображение, нажмите «Заменить» в верхней части виджета. Откроется галерея фотографий, куда можно загрузить свои изображения.

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

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

Переходим на страницу товара по синей кнопке в левом углу. Именно эту страницу увидит пользователь, когда захочет узнать подробности о товаре. Дополните информацию о нем, придумайте краткое описание. Слева появятся настройки текста.

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

Настройка и выбор доставки

Открываем настройки магазина (иконка с корзиной в левом верхнем углу) и переходим в раздел с доставкой. Мы прописали две стандартные опции — самовывоз и доставка курьером.

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

Создание промокода

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

Промокоды можно удалять и редактировать. Пропишите текст сообщения, которое увидит пользователь после добавления промокода. В настройках магазина кликните по кнопке «Форма заказа» и найдите подраздел «Промокоды». Зеленым указан текст, который появится в случае успешного ввода, красным — в случае ошибки.

Важно! Все изменения промокодов, способов доставки, товаров и других элементов интернет-магазина станут активны после того, как вы опубликуете ваш сайт. Сделать это можно в главном меню (логотип Sitebox в левой верхней части экрана).

Добавляем обработку онлайн-заявок Jivo

Для интернет-магазина важно создать онлайн-чат. Он поможет увеличить количество продаж. В Sitebox интегрирован сервис JivoSite, который мы и подключим.

Открываем конструктор (вторая иконка в меню слева) и пролистываем список виджетов до конца. Раскрываем подраздел «Контакты» и выбираем «JivoSite».

Перенести виджет можно только в левый или правый угол страницы. Кликаем по нему дважды и смотрим, как онлайн-чат будет выглядеть в вашем магазине. Для его настройки нужно создать или привязать аккаунт в JivoSite — там можно выбрать внешний вид чата и его функции.

Настройка интеграции с AmoCRM

Это удобный сервис, который ведет учет сделок и следит за продажами. Чтобы подключить его, выходим в главное меню (иконка с логотипом Sitebox) и кликаем по кнопке «AmoCRM». Открываем сайт AmoCRM и регистрируем аккаунт. После этого вводим в конструкторе свой логин.

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

Активируйте поля и для всплывающих окон. Добавьте несколько полей, чтобы собрать больше информации о клиентах. Три самых важных параметра:

  • e-mail;
  • телефон;
  • имя.

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

Проделайте те же действия в настройках магазина — раздел «Форма заказа». Добавьте поле для номера телефона и используйте звездочку, чтобы сделать его заполнение обязательным.

Теперь AmoCRM будет собирать базу контактов. Она пригодится вам для связи с клиентами, повторных продаж одному и тому же клиенту и для создания рассылки. В сервисе Sendbox от «Mail.ru для бизнеса» можно создавать акционные письма и отправлять их, например, клиентам, которые уже сделали покупку в вашем магазине.

Подключаем платежные системы

Варианты оплаты товаров можно также добавить в настройках магазина (иконка с корзиной). Открываем подраздел «Оплата».

Wallet One

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

Для работы с Wallet One потребуется регистрация в этом сервисе. Там мы получаем идентификатор магазина и ключ MD5 — эти данные нужны для того, чтобы привязать аккаунт к магазину и настроить платежи. В сервисе Wallet One нужно определиться со способами оплаты и валютой. В разделе «Ставка НДС» можно выбрать отправку чеков в налоговый орган.

PayPal

Еще один популярный сервис, но с комиссией в районе 4%+10 рублей, которую вы заплатите с каждой операции. Wallet Onе берет 1,7-2,3%. PayPal пользуются многие магазины, готовые платить такую комиссию.

Для его подключения нужно зарегистрироваться на сайте PayPal и заполнить эти поля.

Подключаем аналитику

Статистика переходов на сайт и на карточки товаров, количество и время посещений магазина, переходы по страницам — эта информация поможет в дальнейшем улучшить ваш продукт и повысить продажи. Сервисы аналитики бесплатные, в Sitebox можно подключить Google Analytics и Яндекс.Метрику.

Выходим в основное меню (логотип Sitebox в левом верхнем углу) и жмем на кнопку «Статистика».

Для подключения сервисов потребуется создать аккаунты в каждом из них. Жмем «Подключить», регистрируемся и настраиваем аккаунты.

Продвигаем в Google, Яндекс, Facebook и MyTarget

После публикации сайт не сразу попадает в поисковую выдачу. Google может добавить его через пару дней, а Яндексу потребуется больше времени для индексации (до месяца).

Чтобы в ваш интернет-магазин заходили новые пользователи, а позиции вашего сайта в поисковой выдаче были высокими, нужно заниматься его продвижением. В Sitebox для этого есть несколько инструментов. Например, добавление магазина в Яндекс.Вебмастер и Google Search Console. С помощью этих систем алгоритмы поисковиков быстрее смогут проиндексировать ваш сайт. Их можно подключить в главном меню, выбрав раздел «Продвижение».

Кликаем на него и смотрим, какие советы по продвижению дает Sitebox. В нашем случае выполнена только треть работ — нужно добавить описания и тексты, настроить картинки и метатеги.

Кликаем по кнопке «Добавить в поисковики» и поочередно подключаем интернет-магазин к сервисам Яндекса и Google (потребуется регистрация аккаунтов).

Если нажать на соседнюю кнопку «Добавить на карты», можно подключить Яндекс.Справочник. Он поможет клиентам чаще видеть интернет-магазин в выбранном вами регионе. Это нужно, чтобы с заказом торта к вам не обращались из Владивостока, когда вы предлагаете сладости только с доставкой по Москве.

Для продвижения понадобится прописать теги Title, Description и Keywords для всех страниц, товаров, изображений и текстов. Они помогут получить более высокое место в поисковой выдаче. Покажем на примере главной страницы. Открываем ее в меню «Страницы», наводим курсор мыши и нажимаем шестеренку для доступа к настройкам.

В первом поле (Title) прописываем название страницы, например, «Интернет-магазин тортов и сладостей на заказ с быстрой доставкой по Москве». В описании (Description) пишем, о чем эта страница — «Делаем торты и пирожные на заказ от 1500 рублей. В нашем интернет-магазине вы можете купить вкуснейшие сладости или заказать торт в подарок к любому празднику». В поле «Keywords» указываем ключевые слова. Они должны соответствовать вашей деятельности — по ним поисковики и будут определять, где и когда показывать ваш магазин. Например, пропишем «торты на заказ». Когда люди будут вбивать в Яндексе или Google запрос «торты на заказ», ваш сайт попадет в результаты поиска. Пользователи увидят его, перейдут по ссылке и непременно сделают покупку.

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

Также стоит подключить пиксель Facebook. Этот инструмент поможет оценить эффективность рекламы. Подключается в главном меню по кнопке «Пиксель Facebook» (нужно привязать аккаунт в соцсети).

Можно настроить продвижение в MyTarget, чтобы размещать рекламные объявления в соцсетях и партнерах сервиса. Регистрируемся на сайте MyTarget и создаем новую рекламную кампанию. Например, мы хотим запустить рекламу через баннеры в соцсетях. Сервис попросит определиться с целью — повысить количество заказов или узнаваемость магазина (выбираем первое). Далее укажем аудиторию — для нашего проекта подойдут женщины от 20 до 35 лет. Выберем геолокацию (Москва).

Определимся с моделью оплаты — например, за один клик по объявлению. Кстати, для пользователей Mail.ru для бизнеса действует спецпредложение на удвоение первого платежа в MyTarget. Осталось выбрать площадки, где будут показаны рекламные объявления. Остановимся на ВКонтакте и Одноклассниках и напишем наши объявления для баннеров. Они маленькие, поэтому и текста нужно немного — только основная информация, предложение и скидка. Отправляем рекламу на модерацию и ждем новых клиентов в магазине.

Вывод

Запустить свой онлайн-магазин реально и без обращения в веб-студии. В конструкторе удобно настраивать блоки, загружать товары, прописывать варианты доставки и настраивать оплату. Даже с SEO проблем возникнуть не должно. Следуйте нашим рекомендациям и советам Sitebox, чтобы ваш магазин отображался в поисковой выдаче и привлекал клиентов.

Мероприятия

Удаленная работа, как новая нормальность

01 декабря 2020
Релизы

Обзор ноябрьских обновлений продуктов Mail.ru для бизнеса

30 ноября 2020
Узнавайте о наших публикациях первыми
Все статьи для бизнеса