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

Гуру маркетинга gurumarketing1341

Здравствуйте, уважаемые пользователи платформы 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/

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

Гуру маркетинга gurumarketing1351

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

Гуру маркетинга gurumarketing1360

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

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

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

Гуру маркетинга gurumarketing1368

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

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

1.1. Категории

Гуру маркетинга gurumarketing1376

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

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

Гуру маркетинга gurumarketing1387

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

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

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

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

Гуру маркетинга gurumarketing1394

Пример

Гуру маркетинга gurumarketing1404

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

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

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

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

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

Гуру маркетинга gurumarketing1412

Пример

Гуру маркетинга gurumarketing1419

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

Гуру маркетинга gurumarketing1425

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

Гуру маркетинга gurumarketing1432

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

Гуру маркетинга gurumarketing1440

1.2. Доставка

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

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

Гуру маркетинга gurumarketing1448

Далее введите название, стоимость и описание способа доставки, а затем нажмите кнопку «Добавить способ доставки». Например:

Гуру маркетинга gurumarketing1457

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

Гуру маркетинга gurumarketing1467

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

Гуру маркетинга gurumarketing1476

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

Гуру маркетинга gurumarketing1484

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

Гуру маркетинга gurumarketing1493

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

Гуру маркетинга gurumarketing1501

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

Гуру маркетинга gurumarketing1508

1.3. Способы оплаты

Гуру маркетинга gurumarketing1515

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

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

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

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

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

Гуру маркетинга gurumarketing1525

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

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

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

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

Гуру маркетинга gurumarketing1535

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

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

Гуру маркетинга gurumarketing1545

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

Гуру маркетинга gurumarketing1555

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

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

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

Гуру маркетинга gurumarketing1563

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

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

Гуру маркетинга gurumarketing1571

1.3.2. Другие способы оплаты

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

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

Гуру маркетинга gurumarketing1579

Нажмите «Сохранить способ оплаты»:

Гуру маркетинга gurumarketing1586

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

Гуру маркетинга gurumarketing1593

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

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

Гуру маркетинга gurumarketing1601

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

Гуру маркетинга gurumarketing1609

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

Гуру маркетинга gurumarketing1618

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

Гуру маркетинга gurumarketing1625

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

Гуру маркетинга gurumarketing1634

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

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

Гуру маркетинга gurumarketing1644

2.1. Список товаров

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

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

Гуру маркетинга gurumarketing1653

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

Гуру маркетинга gurumarketing1662

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

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

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

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

Идем дальше.

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

Гуру маркетинга gurumarketing1670

Важно! Для того, чтобы товар отображался в нужной нам подкатегории, нажмите кнопку «Изменить» возле надписи «Магазин/категория» и выберите нужный раздел, а затем нажмите кнопку «ОК».

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

Гуру маркетинга gurumarketing1680

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

Гуру маркетинга gurumarketing1685

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

Гуру маркетинга gurumarketing1692

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

Гуру маркетинга gurumarketing1699

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

Гуру маркетинга gurumarketing1707

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

Гуру маркетинга gurumarketing1716

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

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

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

Гуру маркетинга gurumarketing1726

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

Гуру маркетинга gurumarketing1733

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

Возможные типы данных:

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

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

Гуру маркетинга gurumarketing1740

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

Гуру маркетинга gurumarketing1746  Гуру маркетинга gurumarketing1753

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

Гуру маркетинга gurumarketing1761

Добавим еще одну характеристику:

Гуру маркетинга gurumarketing1765

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

Гуру маркетинга gurumarketing1772

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

Гуру маркетинга gurumarketing1778

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

Гуру маркетинга gurumarketing1782

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

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

Гуру маркетинга gurumarketing1787  Гуру маркетинга gurumarketing1791

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

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

Гуру маркетинга gurumarketing1795

Пропишите нужные характеристики и сохраните изменения:

Гуру маркетинга gurumarketing1800

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

Гуру маркетинга gurumarketing1804

2.3. Бренды

Гуру маркетинга gurumarketing1808

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

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

Гуру маркетинга gurumarketing1811

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

Гуру маркетинга gurumarketing1815

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

Гуру маркетинга gurumarketing1821

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

Гуру маркетинга gurumarketing1825

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

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

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

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

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

«Опция»

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

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

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

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

Гуру маркетинга gurumarketing1831

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

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

Гуру маркетинга gurumarketing1837

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

Гуру маркетинга gurumarketing1844

В магазине это будет выглядеть так:

Гуру маркетинга gurumarketing1849

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

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

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

Гуру маркетинга gurumarketing1855

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

Гуру маркетинга gurumarketing1862

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

Гуру маркетинга gurumarketing1867

Сохраните изменения:

Гуру маркетинга gurumarketing1873

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

Гуру маркетинга gurumarketing1880

«Выпадающий список»

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

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

Гуру маркетинга gurumarketing1887

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

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

Гуру маркетинга gurumarketing1893

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

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

Гуру маркетинга gurumarketing1900

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

Гуру маркетинга gurumarketing1908

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

Гуру маркетинга gurumarketing1916

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

Гуру маркетинга gurumarketing1923

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

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

3.1. Список заказов

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

Гуру маркетинга gurumarketing1928

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

Гуру маркетинга gurumarketing1933

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

Гуру маркетинга gurumarketing1939

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

Гуру маркетинга gurumarketing1945

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

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

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

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

Гуру маркетинга gurumarketing1954

4.1 Редактор

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

Гуру маркетинга gurumarketing1962

Настройки

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

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

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

Гуру маркетинга gurumarketing1971

Общее

Гуру маркетинга gurumarketing1980

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

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

  • Цвет фона — фон, на котором будут располагаться плитки магазина:

Гуру маркетинга gurumarketing1989

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

Гуру маркетинга gurumarketing1999

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

Гуру маркетинга gurumarketing2007  Гуру маркетинга gurumarketing2016  Гуру маркетинга gurumarketing2028

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

Гуру маркетинга gurumarketing2038  Гуру маркетинга gurumarketing2048

Навигация

Гуру маркетинга gurumarketing2056

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

Гуру маркетинга gurumarketing2065

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

Гуру маркетинга gurumarketing2073

Корзина

Гуру маркетинга gurumarketing2084

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

Гуру маркетинга gurumarketing2092

Кнопки

Гуру маркетинга gurumarketing2101

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

Гуру маркетинга gurumarketing2111

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

Гуру маркетинга gurumarketing2117

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

Гуру маркетинга gurumarketing2125  Гуру маркетинга gurumarketing2135

Плитки

Гуру маркетинга gurumarketing2144

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

Гуру маркетинга gurumarketing2152

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

Гуру маркетинга gurumarketing2160

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

Гуру маркетинга gurumarketing2170  Гуру маркетинга gurumarketing2178

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

Гуру маркетинга gurumarketing2189

Здесь производятся настройки оформления корзины интернет-магазина:

Гуру маркетинга gurumarketing2195  Гуру маркетинга gurumarketing2203

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

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

Гуру маркетинга gurumarketing2208

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

Гуру маркетинга gurumarketing2216  Гуру маркетинга gurumarketing2219

Предпросмотр страницы заказа также доступен в редакторе под настройками.

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

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

Гуру маркетинга gurumarketing2224

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

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

Гуру маркетинга gurumarketing2228

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

Гуру маркетинга gurumarketing2231

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

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

Гуру маркетинга gurumarketing2236

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

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

Гуру маркетинга gurumarketing2241  Автор этого поста:

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

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

gurumarketing.ru