Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

Как подключить онлайн-оплату на сайте Тильда

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

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

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

Таймкоды:00:00 — Начало00:28 — Содержание01:50 — Регистрация и создание первой страницы02:42 — Добавление на страницу блока «Корзина»03:00 — Добавление на страницу карточек с товарами03:12 — Как добавлять товары на страницу05:32 — Хранение покупок в разделе «Заявки»06:17 — Как изменить обозначение валюты стоимости товаров06:49 — Как подключить платежные системы к магазину08:49 — Как настраивать поля формы в корзине12:55 — Как подключить CRM сервисы приема данных14:55 — Как настроить адрес страницы или подключить свой домен15:51 — Как настроить поведение корзины магазина17:03 — Что такое Каталог товаров17:46 — Как подключить Каталог товаров к магазину19:02 — Добавление товара в Каталог и настройка товара21:45 — Подключение каталога к карточкам товаров на сайте22:06 — Как выводить фильтры и сортировку товаров на странице23:31 — Как подключить сервисы доставки СДЭК, Почта России, Boxberry, Новая почта. Или сделать свой вариант доставки или пункта выдачи

Подробнее об интернет-магазине на Тильде: https://tilda.cc/ru/build-online-store

Как создать онлайн-магазин и принимать оплату: https://help-ru.tilda.cc/online-storeКак работать с корзиной: https://help-ru.tilda.cc/online-store/cartКак добавить товары: https://help-ru.tilda.cc/online-store/catalogКак настроить доставку: https://help-ru.tilda.cc/online-store/shippingКак добавить к покупке дополнительные товары: https://help-ru.tilda.cc/online-store/additional-options

Как принимать оплату на Тильде через WayForPay

WayForPay — это платежная система, позволяющая пользователям оплачивать товары или услуги с помощью банковских карт, посредством системы Приват24 и через терминалы. Оплата на сайте Тильда с помощью Wayforpay настраивается следующим образом:

1. Прохождение регистрации на платежном сервисе и активация нового аккаунта.

Сбор данных для e-commerce (Tilda)

платежная система WayForPay

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

Сбор данных для e-commerce (Tilda)

настройки магазина в платежной системе WayForPay

3. В разделе «Список магазинов» необходимо кликнуть на «Создать магазин», чтобы добавить новый сайт.

Сбор данных для e-commerce (Tilda)

настройки магазина WayForPay

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

Сбор данных для e-commerce (Tilda)

реквизиты мерчанта WayForPay

5. Далее необходимо открыть Тильду и выбрать через настройки систему WayForPay.

6. Оттуда необходимо скопировать данные Merchant Login и Merchant Secret Key.

Сбор данных для e-commerce (Tilda)

настройки системы WayForPay для Тильды

7. После отмечается необходимый язык страницы, значение URL Result. По этой ссылке будет проходить переход в момент успешной оплаты.

Сбор данных для e-commerce (Tilda)

настройки платежей WayForPay для Тильды

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

Сбор данных для e-commerce (Tilda)

тестирование платежной системы на Тильда

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

Как привязать оплату через Platon на Тильду

Партнерами Platon являются ведущие украинские банки-эквайеры, в их число входят: Райффайзен банк Аваль, Альфа-банк и ПриватБанк. Platon позволяют принимать онлайн оплаты с помощью карт Visa, MasterCard, Maestro. Система электронных платежей Platon представляет предприятиям электронной коммерции возможность приема платежей онлайн без прямой интеграции с банком-эквайером.

Сбор данных для e-commerce (Tilda)

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

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

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

Сбор данных для e-commerce (Tilda)

тестирование системы Платон на Тильда

💡 События и свойства просмотра товаров и добавления их в корзину

Добавляем шаблон кода в раздел «Сбор данных о посетителях» – «Настроить JavaScript код»:

В начале кода должен стоять скрипт, определяющий функцию getClosest(). Вставим в поле ввода кода сначала его:

Затем последует скрипт для записи данных со страницы товара:

1. Вставляем значение из ссылки, которое повторяется на каждой странице товара. Заменяем в коде слова ПУНКТ1 на это значение. На примере из ссылки http://*домен вашего сайта*/catalog/tproduct/pants/, будет значение tproduct:

1.1 Если нет общего уникального значения в ссылке на страницу товара, то можно добавить уникальное значение class или id, которое используется только на странице товара. В этом случае заменяем первые 5 строчек кода записи данных со страницы товара полностью на:

