Как сделать магазин на битриксе
Пример создания с нуля бесплатного интернет-магазина на конструкторе Битрикс24
В обновлении «Сидней» Битрикс выпустил новый продукт в составе Битрикс24: магазины. Теперь в любом портале можно создать не только лендинг или многостраничный сайт, но даже интернет-магазин. С корзиной, службами доставки и оплаты, и связью с CRM в портале. Функция доступна, начиная с бесплатной облачной версии.
Насколько дешевле и быстрее такая задача решается теперь? Результат будет лучше или хуже?
Процесс создания магазина мы покажем по шагам ниже, а начнем с выводов и оценки.
Для каких задач подойдут Битрикс24.Магазины
Как в нашем эксперименте, для продажи ограниченного, очень небольшого количества товаров.
При отсутствии финансовой возможности использовать что-то другое, платное, но наличии большого количества времени.
Работает ли?
При небольшом количестве товаров, постоянном составе ассортимента — работает.
При больших подвижках ассортимента, появлении новых рубрик каталога — тоже работает, но потребует очень много постоянного ручного труда.
Плюсы и минусы
Процесс создания магазина на Битрикс24
Итак, сам процесс настройки магазина с нуля.
Проектирование магазина
Мы решили, что у нас будет 4 товара: стулья из ценных пород древесины. Захотели повторить «обычный» магазин: главная страница, рубрика каталога, детальная страница каждого товара, корзина, оформление заказа. По возможности — настоящие оплаты и доставки. Статусы заказов. Информирование покупателя о смене статусов заказа.
Создание портала, url-адрес
У облачных версий Битрикс24 можно управлять url-адресом портала. При создании генерируется человеко не понятный домен третьего уровня, один раз его можно сменить.
Мы сделали «free-shop.bitrix24.ru» для портала. У портала он сменился корректно. Магазину присвоился адрес «b24-pllgic.bitrix24.shop», его тоже можно сменить, и привязать свой домен.
Создание сайта
Выполняется за несколько кликов в соответствующем разделе портала. Можно выбрать один из трёх (существующих на данный момент) шаблонов либо начать с полностью чистого листа. Мы использовали шаблон-заготовку
Настройки и управление блоками в основном осуществляются «с лица» сайта. «Административной панелью» в данном случае выступает портал.
Дизайн главной страницы
После создания сайта надо настроить внешний вид, наполнить контентом страницы. Вставить своё изображение в слайдер, написать название, переписать тексты и т.д. С этим всё просто и почти всё можно отредактировать.
Для изображений есть модные фильтры а-ля «Инстаграм»
Наполнение каталога товарами
Окей, главная страница готова, тексты размещены. Нужно наполнять каталог. Мы решили это делать редактированием демонстрационного, поставляемого вместе с порталом. Удаляем лишнее, редактируем нужное.
Каталог общий для всех магазинов, сколько бы их не было создано, он же используется и в CRM. Наверное, иначе сделать было бы проблематично, но единый каталог означает и одинаковый набор свойств и типов свойств у товаров. Минус.
При создании второго (и третьего, и пятого) магазина в том же портале, без объявления войны заново копируется демонстрационный каталог. Если какие-то товары были созданы редактированием демонстрационных, они «сбросятся» до первоначального состояния: изменения сотрутся.
Необходимо создавать раздел каталога рядом с демонстрационным и наполнять его, а не редактировать демонстрационный, как сделали мы. Достаточно серьезный минус. Можно потерять важный контент.
Использовать демонстрационные свойства, отредактировав их типы и названия, тоже нельзя. Они тоже «сбрасываются» при создании нового магазина. Минус уже критический.
Плюс. Торговые предложения, SKU, — поддерживаются. Управление свойствами и редактирование товаров аналогично версии «Управление сайтом».
В используемом шаблоне на главной странице выводится один товар и его торговые предложения. Переключение между SKU осуществляется кликом по отображаемому свойству «размер». Свойство мы переименовали без проблем, а вот при смене типа со списка на число, оно перестало отображаться. И нигде мы не нашли настройки или используемого шаблона, или настройки для создания с нуля. Искали 20 минут, не нашли.
Пришлось вернуть обратно список.
Четыре товара создали, свойства заполнили, цены выставили. Один товар с предложениями, оставшиеся — простые. Главная страница полностью готова.
Создание и настройка каталога товаров
Каждая страница создаётся аналогично первой, главной. Можно или выбрать шаблон всей страницы и отредактировать, или собрать «с нуля».
Выбрали собирать «с нуля».
Есть готовый блок «рубрика товаров».
Рубрика отображается нормально
Использованный блок для шапки не позволяет удалить кнопку-ссылку. Можно удалить надпись внутри кнопки, но не саму кнопку.
Как и в случае с SKU на главной это странно и раздражает. Конечно, можно собрать блок вообще на html, конструктор это позволяет, но тогда зачем сам конструктор?
Настройка детальной страницы товара
В готовом шаблоне «одежда» у товаров есть детальные страницы, и при добавлении элемента в инфоблок, новая детальная создаётся. В нашем тесте этого добиться не удалось, ссылка на детальную некорректна и совершенно неясно, где и как она управляется. Блок визуально выглядит так же, как в готовом шаблоне, но работает иначе.
Детальные сделали руками. Совершенно аналогично рубрике — берём блок «товар каталога», добавляем шапку и подвал, работает.
Создание навигации
Ссылка с главной страницы в каталог указывается на главной странице. Ссылки из рубрики на детальную товара — в рубрике каталога. Указывается целевая страница, никаких автоматических меню — нет. После создания каждой детальной страницы каждого товара, нужно пройти и везде расставить ссылки. Поэтому данный абзац и стоит последним.
Пока всё проделанное в той или иной форме можно было сделать и в Битрикс24.Сайтах.
Настройки магазина. Оплата, доставка, корзина, оформление заказа
Вместе с магазином создаются страницы «корзина» и «оформление заказа». Но их редактирование никакого доступа к магазинным функциям не даёт. Настройки магазина тут:
Настройки аналогичны версии «Управление сайтом». Но в «Управление сайтом» можно расширять список доставок и оплат, а в облаке ограниченный список.
Доставки
Почта (России, Украины, Казахстана, DHL, UPS), СДЭК, СПСР, DPD, не автоматизированный «курьер». Вполне достаточный список
Оплаты
Онлайн-кассы
Только Атол и Орандж.Дата. Физическую подключить нельзя, но мы вообще-то в облаке.
Остальное
Скидки. Пункт меню в настройках есть, создания скидок нет. Вероятно, в разработке. Повторим оговорку из начала статьи — пока магазины в бета-версии.
Типы плательщиков, поля пользователей — есть. Свойства и статусы заказов — есть. Тип цены один (по крайней мере в бесплатной версии).
Оформляем заказ
Всё готово. Всё настроили, делаем заказ.
Работает. Но с ошибками.
На скриншоте есть замечания от СДЭКа — они о том, что мы не ввели в настройках логин-пароль от личного кабинета, соответственно, СДЭК не может рассчитать стоимость доставки. Это нормально. Сам СДЭК отрабатывает, есть настроенные тарифы.
А вот «битые» изображения и логотип — ненормально.
Заказ попал в раздел «магазины» в портале.
В «сделки» заказ — не попал. Это очень странно и очень большой минус. Надеемся, что это тоже в работе.
Покупатель попал в CRM как контакт:
При оформлении заказа на сайте перепутан порядок фамилии и имени. Строка ФИО распаривается для попадания в CRM, так что от порядка зависит всё. Было введено «Василий Михайлович Шевяков»
«Ибрагимов Мамед Салим-оглы» не прошёл вообще:
Проведение заказа
Заказ виден в портале, можно менять статусы заказа, отгрузок, оплат. Редактировать заказ в портале. Связывать с портальными сущностями — делами, задачами. В бизнес-процессы включить нельзя.
На почту покупателю письма о смене статуса не приходят. Обратной связи от магазина к покупателю нет. Управления почтовыми шаблонами тоже нет
Какой-либо личный кабинет или персональный раздел целиком отсутствует в конструкторе. При этом в самом большом шаблоне, готовом магазине «одежда», персональный раздел присутствует. Надеемся, ждём.
Что не протестировано
Обмен между системами оплаты, доставки и порталом. Для этого нужно провести оплату и доставку, системы должны вернуть статусы, они должны обновиться в портале. Сами статусы присутствуют. Работает ли обмен, неизвестно.
Что отсутствует в Битрикс24.Магазинах
Резюме
Есть ряд серьезных проблем, но продукт в бета-тесте.
Для небольшого количества товаров с болью можно настроить.
Мы потратили 7 рабочих часов на настройку, результат плохой. Тексты не писали, кроссбраузерность не проверяли, адаптив не исследовали. Дизайнер не участвовал. Еще 8-10 рабочих часов потребовалось бы для латания самых серьезных дыр и создания графических элементов. В сумме минимум 17 часов опытного менеджера и дизайнера студии, что не слишком отличается от потраченного 21 часа из реального проекта, с которым мы сравнивали.
Если предполагалось, что настройку магазина может выполнить не сотрудник веб-студии, то так не получится. Нужно обладать хорошим пониманием работы Битрикса и Битрикса24, далеко выходящим за познания контент-менеджера. Администратор группы Instagram не справится.
Если и когда будут исправлены ошибки и появятся новые функции — будет лучше. В таком случае, за время сравнимое с настройкой готового решения на «Управлении сайтом», можно будет получить работающий магазин со службами доставки и оплаты.
Вам может быть интересно:
Как бесплатно создать интернет-магазин на конструкторе Битрикс24
Если вы хотите попробовать открыть свой интернет-магазин, но не готовы вкладывать в его разработку большие суммы денег, а в идеале хотите сделать его вообще бесплатно, то присмотритесь к новому конструктору магазинов на «Битрикс24».
Кратко о сервисе
Этот функционал появился в «Битрикс24» осенью 2018 года.
Основные преимущества создания интернет-магазина на «Битрикс24»:
создать магазин легко;
все заявки, контакты сразу попадают в вашу CRM;
в магазине уже встроены функции онлайн-чата, обратного звонка, заявки;
не нужно отдельно покупать хостинг.
В анонсах и промо-материалах разработчиков говорится, что создать магазин можно за 15-20 минут. Это, конечно, заманчивый рекламный месседж, но в реальности это не совсем так. Да, базовую версию с парой товаров вы, возможно, успеете создать за это время, но важно помнить о том, что для полноценной работы магазина нужно настроить много параметров:
подключить разные способов оплаты;
наполнить магазин товарами;
настроить интеграцию с каталогом;
Это займет гораздо больше времени.
Но в конечном итоге у вас получится вполне жизнеспособный магазин для малого бизнеса.
Как создать интернет-магазин на битриксе
Чтобы сделать интернет-магазин, вам нужен портал «Битрикс24» (если у вас его нет, «зарегистрируйте»).
1. Зайдите в «Битрикс24» и перейдите в раздел «Магазин».
2. Система предложит выбрать шаблон вашего будущего сайта. Выберите один из стандартных шаблонов или вариант от партнеров (Приложения «Битрикс24»).
Так выглядят стандартные шаблоны «Битрикса»:
В дальнейшем изменить шаблон нельзя.
3. Выбор цветовой схемы будущего магазина. Выберите подходящий цвет и нажмите «Создать». В дальнейшем палитру можно будет изменить через «Настройки магазина».
Мы попробуем создать магазин на шаблоне «Одежда».
4. Теперь можно редактировать страницы сайта, добавлять блоки, наполнять страницы контентом.
4.1 Как отредактировать блок?
В левой части каждого блока расположено меню настроек.
На вкладке «Дизайн» вы можете отредактировать внешний вид блока, а на вкладке «Редактировать» его содержимое.
В разделе «Дизайн» можно настроить отступы, цвет фона, отображение блока, анимацию. Варианты настроек меняются в зависимости от типа блока, который вы выберете.
Для изменения заголовков, текста, картинки перейдите в режим «Редактировать»:
Или можете сделать это прямо в блоке, нажатием на текст или элемент вы переходите в режим редактирования:
4.2 Как добавить новый блок?
Под каждым блоком расположена кнопка «Добавить блок». Нажмите на нее и выберите, какой блок вам надо добавить (ориентируетесь на информацию, которую хотите представить в этом разделе).
Чтобы переместить блок выше или ниже, используйте кнопки в правой части раздела.
Там же находится «Кнопка удаления».
Теперь можно настраивать блок и добавлять свою информацию.
5. Создание и настройка списка товаров.
Разместите на сайте товары, которые будете продавать с помощью магазина.
Для этого сначала создайте «Разделы товаров», так вы сможете структурировать список товаров, особенно если у вас большой ассортимент. Еще один плюс — вы сможете добавлять на сайт сразу разделы товаров, не выбирая каждый товар отдельно.
5.1 Создание «Раздела товаров».
Чтобы создать раздел, перейдите в раздел «Мои магазины».
Выберите вкладку «Товарный каталог» и перейдите в «Разделы».
Создайте новый раздел, нажав на кнопку «Добавить раздел».
Заполните форму создания раздела (название, изображение) и нажмите «Сохранить».
Создайте свойства, чтобы указать характеристики товаров (например, свойство «Цвет», «Модель» и т.д.).
Для примера добавим свойство «Модель»:
5.3 Добавление товаров.
Когда необходимые характеристики добавлены, можно переходить к созданию товаров.
Чтобы добавить новый товар, выберите «Товарный каталог», «Список товаров» и нажмите «Создать товар».
Заполните необходимые поля.
Закрепите товар за разделом:
И укажите розничную цену на товар:
Нажмите кнопку «Сохранить», и новый товар появится в списке.
Когда список товаров готов, вы можете разместить его на сайте. Для этого добавьте на страницу блок «Список товаров».
После этого в блоке будут отображаться только товары раздела «Сумки»:
6. Детальная страница товара
Теперь можно перейти к настройке карточки товара. Чтобы настроить детальную карточку, перейдите на страницу товара:
После добавления вы увидите такой текст:
Чтобы добавить товар, перейдите к редактированию блока:
В результате у вас должна получиться примерно такая карточка товара:
Чтобы отредактировать основную информацию о сайте, добавить виджет обратной связи с клиентами, изменить цветовую палитру, подключить аналитику, перейдите в раздел «Магазины», выберите вкладку «Действия» и «Настроить сайт».
Измените адрес сайта:
Можно подключить свой домен, указав, какие записи нужно внести в DNS вашего домена.
Включите виджет обратной связи.
Виджет на сайте «битрикс24» — это кнопка, при нажатии на которую клиент может выбрать удобный канал для связи с вами, например, написать в чат, заполнить форму обратной связи, написать через мессенжеры и социальные сети.
Укажите дополнительные настройки:
Favicon — это небольшая иконка, которая показывается на вкладке браузера.
Подключите аналитику. Для этого вставьте в данном поле ID счетчика «Яндекс», «Google Analytics» либо «Google Tag Manager» и фиксируйте статистику посещений страниц.
Выберите шаблон сайта.
В результате у нас получился вот такой магазин:
8. Оформление заказа на сайте.
Рассмотрим, как оформляется заказ на сайте.
Клиент выбирает нужный товар и добавляет его в корзину.
Клиент оформляет заказ на вашем сайте:
После оформления заказа Клиенту на почту, указанную в заявке, придет письмо с информацией о том, что заказ принят:
В этот момент Заказ поступает к вам в «Битрикс24».
Создается карточка заказа, карточка клиента и вы можете работать с заказом в «Битрикс24».
Вот и все! Вот так работает ваш интернет-магазин на «Битрикс24».
Начать продавать в интернете — легко
Настройка пары блоков, добавление четырех товаров и базовые настройки сайта заняли конечно больше заявленных 15 минут. Но тем не менее вы сами убедились, что эта работа под силу даже человеку без навыков веб-мастера.
Пробуйте выстраивать свои продажи в интернете, учитесь, набирайтесь опыта и успех обязательно придет. А мы вам в этом поможем.