Интернет-магазин
на Tilda

Ключевые моменты создания

блог Quadro

Оглавление

7. Продажа товаров с выбором параметров

4. Подключение платежной системы

6. Продажа товаров без оплаты online

3. Продажа товара через корзину

8. Варианты доставки товаров

9. Дополнительные параметра товары к покупке

10. Промокоды

2. Создание категорий для товаров

1. Добавление товаров на сайт

Подготовка к созданию интернет-магазина на Tilda

5. Настройка уведомлений о заказе

Подготовка к созданию интернет-магазина на Tilda

Для того чтобы начать создание своего интернет-магазина Вам необходимо зарегистрироваться на официальном сайте Tilda.

Если Вы только что зарегистрировали новый аккаунт, то Вам будет доступен бесплатный 2-х недельный ознакомительный доступ к тарифу «Personal». Но дабы полноценно пользоваться сервисом, Вам нужно платно подключить тариф «Personal» или «Businnes», если он еще не подключен.

Далее создаем новый сайт нажатием на соответствующую кнопку «Создать новый сайт».

Затем нажимаем «Создать новую страницу» и выбираем пустой бланк (Blank page)

1. Добавление товаров на сайт

После создания пустого бланка страницы (Blank page) в меню добавления блоков в разделе «Магазин» выбираем любой блок с карточками товаров, например:

ST300, ST305N, ST310N, ST315N.

После переходим в Контент блока.

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

После раздела «Выводить товары из каталога» нажмем на кнопку
«Каталог товаров».

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

Как добавить новый товар?

Нажмите на кнопку «Добавить товар» и заполните его название, и нажмите кнопку «Добавить», после чего откроется параметры товара, где можно заполнить следующие поля: описание, текст товара (Отображается на странице в блоке с карточками),

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

Если у добавляемого товара есть несколько вариантов, то добавьте свойства, например, цвет или размер (Рисунок 1) и варианты, например, гарантия, упаковка, доставка (Рисунок 2).

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

Управляйте разделами, добавляя новые и удаляя уже существующие.

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

2. Создание категорий для товаров

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

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

1) Главная страница (где будут все разделы);
2) Категория «Ноутбуки» - (../notebooks);
3) Категория «Смартфоны и гаджеты» - (../telephones);
4) Подкатегория «Смартфоны» - (../telephones/smartphones);
5) Подкатегория «Гаджеты» - (../telephones/gadgets);
6) Категория «Смарт-часы» - (../smartwatches).

После нужно опубликовать все страницы сайта кнопкой «Опубликовать все страницы» расположенной сверху.

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

В настройках контента блока прописываем иерархию разделов и подразделов товаров сайта.

Затем на странице с разделом (например, раздел «Ноутбуки») добавляем элемент:

блок с карточками товара и в меню «Контент» из выпадающего списка выбираем соответствующий раздел.

Сохраняем.

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

3. Продажа товаров через корзину

Сначала нужно добавить соответствующий блок с названием «Корзина» (ST100) из категории магазин.

При этом, если страниц много и корзина нужна на каждой, следует расположить этот блок на странице «Header».

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

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

Если же корзина пуста, эта иконка пропадет.

4. Подключение платежной системы

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

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

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

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

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

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

5. Настройка уведомлений о заказе

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

Настроить отправление писем можно двумя популярными способами:

через почтовый сервер

через сервис SendGrid

Отправка уведомлений через почту на своем домене

В настройках сайта во вкладке «Платежные системы» найдите пункт «Настройки для уведомлений покупателей о заказе»

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

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

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

Заполнение полей

Для Gmail, например, это будут smtp.gmail.com, 465, SSL, а для Яндекс smtp.yandex.ru, 465, SSL.

В поле «Логин» укажите полный адрес вашей почты в сервисе.
Так же нужно указать пароль к ней ниже в поле «Пароль».

E-mail отправителя — почта, через которую будут отправляться уведомления.

Тема письма — это заголовок в отправляемом письме.

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

Отправка уведомлений через сервис SendGrid

Регистрируем аккаунт на сайте SendGrid , если не сделали этого ранее.

1) Дальше нужно авторизоваться в системе и зайти в Settings – API Keys.

2) По клику на «Create API Key» откроется окно в котором указать Имя ключа и в качестве доступа выбрать Fill Access.

3) Нажать «Create & View»

Скопируйте полученный ключ

Перейдите в Тильду по пути

Настройки – Платежные системы – Общие настройки платежных систем – Настойки для уведомлений покупателей о заказе.

Все остальные поля идентичны первому методу.

6. Продажа товара без оплаты онлайн

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

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

Список некоторых сервисов приема данных, которые можно подключить:

Email - прием заявок на почту

Google Sheets

Битрикс 24

AmoCRM

Мегаплан

Slack

Trello

Чтобы подключить сервис приема данных нужно перейти в
Настройки сайта — Формы — Cервисы приёма данных из форм.

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

Покупатель добавит товар в корзину, заполнит в форме поля, нажмет «Оформить заказ», и вам на подключенные сервисы (например, на email) придет уведомление с параметрами заказа и контактами получателя.

7. Продажа товара с выбором параметров

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

Добавление варианта товара

Если у вас несколько вариантов одного товара, то поможет добавление свойств с помощью ссылки
«Добавить свойство».

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

Добавление дополнительных параметров товара

Дополнительные параметры товара - это те параметры, которые являются общими для всех вариантов товара.

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

Если опция бесплатна, то она просто прописывается, а если платная, то после ее названия указывается ее стоимость в формате:

Имя_услуги =+ 100, где 100 – это цена этого дополнительного параметра

Добавление характеристик товара

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

К примеру, бренд, страна-производитель, материал или дата выпуска продукции.

Вот так это выглядит в карточке товара

8. Варианты доставки товара

Варианты доставки товара задаются в меню «Контент» блока «Корзина с формой заказа» (ST100).

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

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

В корзине появятся варианты доставки.

Стоимость доставки будет прибавляться к общей цене в корзине

9. Дополнительные параметры товара при покупке

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

Дополнительные параметры прописываются в Каталоге товара в настройках товара — Дополнительные опции.

Всего одновременно можно добавить не более 5 опций. Если опция платная, то после ее названия ставится операнд «=+» и числовое значение, указывающее её цену.

Пример использования дополнительных опций представлен справа.

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

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

10. Промокоды

В Тильде промокоды создаются в Настройках сайта — Платежные системы — Промокоды.

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

Так выглядят список всех ваших промокодов.

Перейдите на страницу «Header» (где блок с корзиной) и в меню контент добавьте поле «Промокод».

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

Некоторые нюансы промокодов:

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

Максимальное количество промокодов, которое можно создать — 500 штук.

Промокоды не чувствительны к регистру, то есть «TVWELC2019» и «tvwelc2019» одно и тоже

Перейти к содержанию