и вместо ПУНКТ1.1 вписываем это уникальное значение. Например, такой атрибут class=”js-image-zoom-hover” встречается только на страницах с товарами, тогда добавляем в код  .js-image-zoom-hover:

Далее определим переменные, содержащие информацию о товаре:

2. Определяем селектор элемента с названием товара:

В нашем примере селектор будет таким: .t-store__prod-popup__container .js-store-prod-name. Заменяем ПУНКТ2 в шаблоне на .t-store__prod-popup__container .js-store-prod-name:

var name = document.querySelector(‘.t-store__prod-popup__container .js-store-prod-name’).textContent.trim();

3. Стоимость товара. Определяем селектор элемента со стоимостью. Уникальным на странице, то есть больше не повторяется, является это значение, его и используем  .t-store__product-popup .js-store-prod-price-val:

var amount = parseInt(document.querySelector(‘.t-store__product-popup .js-store-prod-price-val’).textContent.replace(/D/g, »));

4. Картинка товара. Определяем уникальное значение у тега, содержащего картинку. В теге с картинкой обязательно присутствует атрибут src со значением ссылки с местом ее хранения (если вы перейдете по этой ссылке в браузере, то в нем подгрузится сама картинка).

Значением в нашем примере будет .t-store__product-popup .js-image-zoom-hover

Проверяем, что получилось:

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

Если использовали уникальный селектор из пункта 1.1, то пример:

💡 События и свойства на странице с корзиной

  • Удалил товар из корзины
  • Начал оформлять заказ

Добавляем шаблон кода в раздел «Настроить JavaScript код»:

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

var items = document.querySelectorAll(‘.t706__product-title a’).length,

Вместо ПУНКТ4.1 нужно указать селектор контейнера информации о товаре из корзины, а вместо ПУНКТ4.2 – селектор названия товара. Пример:

‘$name’: getClosest(e.target, ‘.t706__product’).querySelector(‘.t706__product-title a’).textContent.trim()

💡 События и свойства оформленного заказа

  • Сумма в корзине
  • Сумма всех заказов
  • Сумма последнего заказа

Заменяем ПУНКТ1 на часть URL страницы, подтверждающей успешное оформление заказа. Пример:

Подключение оплаты на Тильде

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

Через готовую интеграцию на Tilda

Этот способ хорошо подходит веб-ресурсам, работающим с платными тарифами Тильды. Для его реализации необходимо выполнить следующие шаги:

1. Перейти в «Платежные системы», представленные в настройках Тильды, и далее выбрать «Универсальная платежная система».

Читать также:  Как цифровая трансформация компаний меняет рынки труда

Сбор данных для e-commerce (Tilda)

Платежные системы на Тильда

Сбор данных для e-commerce (Tilda)

Универсальная платежная система на Тильда

2. В разделе шаблонов выбрать Fondy.

Сбор данных для e-commerce (Tilda)

Шаблон настройки Fondy на Тильда

3. Ввести «ID мерчант» и «Ключ платежа». Эта информация хранится в Fondy, она доступна через раздел «Настройки мерчанта» — «Технические».

Сбор данных для e-commerce (Tilda)

Подключение другой платежной системы на Тильда

Сбор данных для e-commerce (Tilda)

Настройки мерчанта Fondy на Тильда

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

Через платежную кнопку

Кнопка добавляется посредством сгенерированного куска HTML-кода, размещаемого на сайте. Подключение происходит следующим образом:

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

2. Указать валюту и сумму покупки при совершении платежа через конструктор кнопок.

Сбор данных для e-commerce (Tilda)

Конструктор платежных кнопок Фонди

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

Сбор данных для e-commerce (Tilda)

Настройка платежной кнопки Фонди

3. Настроить дизайн платежной кнопки в соответствии с потребностями сайта. Можно выбрать цвет, размер шрифта, задать параметры для углов.

Сбор данных для e-commerce (Tilda)

Настройка дизайна платежной кнопки Фонди

4. Скопировать HTML-код, появляющийся после сохранения введенных данных.

5. Перейти на сайт и добавить в необходимом месте блок «Т123 HTML-код». Туда нужно вставить полученный код формата HTML.

6. Сохранить блок и выбрать «Опубликовать» — кнопка находится с правой стороны в верхнем углу страницы.

Через платежную ссылку

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

1. Перейти в раздел «Платежные кнопки», находящийся в личном кабинете Fondy.

Сбор данных для e-commerce (Tilda)

Платежные кнопки в личном кабинете Fondy

2. Создать новую кнопку с указанием стоимости платежа и валюты списания средств.

Сбор данных для e-commerce (Tilda)

Создание платежной кнопки/ссылки Fondy

3. Сохранить кнопку и скопировать ссылку, ведущую на страницу оплаты.

Сбор данных для e-commerce (Tilda)

Платежная ссылка Fondy для Тильда

4. Разместить ссылку на сайте. Чаще всего она вставляется в кнопку «Купить».

Сбор данных для e-commerce (Tilda)

Размещение платежной ссылки Фонди на Тильда

Как настроить оплату LiqPay на Tilda

Это система моментальных платежей, разработанная Приват Банком. Такой способ позволяет пользователям оплачивать приобретаемые продукты через платежные системы Mastercard и VISA. Сервис доступен для использования только украинским резидентам, при этом производить оплату можно отовсюду. Настройка оплаты на Тильде через эту платежную систему происходит следующим образом:

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

Бизнес регистрация на LiqPay

3. Выбрать раздел «Настройки», находящийся в блоке «Мои компании».

Сбор данных для e-commerce (Tilda)

Настройки Мои компании на LiqPay

4. Выбрать раздел API, расположенный с левой стороны.

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

URL уведомлений сервер-сервер LiqPay

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

Сбор данных для e-commerce (Tilda)

7. Перейти в Тильду. Перейти в «Платежные системы» — «LiqPay», а после указать скопированные значения.

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

Сбор данных для e-commerce (Tilda)

Настройка ключей LiqPay на Тильда

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

Настройка оплаты на сайте для других платежных систем

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

Сбор данных для e-commerce (Tilda)

Настройка оплаты на Тильда

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

Сбор данных для e-commerce (Tilda)

Подключение универсальной оплаты на Тильда

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

Сбор данных для e-commerce (Tilda)

настройка шаблона для оплаты на сайтах Тильда

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

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

Сбор данных для e-commerce (Tilda)

список соответствия полей Тильда

2. Добавить переменные в разделе «Список дополнительных полей», исходя из потребностей интеграции.

Сбор данных для e-commerce (Tilda)

список дополнительны полей оплаты на Тильда

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

Сбор данных для e-commerce (Tilda)

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

Сбор данных для e-commerce (Tilda)

Признак успешного платежа на Tilda

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

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

P.S. В нашей студии можно заказать классный сайт на Tilda, ждем Вас!

Сбор данных для e-commerce (Tilda)

Оставьте свой номер телефона и мы свяжемся с вами в течение 10 минут

Как сделать интернет-магазин

Пошаговое руководство по созданию сайта для вашего магазина

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

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

Придумываем название и логотип

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

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

Все делают по-разному: кто-то берет имя и фамилию (Гоша Рубчинский, Tommy Hilfiger), другие используют географию (Nokia, Patagonia), третьи придумывают ассоциации (магазин мебели Мебеледом, Land Rover). У кого-то название получается случайно — Стив Джобс придумал название Apple, потому что ему нравились яблоки и он хотел, чтобы компания была выше фирмы Atari в телефонной книге. Основатели Google хотели назвать проект Googol (обозначает число: единица и сто нулей), но домен googol.com был занят и они поменяли пару букв.

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

История из жизни: у одного магазина оправ и очков было название I wear eyeware — красивая игра слов, но на слух непонятно. Потом они переименовались в «Синоптикс».

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

Читать также:  Цифровизация обучения в школе это

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

Сбор данных для e-commerce (Tilda)

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

Жене написала знакомая, затевающая юридический бизнес в Германии. Я назвал некую скромную ставку фрилансера, за которую был бы готов этот бизнес оформить, но у ребят это явно не было заложено в бюджет, и они загрустили. Тогда я предложил им короткую и простую инструкцию. Как сделать логотип самим и бесплатно, будучи юристами и аудиторами. Забегая вперед скажу, что эту инструкцию они применили и, вроде бы, остались довольны.

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

Что делать, если бизнес-идея есть, а денег на логотип нет? Как не опозориться?Очень просто. Нужно взять название бизнеса и написать его хорошим шрифтом на белом фоне. Аккуратно, без дополнительных смыслов, фантазий, креатива и вот этого всего.Хорошие шрифты: Helvetica, Gotham, Bodoni, Georgia.

Примеры компаний, которые так сделали и не опозорились: American Apparel, Jeep, Panasonic, 3M, Adidas, Gap.

У международного бренда одежды American Apparel название написано шрифтом Helvetica

Как пользоваться таким логотипом? Аккуратно. Оставляя вокруг него как можно больше свободного пространства.

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

Домены продают компании — регистраторы доменов — reg.ru, godaddy и др. Стоимость доменного имени зависит от зоны, в которой регистрируется домен. Средняя стоимость домена в зоне .ru— около 200 рублей в год.

Кроме зоны .ru сейчас появилось много разных доменных зон — .space .store .coffee и другие. Часто короткие адреса сайтов заняты, и зоны выручают.

Смотрите другие зоны, кроме .ru и .com. Будьте креативнее.

Готовим фотографии для интернет-магазина

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

Для интернет-магазина вам понадобится два типа съемки:

Предметная съемка, на ней видно сам товар в разных ракурсах. Этот вид съемки может быть как на модели, так и на вешалке. Для одежды принято делать 3-4 фотографии с разных сторон.

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

fenhel.com Чехлы для телефонов. Каталог товаров

Сбор данных для e-commerce (Tilda)

voodoobooks.ru Интернет-магазин блокнотов. Каталог товаров

Сбор данных для e-commerce (Tilda)

thewonderdesigns.com Интернет-магазин рюкзаков. Каталог товаров

Лукбук показывает, как объект выглядит в жизни — в настоящем окружении. Если это мебель — то в интерьере, если коттедж — фотография дома на природе.

Сбор данных для e-commerce (Tilda)

woolie.ru. Интернет-магазин пледов из шерсти. Лукбук

Сбор данных для e-commerce (Tilda)

laska.xxx Интернет-магазин временных татуировок. Лукбук

Сбор данных для e-commerce (Tilda)

dubldom.ru Модульные дома. Пример съемки лукбука

Для фотосъемки товаров в студии потребуются:

  • Аренда студии — в среднем по Москве от 500−3000 рублей в час
  • Услуги фотографа — 4000−10 000 рублей в час
  • Услуги модели — 2000−5000 рублей в час

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

Сбор данных для e-commerce (Tilda)

Фотограф и основатель магазина Potanica

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

Средняя стоимость съемки — 300−500 рублей за небольшой предмет. Свои горшки с растениями я снимаю с естественным светом. Если предметы небольшие, а снимать их нужно регулярно, проще всего купить столик для предметной съемки или специальный лайтбокс и самый простой набор искусственного освещения. Стоимость равна 3−4 арендам.

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

Сбор данных для e-commerce (Tilda)

Основательница интернет-магазина пледов Woolie

Woolie — красивый бренд, здесь никак без стильного контента. Где-то раз или два в месяц мы проводим фотосессии. Наш основной канал — инстаграм*, каждые два дня мы выкладываем фотографию в новом интерьере.

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

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

Как расположить товары на сайте

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

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

1. В магазине всего 1-5 товаров

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

Покупатель посмотрит все товары на одной странице, без дополнительных кликов и переходов. Еще один плюс — все предметы хорошо видно, они крупно показаны.

2. До 40 товаров одного типа

Когда товаров больше 5 и все они одного типа, например, только книжки или только сумки, есть смысл сделать плитку товаров.

При клике на карточку открывается попап-окно на этой же странице, чтобы посмотреть вещь поближе.

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

3. 2−4 категории, в каждой до 20 товаров

Если в вашем интернет-магазине несколько типов вещей — например, мебель, светильники и посуда, их стоит разбить на категории и разделить заголовками.

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

Этот способ расположения товаров хорошо смотрится, когда у вас до 4 категорий и до 20 товаров в каждой категории.

4. Больше 4 категорий или в одной категории более 20 товаров

Если у вас по 20−30 товаров в одной категории, имеет смысл сделать многостраничный интернет-магазин с отдельной страницей для каждой категории, чтобы покупателю было удобнее найти то, что ему нужно.

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

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

Сбор данных для e-commerce (Tilda)

Владелица магазина деревянного декора «ХВОЯ»

Три важных момента, с чего начать сайт своего магазина.

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

Рассказываем про свой бренд

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

О чем рассказать:

О проектеРасскажите, что делает ваш проект, чем вы интересны, как помогаете людям решать проблемы. Сюда можно добавить и немного истории — как все начиналось, как придумали идею – всегда интересно читать про креативный процесс.

Читать также:  Цель электронной коммерции это

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

О процессеПокажите, как вы работаете, из чего состоит процесс производства, как вы рисуете эскизы предметов или как упаковываете и доставляете товары

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

Сбор данных для e-commerce (Tilda)

blume.com. Интернет-магазин белья ручной работы

Сбор данных для e-commerce (Tilda)

okhomelab.ru. Домашняя лаборатория органической косметики

Добавьте на сайт магазина раздел «О проекте», фотоленту из Инстаграма*, короткий видеоролик про свой бренд. Заинтересуйте покупателя не только товаром, но и вашим творческим процессом.

Принимаем платежи в удобном формате

Как быть с платежами — нужно ли регистрировать кассу в налоговой или можно принимать наличные? Переводы на карту можно? А по номеру телефона?

Ответ: да, можно все. Создавать юрлицо для этого необязательно.

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

Оплату можно принимать наличными при доставке товара или на Яндекс Кошелек.

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

Это удобно: никаких наличных и не нужно подключать платежную систему. Карты Сбербанка есть почти у всех.

Если у вас уже есть ИП и касса — отлично. Если нет, попробуйте продать несколько товаров, протестируйте бизнес-идею. Часто начинается все с продажи друзьям и знакомым, вы можете принимать платежи как частное лицо и платить НДФЛ.

Как только вы понимаете, что дело становится систематичным и продажи в интернет-магазине идут, можно уже во всем разбираться — регистрировать ИП, покупать кассу, выбирать нормальный банк (например, в Точке все удобно интегрировано). А для начала просто принимайте заявки без платежной системы.

Организовываем доставку товаров

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

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

Мы нашли несколько компаний, которые доставляют по Москве и России:

Привлекаем клиентов в магазин

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

Продумайте маркетинговую стратегию и решите, как вы будете продвигаться — через Инстаграм*, другие соцсети, контекстную рекламу, будете ли отправлять рассылку. А, возможно, вы решите руководствоваться метриками для стартапа AARRR?

Сбор данных для e-commerce (Tilda)

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

Самым сложным на этапе создания интернет-магазина для меня было не бояться и перебороть все организационно-бумажные вопросы. Они несложные, просто отнимают время.

Инструкция: как самостоятельно создать интернет-магазин на Тильде

Во-первых, посмотрите наше видео, как сделать магазин на Тильде.

Зарегистрируйтесь на Tilda Publishing и выберите тариф Personal или Business (они отличаются количеством сайтов, которые вы можете создать в одном аккаунте).

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

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

2. Выбрать шаблон для будущего интернет-магазина

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

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

Если у вас свое видение интернет-магазина и шаблон вам не подходит, создайте новую страницу с нуля и сделайте все по-своему.

3. Определить, что будет на странице магазина

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

Сбор данных для e-commerce (Tilda)

woolie.ru. Пледы и шарфы ручной работы из шерсти и хлопка. Отзывы

Сбор данных для e-commerce (Tilda)

okhomelab.ru. Домашняя лаборатория органической косметики. Преимущества продукта

Сбор данных для e-commerce (Tilda)

woolie.ru. Пледы и шарфы ручной работы из шерсти и хлопка. Преимущества

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

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

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

Сбор данных для e-commerce (Tilda)

4. Добавить в свой интернет-магазин корзину

Чтобы на сайте появилась корзина, зайдите в библиотеку блоков — категория «Магазин» и выберите первый блок с корзиной.

Сбор данных для e-commerce (Tilda)

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

5. Подключить платежную систему

Сбор данных для e-commerce (Tilda)

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

В Тильде вы можете подключить Paypal, Яндекс Деньги, Яндекс Касса, Робокасса, Cloud Payments и Stripe (последний для юрлиц, зарегистрированных не в России). Когда пользователь перейдет к оплате заказа, ему будет предложено заплатить одним из способов, который вы отметили в настройках.

Опубликуйте страницу магазина.

Сбор данных для e-commerce (Tilda)

Поздравляем! Теперь у вас есть свой интернет-магазин.

Сбор данных для e-commerce (Tilda)

Магазин сумок iambag

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

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

Возможности интернет-магазина на Тильде

Интерактивные карточки товаров

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

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

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

Как задать параметры товара

Как задать сопутствующий товар, например, упаковку

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

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

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

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

В корзине к стоимости товара добавится стоимость выбранной доставки.

Заявки о покупке товара будут отображаться в интерфейсе Тильды.

Сбор данных для e-commerce (Tilda)

Кроме заявок в интерфейсе Тильды вы можете подключить внешний сервис приема данных, на Тильде их интегрировано 12. Это делается в настройках сайта, вкладка «формы». Выбирайте, как удобнее: чтобы заявки приходили на почту или, например, в Телеграм, чтобы быстрее узнавать обо всем.

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

Инструкции Tilda Publishing, которые пригодятся любому предпринимателю

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

Сбор данных для e-commerce (Tilda)

Текст: Варя ГуроваИллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *