Реклама ООО Таймвэб
Реклама ООО Таймвэб
Реклама ООО Таймвэб

Как создать интернет-магазин в конструкторе сайтов

1 комментарий
Как создать интернет-магазин

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

Как выглядит конструктор сайтов и как с его помощью создать интернет-магазин – расскажу в сегодняшней статье.

Шаг 1: Выбираем платформу

Конструкторов для создания сайтов много – от простых сервисов до популярных платформ, на которых разрабатываются мощные интернет-магазины. Однако многие из них либо сложны в освоении, либо предоставляют крайне скудный функционал.

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

Особенностью Крафтума стоит отметить функцию «Дизайн блок», с помощью которой можно создавать уникальное оформление. Это похоже на работу в простом графическом редакторе – можно добавлять фотографии, различные элементы, текст и даже HTML-код. Добавленные элементы легко настраиваются и перемещаются внутри блока. Таким образом, можно создать не просто интернет-магазин с товарами, но и сделать его уникальным, отличным от конкурентов, со своей фишкой.

Доступ ко всем функциям конструктора открыт всего за 197 рублей в месяц. Кроме того, предоставляется пробный период на 10 дней.

Как воспользоваться конструктором Craftum и создать интернет-магазин – разберем далее.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться

Шаг 2: Создаем интернет-магазин в конструкторе

Перед тем как создать интернет-магазин, рекомендую заранее подготовить всю информацию по товарам, которые вы собираетесь продавать. Это фотографии, стоимость, описание, характеристики и прочее. Когда все будет готово, можно переходить к разработке.

Краткий экскурс

Чтобы в последующем вам было проще работать с конструктором, давайте разберем основной функционал сервиса.

  1. Мы начнем разработку интернет-магазина с выбора шаблона. Возьмем шаблон «Салон красоты», в котором сделаем блок для продажи косметических товаров. Наводим на него курсор мыши и нажимаем «Выбрать шаблон».Библиотека шаблонов в конструкторе Craftum
  2. В результате перед нами отображается окно регистрации – вводим в него имя, почту и нажимаем на «Создать сайт».Окно регистрации в конструкторе Craftum
  3. После успешной регистрации мы попадаем на страницу редактирования шаблона, который выбрали ранее.
  4. Работать в Крафтуме крайне просто – все сводится к созданию блоков и их настройке. Чтобы создать новый блок, достаточно навести курсор мыши между блоками и нажать на кнопку в виде плюсика.Как создать новый блок в конструкторе Крафтум
  5. Мы попадаем в библиотеку блоков – здесь можно найти как простые блоки, так и один особенный – дизайн-блок, о котором я говорил выше. Для примера добавим блок с преимуществами – для этого переходим в раздел «Преимущества» и выбираем любой из представленных вариантов.Как в Craftum добавить новый блок
  6. Таким образом, появляется новый блок, который мы можем редактировать. Чтобы изменить текст, достаточно кликнуть по исходному и ввести свой.Настройка блока в конструкторе Craftum
  7. Поработав с каждым блоком текста, можно получить следующее:Как изменить блок в конструкторе Craftum
  8. Также мы можем отредактировать дизайн-часть блока. Чтобы это сделать, для начала нужно открыть настройки блока через кнопку в верхнем левом углу.Как изменить блок в конструкторе Craftum
  9. Во вкладке «Дизайн» можно отредактировать весь блок, например, настроить его отступы и фон. А также изменить заголовок и прочий контент – настроить цвет, шрифт, размер и прочее.Как изменить дизайн блока в конструкторе Craftum
  10. В дизайн-блоке все совершенно по-другому – в нем мы можем не просто отредактировать предложенный вариант, но и создать свой. В библиотеке этот блок находится в самом верху: Как создать дизайн блок в конструкторе Craftum
  11. В результате перед нами открывается окно редактирования блока, который можно полностью очистить и дополнить уникальными элементами: текстом, различными объектами, фотографиями, видеофайлами, кнопками и HTML-кодом.Дизайн блок в конструкторе Craftum
  12. Также в дизайн-блоке мы можем работать с адаптивной версией сайта – для этого предназначены специальные кнопки в верхней части блока.Адаптивный дизайн в конструкторе Craftum
  13. Каждый блок в Крафтуме мы можем удалить, изменить и продублировать, а также скрыть. Сделать это можно с помощью блока в верхнем правом углу:Как удалить блок в конструкторе Craftum

Вот так просто можно работать с конструктором Craftum и создавать в нем уникальные блоки.

Создание интернет-магазина

Теперь давайте перейдем к созданию интернет-магазина:

  1. Для этого нам потребуется 2 блока из вкладки «Товары». Это основной блок с товарами и всплывающий блок, который будет отображать дополнительную информацию о товаре. Начнем с основного блока – добавить его можно из библиотеки блоков.Как в конструкторе Craftum создать интернет-магазин
  2. Отредактируем блок. Предположим, что наш салон красоты продает фены. Чтобы добавить товары, перейдем в настройки блока и в разделе «Контент» напротив первого товара нажмем на кнопку в виде шестеренки.Как добавить свой товар в конструкторе Craftum
  3. Изменим название товара, его описание, цену, а также добавим свою фотографию.Создание интернет-магазина в конструкторе Craftum
  4. Также сделаем так, чтобы при клике на кнопку открывалось всплывающее окно. Для этого сначала переименуем кнопку в «Подробнее», а в «Тип ссылки» укажем «Всплывающее окно».Настройка блока с товарами в конструкторе Craftum
  5. Теперь нам нужно создать новый блок и отредактировать его – добавить в него дополнительную информацию о фене, а затем сделать так, чтобы этот блок открывался по клику на кнопку «Подробнее». Для этого перейдем в библиотеку блоков и в разделе «Товары» выберем блок «Goods-10».Блок с товарами Craftum
  6. Блок добавлен, теперь его нужно отредактировать – для этого заходим в настройки и во вкладке «Контент» кликаем по шестеренке.Как сделать интернет-магазин в конструкторе Craftum
  7. В отобразившемся разделе мы можем полностью поменять описание, добавить свои фотографии, изменить кнопку и цену. После внесения всех изменений обязательно посмотрите, чтобы в «Тип ссылки» было указано «Добавить в корзину». Это необходимо, чтобы товар можно было купить по клику на кнопку.Как добавить корзину в конструкторе Craftum
  8. Теперь нужно сделать так, чтобы этот всплывающий блок открывался по клику на кнопку «Подробнее», которую мы назначили в одной из карточек товара. Для этого возвращаемся к настройкам той карточки и внизу выбираем «Окно 1». Обратите внимание, что название может отличаться, если у вас создано несколько всплывающих окон.Как сделать чтобы в Craftum раскрывалась карточка товара 
  9. Теперь давайте отредактируем корзину. Она была создана автоматически, когда мы настраивали кнопку во всплывающем окне. Находится она в самом низу страницы. В настройках мы можем изменить поля ввода и название кнопки. Обратите внимание, что покупаемый товар оплатить на сайте нельзя, но мы можем сделать так, чтобы пользователь оставлял заявку на покупку. Настройка корзины в конструкторе Craftum
  10. Все заявки на покупку товаров будут уходить на почту, которую нужно указать в настройках блока во вкладке «Форма».Отправка данных с формы Craftum
  11. На этом настройка интернет-магазина закончена. В блоке товаров мы создали с вами только одну карточку с феном. Аналогичным образом вам потребуется заполнить все карточки и назначить для каждой из них всплывающее окно.

Блок с товарами Craftum

Вот так, шаг за шагом, создается интернет-магазин в конструкторе Craftum. Обратите внимание на дизайн – он должен быть в едином стиле. Не используйте много цветов, как правило, хватает двух: акцентного и дополнительного. Например, кнопка может быть акцентной – красной, а шрифт – белым. Фон при этом может быть другого цвета, но обычно он нейтральный: черный или белый.

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

Когда весь функционал сайта будет проработан, потребуется его опубликовать.

Шаг 3: Размещаем сайт в интернете

Публикация сайта в Craftum выполняется всего в несколько кликов:

  1. Нажимаем в верхнем правом углу на кнопку «Опубликовать».Как опубликовать сайт в конструкторе Craftum
  2. Сайт опубликован на техническом домене co9802329397.tmweb.ru и готов к использованию:Как опубликовать сайт в конструкторе Craftum
  3. Вот так выглядит сделанный нами сайт:Пример первого экрана сайта салона красоты

Если вы хотите, чтобы ваш адрес в сети был красивым, например beauty.ru, то необходимо приобрести доменное имя и привязать его к странице. Подробнее об этом вы можете узнать у поддержки в чате конструктора.

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

Наши постоянные авторы и читатели делятся лайфхаками, основанными на личном опыте. Полная свобода самовыражения.

Комментарии

Valdemaras1989 +13
22 дек в 2021
Достаточно подробно. но не хватило блока про интеграцию платежных систем и настройку способов оплаты и доставки . Что в этой части?
Модератор
Пришел кот и стер лапкой этот комментарий
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
С помощью соцсетей
У меня уже есть аккаунт Войти
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте