Новый модуль «магазин» в lpgenerator

Posted on by riasevastopol

Здравствуйте, глубокоуважаемые пользователи платформы LPgenerator!

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

Обрабатывать заказы и редактировать настройки магазина возможно не выходя из личного кабинета. Функциональный редактор разрешает оформить витрину лендинга на любой вкус.

Магазин возможно добавить в готовый лендинг, а возможно создать на безлюдной странице.

Предлагаем подробное управлению по работе с модулем.

1.Раздел «Магазины»

1.1. Категории
1.2. Доставка
1.3. Методы оплаты

1.3.1. Оплата онлайн
1.3.2. Другие методы оплаты

2. Раздел «Товары»

2.1. Перечень товаров
2.2. Типы товаров
2.3. Торговые марки
2.4. Модификации

3. Раздел «Заказы»

3.1. Перечень заказов

4. Интеграция вебмагазина на лендинг

4.1 Редактор
4.2 просмотр и Сохранение

Перейдите в конструктор вебмагазинов: https://lpgenerator.ru/app/#/shopimplant/

В открывшемся разделе надавите светло синий кнопку «Создать магазин» около первого шага:

Введите наименование, выберите валюту магазина и надавите «Создать магазин»:

Новый модуль «магазин» в lpgenerator

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

Обратите внимание: так как магазин будет размешаться на вашем лендинге (с оформлением, заголовком и текстом), то наименование магазина, которое вы вводите тут, будет видно лишь в вашем личном кабинете.

1. Раздел «Магазины»

По окончании того как вы создали первый магазин, нужно совершить его настройку в разделе «Магазины»— https://lpgenerator.ru/app/#/shopimplant/shops/shopsList

Тут задается структура вашего вебмагазина, доставки и способы оплаты.
Разглядим все действия по-порядку.

1.1. Категории

Самое главное для магазина — это его отделы, в которых находятся товары. Это задается в разделе «Категории», что раскрывается сразу же, когда вы ввели наименование магазина и надавили кнопку «Создать магазин».

Первое что вы видите в разделе, это кнопка для подкатегорий:

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

Категория товаров — это основной раздел вашего магазина, по сути сам магазин.

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

На скриншоте продемонстрирован пример товаров, каковые находятся в общей категории (основной папке), другими словами не поделены и раскрываются на первой странице магазина:

Пример

Подкатегория товаров — это подраздел (отдел) вашего магазина. В подкатегории смогут находится другие отделы либо товары.

Обратите внимание: в случае если у вас маленькое количество товаров и/либо они не нуждаются в разделении, сходу переходите к шагу 1.2.

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

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

В этом случае структура магазина будет смотреться приблизительно так:

Пример

Итак, в случае если вам необходимо создать подкатегорию, надавите на раздел, для которого желаете ее создать и кликните кнопку «Создать подкатегорию»:

Дабы удалить категорию, достаточно надавить кнопку «Удалить категорию» в правом верхнем углу:

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

1.2. Доставка

В этом разделе возможно внести методы доставки товаров — https://lpgenerator.ru/app/#/shopimplant/shops/deliveryList

Надавите «Создать новый метод доставки»:

Потом введите наименование, описание и стоимость метода доставки, а после этого надавите кнопку «Добавить метод доставки». К примеру:

В разделе вы имеете возможность добавить новый метод доставки, и отредактировать либо удалить уже добавленные методы посредством иконки в виде шестеренки:

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

Выберите из перечня добавленных ранее способов необходимый вариант доставки и надавите «Подключить»:

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

В опубликованном магазине метод доставки выбирается визитёром при оформлении заказа:

Обратите внимание: цена доставки (в случае если доставка не бесплатна) добавляется к сумме заказа:

1.3. Методы оплаты

В данном разделе настраивается платежная совокупность для вашего магазина — https://lpgenerator.ru/app/#/shopimplant/shops/paymentsList

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

Сейчас для подключения дешёв платежный сервис «Робокасса», что разрешает выполнять платежи множеством самых востребованных способов (а также Visa, Яндекс.Деньги, сотовые операторы, Qiwi и другие).

Кроме этого вы имеете возможность добавить метод, что не требует онлайн-оплаты. Это актуально, к примеру, при оплате лично курьеру.

Итак, надавите кнопку «Добавить метод оплаты»:

Потом обрисуем два примера: подключение платежной системы и добавление метода без онлайн-оплаты.

1.3.1. Оплата онлайн.

Разглядим сперва метод, что разрешает подключить платежную совокупность для совершения онлайн-платежей.

Введите наименование, к примеру, «Оплата-онлайн» и надавите кнопку «Поменять».
Потом выберите метод «Робокасса». Надавите кнопку «Применить»:

Обратите внимание: в сервисе «Робокасса» у вас должен быть создан магазин. В случае если магазина еще нет — создайте его по управлению и задайте технические пароли магазина.

В открывшихся полях введите идентификатор магазина, и первый и второй технические пароли, заданные в личном кабинете «Робокассы»:

Поочередно скопируйте строки под настройками:

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

  1. перейдите в сервис «Робокасса».
  2. засуньте скопированный выше адрес в соответствующее каждому URL поле.
  3. для каждого способа установите значение «POST».
  4. сохраните трансформации.

В итоге технические настройки магазина в «Робокассе» должны соответствовать скриншоту:

Обратите внимание: сервис Робокасса пошлёт на вашу почту письмо с кодом подтверждения. Лишь по окончании того как вы введете данный код новые технические настройки будут применены.

Когда технические настройки магазина будет сохранены, перейдите в модуль настройки магазина LPgenerator и сохраните настройки совокупности оплаты:

1.3.2. Другие методы оплаты

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

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

Надавите «Сохранить метод оплаты»:

Добавить либо поменять метод оплаты неизменно возможно в этом разделе — https://lpgenerator.ru/app/#/shopimplant/shops/paymentsList

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

Для этого перейдите в настройки вашего магазина.
Потом выберите подраздел «Оплата»:

Выберите метод оплаты и надавите «Подключить»:

Чтобы привязать еще один добавленный ранее метод, повторите процедуру:

В магазине метод оплаты будет выбираться визитёром при оформлении заказа, смотреться это будет так:

2. Раздел «Товары»

В разделе «Товары» возможно добавить либо отредактировать товары, каковые будут продаваться в вашем интернет-магазине — https://lpgenerator.ru/app/#/shopimplant/products/productsList

Надавите кнопку «Добавить товар»:

2.1. Перечень товаров

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

Заполните следующие поля описанием вашего продукта:

Выберите валюту товара:

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

Наряду с этим цена будет преобразована по курсу ЦБ в валюту, указанную для магазина (не товара).

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

В случае если к примеру, валюта магазина — рубли, а валюта товара — доллары США, то цена товара, введенная в долларах, конвертируется и отобразится в рублях.

Идем дальше.

Графы «Тип» и «Производитель товара» до тех пор пока возможно покинуть безлюдными. О добавлении бренда и типа для товара будет поведано ниже.

Принципиально важно! Чтобы товар отображался в нужной нам подкатегории, надавите кнопку «Поменять» около надписи «Магазин/категория» и выберите необходимый раздел, а после этого надавите кнопку «ОК».

В отечественном примере товар «Роллы с огурцом» будет отображаться в подкатегории «Роллы» — «Хорошие»:

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

Галочка «Активен» свидетельствует, что товар будет отображаться в магазине.
В случае если товар когда-либо будет снят с продажи, галочку возможно снять, вместо того, дабы удалять товар всецело:

Итак, по окончании того, как все нужные параметры заданы, надавите кнопку «Добавить товар» в нижней части страницы:

Готово! Все добавленные товары попадают в перечень товаров — https://lpgenerator.ru/app/#/shopimplant/products/productsList
Тут их возможно редактировать, и делать выборку (по имени, категории, типу, бренду либо статусу):

2.2. Типы товаров

В данном разделе задаются характеристики товаров — https://lpgenerator.ru/app/#/shopimplant/products/typesList

Характеристики комфортно использовать к товарам определенной группы. На примере будет понятнее как применять данную функцию.

Надавите «Создать тип товара»:

В открывшемся окне введите наименование для типа товара. К примеру, мы желаем составить неспециализированное описание и применять лишь для роллов, исходя из этого назовем тип товара — «Роллы»:

Введем наименование для чёрта и в правом столбце укажем тип данных.

Вероятные типы данных:

  • строка — в карточке товара вы сможете прописать любой текст наоборот данной характеристики
  • число — в карточке товара вы сможете задать любое число наоборот характеристики
  • предустановленные значения — вы имеете возможность задать перечень значений, и из этого перечня выбирать нужную чёрта в карточке товара

Для примера назовем первую чёрта «Состав», и выберем для нее тип данных «Строка»:

В итоге мы сможем прописать состав для товара в его карточке:

Как это будет смотреться в магазине:

Добавим еще одну чёрта:

Назовем новую чёрта «Количество роллов в порции» и зададим тип «Число»:

В итоге мы сможем ввести числовое значение в чертях товара в его карточке:

Пример из опубликованного магазина:

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

Для этого создадим в чертях новую позицию — «Низкокалорийные» и поставим значения «Да/Нет», каковые будем выбирать в будущем:

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

Итак, по окончании того как мы сохранили все характеристики в типе товара, используем их в карточке. Для этого кликните на товар в перечне товаров и добавьте тип, что создали:

Пропишите необходимые характеристики и сохраните трансформации:

Как это будет смотреться для товара в магазине:

2.3. Торговые марки

В данном разделе возможно добавить бренд продукции — https://lpgenerator.ru/app/#/shopimplant/shop/products/brendsList

Надавите «Добавить бренд»:

В открывшейся вкладке введите наименование бренда, его описание и надавите «Добавить производителя”:

Перейдите в карточку товара и выберите добавленный бренд наоборот графы «Производитель». В отечественном примере добавлен бренд для соевого соуса:

Как это отображается в магазине:

2.4. Модификации

Для товара дешёвы модификации, каковые смогут оказывать влияние на его итоговую цена.

Существует три вида модификаций:

  • Опция
  • Переключающиеся кнопки
  • Выпадающий перечень

Поведаем о каждом виде подробнее.

«Опция»

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

Поясним на примере.

Заберём сторонний товар — «Серьги» и добавим для него опцию «В подарочной упаковке». В случае если клиент выбирает подарочную упаковку, цена заказа возрастает на 100 рублей.

Для этого вводим наименование параметра. В нашем случае это «В подарочной упаковке». Выберем вил «Опция»:

Чтобы задать цена опции, укажем «Модификатор цены». В отечественном примере цена товара обязана возрастать на 100 рублей при выборе подарочной упаковки:

Для этого укажем плюс (цена будет возрастать), впишем 100 и отметим «Валюта»:

Не забудьте сохранить трансформации:

В магазине это будет смотреться так:

«Переключающиеся кнопки».

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

Именуем параметр «Размер», выбираем вид «Переключающиеся кнопки»:

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

Дабы добавить еще одно значение, надавите «Добавить значение»:

Сохраните трансформации:

В магазине переключающиеся кнопки будут смотреться так:

«Выпадающий перечень»

Данный вид модификации разрешает добавить для товара выпадающий перечень с параметрами

К примеру, для товара «Планшет» нам необходимо добавить выбор цвета. Для этого добавим вид «Выпадающий перечень» и заполним параметры:

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

Как выпадающий перечень выглядит в магазине:

Модификатор цены

Раздельно стоит остановиться на модификаторе цены:

Обратите внимание: вы имеете возможность поменять цена товара в зависимости от его модификации как в громадную так и в меньшую сторону:

Кроме этого вы имеете возможность выбрать в рублях либо в процентах от изначальной цены товара будет изменяться его итоговая цена:

3. Раздел «Заказы»

В раздел будут попадать заказы ваших клиентов —
https://lpgenerator.ru/app/#/shopimplant/orders/ordersList

Вы кроме этого имеете возможность додавать заказы вручную. Это актуально для заявок, взятых, к примеру, по телефону.

3.1. Перечень заказов

Как говорилось, заказ возможно добавить вручную. Для этого надавите кнопку «Создать заказ»:

Введите нужные данные в карточке заказа и надавите «Создать заказ»:

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

Из перечня товаров выберите необходимый и надавите «Добавить»:

4. Интеграция вебмагазина на лендинг

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

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

Откройте редактор страницы в LPgenerator и кликните по виджету Магазин:

4.1 Редактор

Перед вами откроется редактор. Как раз тут настраивается внешний вид вашего магазина.

Настройки

Введите наименование вашей витрины в одноименном поле.

Обратите внимание: витрина будет создана и на сервисе Shopimplant, исходя из этого оптимальнеезадать наименование, которое будет соответствовать заглавию вашего магазина.

Во втором поле выберите магазин, что создавали ранее:

Общее

Тут задаются главные параметры оформления, на данный момент мы их перечислим по-порядку.

Все страницы — настройки, неспециализированные для всех шагов корзины.

  • Цвет фона — фон, на котором будут размешаться плитки магазина:
  • Режим высоты — тут возможно задать высоту вручную либо же покинуть непроизвольный режим, при котором виджет будет растягиваться по высоте без дополнительных действий:

Информационный блок
Тут задаются настройки оформления описания заказа и блока товара.

Поля ввода.
Настройки в этом разделе задается внешнее оформление для всех полей ввода в магазине.

Навигация

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

А тут панель отображается в самом магазине:

Корзина

Раздел для настройки внешнего вида корзины: шрифта, иконки и ссылки

Кнопки

Раздел с настройками оформления для всех кнопок магазина.
Внизу отображается предпросмотр кнопки:

Пейджер (разбивка на страницы с товарами)

Настройка внешнего вида пагинации страниц:

Плитки

Тут задается оформление плиткам товаров либо подкатегорий. Предпросмотр отображается внизу:

Страница товара

Страница товара раскрывается по окончании клика по кнопке «Подробнее»:

Страница корзины

Тут производятся настройки оформления корзины вебмагазина:

Обратите внимание: поля в корзине являются полями ввода и настраиваются во вкладке «Общее».

Страница заказа

Визитёр попадает на страницу заказа по окончании того, как в корзине кликает по кнопке «Оформить заказ»:

Предпросмотр страницы заказа кроме этого дешёв в редакторе под настройками.

4.2 просмотр и Сохранение

Итак, по окончании того как все нужные настройки сделаны, необходимо их сохранить:

В итоге в редакторе страницы отобразится панель с магазином. Товары вашего магазина тут не отобразятся.

Кроме этого обратите внимание, что внешний вид будет различаться от итогового, исходя из этого, дабы взглянуть, как ваш магазин выглядит на странице, надавите «Просмотр» на панели инструментов слева:

Обновляя настройки в редакторе магазина, обновляйте страницу предпросмотра:

Обратите внимание: если вы вносите трансформации в структуре, прочих настройках и описании товаров магазина, каковые не связаны с оформлением, страницу магазина пересохранять не требуется, достаточно.

На этом все. Не запутаться в этапах настройки магазина вам окажет помощь конструктор, к которому вы постоянно можете возвратиться по ссылке: https://lpgenerator.ru/app/#/shopimplant/

Обратите внимание: модуль вебмагазина проходит стадию тестирования бета версии.
Все пожелания и вопросы направляйте нам по адресу support@lpgenerator.ru

Высоких вам конверсий!

Создатель этого поста:

Макcим Гуйван, начальник отдела техподдержки LPgenerator

» Все статьи автора

Случайные статьи:

Как обрабатывать лиды (заявки) в CRM LPgenerator?


Подборка похожих статей:

riasevastopol

More Posts