Как подключиться к системе электронной коммерции Tilde

Другие решения CloudPayments для Тильды

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

• Настроить одностадийную схему оплаты
• Добавить блок для пожертвований
• Подключить форму оплаты и выбрать ее дизайн
• Выбрать признак способа расчета
• Настроить собственную форму оплаты с помощью скрипта

Подключаем Я. Вебмастер

• Переходим по ссылке в Webmaster
• Нажимаем на плюс и добавляем сайт
• Выбираем подтверждение, через метатег, копируем, то что в кавычках, после content=»
• Идем в настройки сайта Tilda, Еще
• Листаем вниз, ищем поле, подтверждение домена яндекса через метатег
• Вставляем скопированный текст
• Публикуем страницы
• Возвращаемся в вебмастер и нажимаем Проверить

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

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

Как подключить рекуррентные платежи в Tilda?

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

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

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

• Рекуррентные платежи можно подключить только к корзине, поэтому используйте блок с корзиной ST100, где передавайте e-mail или телефон. Если опция включена, то все платежи через корзину будут рекуррентными
• При необходимости меняйте количество платежей (поле «Максимальное количество платежей») и устанавливайте нужную сумму платежа, если она не равна первой оплате (поле «Сумма регулярного платежа»)

Видео в карточке товара

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

Главная

У меня это такие блоки:

• Баннер на первом экране с заголовком, описанием и кнопкой
• Блок с лучшими товарами
• Преимущества
• Продаваемые товары
• Все разделы блоками с фото
• Товары по типам (с табами)
• Хиты продаж с табами

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

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

Вы попадёте на этот экран. Тут всё просто.

Чтобы добавить новую позицию, нажмите на большую кнопку «Добавить товар» и заполните его название.

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

Заголовок заполняется автоматически из названия карточки.

• Описание — это то, что увидят люди, открыв страницу каталога с товарами.
• Текст — это то, что покупатели увидят, зайдя в карточку товара.
• Изображение — фото вашего товара, и их может быть несколько.
• Цена — понятно. Если вы хотите устроить распродажу, напишите ещё старую цену в соответствующую строку.
• Артикул — если у вас много товаров, и вам важно вести учёт по артикулам.
• Количество — сколько единиц товара осталось. Если ничего не написать в этот пункт, то система будет считать это как бесконечное количество товаров. А если написать туда 0, то система автоматически покажет, что товар закончился и не даст его выбирать. Только посмотреть.

Интересная фишка в каталоге — «Отметка на карточке». Позволяет сделать любую отметку на карточке товара. Например, написать «Новинка», «-30%» или «Выбор года». Можно писать всё что угодно, ограничений нет.

Когда вы всё заполните и сохраните, в каталоге появился первый товар.

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

Тонкости каталогизации и оптовая загрузка товаров и артикулов

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

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

По умолчанию у вас есть только один раздел “Всё”. Его удалить нельзя. И даже если вы будете делать товары в других разделах, они будут появляться и в этом разделе. Потому что тут лежит всё.

Вот такой каталог у меня получился.

Скрытая начинка магазина готова.

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

Корзину на сайте реализовываем с помощью блока ST100 в разделе МагазинТак как этот блок должен быть на всех страницах, где должен товар добавляться в корзину, то его лучше добавить в шапку (header) или подвал (footer). Так он будет работать отлично

Какие тут есть интересные настройки:

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

На момент написания статьи, создать корзину для интернет-магазина отдельной страницей на Тильде нельзя.

Как настроить мобильную версию сайта

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

Блок 5. Основные cтраницы в интернет-магазине

Интернет-магазин состоит из типовых страниц:

• Страница Раздела
• Карточка товара

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Каталог товаров

Наиболее интересный раздел! Поэтому я решил записать видео, где рассказываю о каталоге для интернет-магазина и работе с товарами. В видео затрону такие темы:

• Как подключить каталог
• Добавление товаров на сайт. Наполнение. Обязательные поля для заполнения
• Как выводить превью на листинге интернет-магазина
• Добавление чек-боксов, кнопок выбора дополнительных параметров в карточке товаров
• Как выводить блок похожих товаров в Карточке товара
• Как настраивать фильтр для товаров
• Работа с каталогом
• Фильтры
• Параметры товара

Блок 8. Сервисы для владельца сайта

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

Могу вас поздравить, остались последние штрихи:

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

Настраиваем переадресацию https и www

Вот такие должны быть настройки

Подключаем https. Выпускаем ssl сертификат. Настраиваем переадресацию https и www

Если вы не подключили свой домен, то вам ssl-сертификат настраивать не нужно, он настроен по-умолчанию. Но все же рекомендую, подключить свое доменное имя

Жмем на бегунок Защищенный протокол

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

На что опираться при проектировании и разработке ИМ

Самый важный этап работы — это правильно найти лидеров ниши. Для этого:

• Берем коммерческий запрос, который характеризует нашу тематику. Например, Купить солнцезащитные очки
• Ищем несколько сайтов из выдачи ТОП-10. Важно, не смотрим рекламную выдачу, а только органическую
• Выписываем 3-5 сайтов, на основании которых будем строить структуру в программе xmind
• Выписываем повторяющиеся элементы (которые есть у всех лидеров)

Какие сайты из выдачи берем

Сервис Мегаиндекс — Видимость

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

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

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

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

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

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

Пагинация. Слайдер товаров

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

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

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

Слайдер товаров обычно выводят под основным листингом товаров, в блоке «Рекомендованные», «Часто покупают» или что-то подобное. Для этого используют блок TE800 из раздела Плитка и ссылка

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

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

Коммерческие разделы — это информация, которая связана напрямую с магазином и помогает посетителям получить больше информации о том, как заказать/оплатить, узнать о стоимости и возможности доставки товара, а также познакомиться с компанией. Для этого на сайте делают страницы:

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

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

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

Для проверки, важности коммерческих элементов на сайте, найдите любой информационный сайт (блог) в Yandex в топ-10 и посмотрите шапку и подвал, на наличие коммерческих факторов. Их практически не будет, за исключением информации о человеке или компании.

Это все потому, что для выхода в топ информационных запросов, вида: «как что-то сделать?», не нужно наличие коммерческих элементов и страниц. Зачем они? — Ведь пользователь ничего не хочет покупать, он хочет узнать, как что-то сделать.

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

Поиск по сайту Тильда

В Тильде для поиска появился прекрасный блок. Найти его можно в разделе «Другое» —> T985, он называется — Виджет поиска по сайту, раскрывающийся по клику.

Замечателен он тем, что это всплывающий блок (pop up) и у него есть ссылка. То есть мы можем разместить поисковую иконку в любом месте.

Как его использовать?

• Иконку поиска обычно размещают в шапке сайта. Можно заместо иконки просто использовать текст «Поиск». Если вы используете блок МЕ301, то поиск можно разместить в пункте меню и дать ему link на поиск.
• Сначала бежим в контент блока и копируем ссылку — #opensearch
• Теперь ее вставляем в поле для ссылки, где будет открываться наш поиск
• Я рекомендую задать поисковые подсказки. Самые интересные для продажи товары (для вас), можно забить в подсказки и люди будут чаще на них нажимать и потенциально чаще заказывать

Пример использования попап блока с поиском на клиентском сайте

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

Задать подсказки для поиска

Как создать папку в Тильде

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

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

• Переходим в настройки страницы
• Вкладка «Дополнительно»
• Листаем до пункта «ПАПКА»
• Чуть ниже нажимаем «Создать новую папку»
• Все, теперь новые папки вы сможете создавать прямо в личном кабинете, над всеми папками появился значок «+»

Самый простой способ использования папок, это просто разделить их на разделы, например, в постельном белье, создать папку «евро» и туда закидывать все страницы связанные с Евро постельным бельем

Примеры моих папок в Tilda

Появился плюсик, создавать новые папки

Подключаем номер 495 или 8800

Открываем сервис Задарма2. Регистрируемся в нем и жмем Услуги —> Подключить номер3. В поиске выбираем нужный город, например, Москва4. Выбираем номер, из предложенных, можно воспользоваться поиском. Если ничего не нравится, то Обновите список номеров5. Стоимость номеров для Москвы:

• 499 номер стоит 120 руб/мес
• 495 стоит 190 руб/мес
• 8800 подключить будет бесплатно (акция у них, на момент написания статьи), а в месяц вам придется платить 790 руб. + стоимость входящих звонков около 3 руб, так как 8800 — это бесплатный номер для звонящих и оплачивает его тот, кто принимает звонки

Стоимость номеров для других регионов РФ в среднем 190 руб. После того, как забронировали номер, нужно загрузить скан паспорта. Он будет проверяться 2 дня. Или можете пройти идентификацию, через Портал ГосУслуг8. Далее, скачиваем их оф приложение, чтобы входящие для вас были бесплатны (на 8800 не распространяется)9. В итоге, все звонки вы будете принимать на своем мобильном, но звонящий будет думать, что он звонит на городской ????

Задарма. Услуги —> Подключить номер

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

HTML-карта сайта

Ее желательно делать на любом сайте, где больше 3 страниц, чтобы поисковым роботам, был доступ к любой странице сайта за 2 клика. Особенно это важно для Google.

Как сделать карту сайта?

• Создаем новую страницу на нашем сайте
• Добавляем на нее блок с заголовком Карта сайта (даем ей тег H1 настройках блока)
• Добавляем блок IX06
• Идем в контент и галочками выбираем все страницы, кроме самой карты сайта. Не добавляем в карту сайта страницы, которые мы не хотим, чтобы Yandex / Google индексировали, например, «политику конфиденциальности» или «страницу спасибо за заказ». Помимо этого, эти страницы, нужно закрыть отдельно от поисковиков в настройках страницы
• На скрине ниже, как выглядит изнутри, мой блок с картой сайта
• Теперь в подвале сайта, нужно разместить ссылку на эту страницу. Для чего это? Для того, чтобы при обходе вашего сайта, роботы сразу же обходили все страницы в 2 клика. Потому что, чем больше кликов надо сделать, чтобы добраться до какой то страницы, тем меньше у нее вес и больше вероятность, что ее поиск не проиндексирует (это как правило с большим кол-вом страниц)

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

Обычно ссылку на sitemap размещают в подвале сайта, чтобы она была доступна с любой страницы

Для сайтмапа понадобится блок IX06

Пример, как выглядит блок IX06 у меня. Не ставил галочки для тех страниц, которые я не хочу индексировать

А теперь более подробно распишу, как это сделать

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

Таблица анализа конкурентов

Вбиваем адрес анализируемого сайта -> Яндекс. Органика -> Применить

Выписываем сколько поисковых запросов в ТОП 50 в нашу таблицу

Теперь нам нужно определить динамику нашего сайта. Нам нужно проскролить сайт до «ИСТОРИЯ ВИДИМОСТИ КОНКУРЕНТОВ»14. Удаляем все сайты, оставляя нужный-наш15. Переключаемся на вкладку «Запросы В ТОП»16. Анализируем график. Нам нужно отметить «мысленную» прямую от начала графика до последнего месяца (Мегаиндекс показывает историю видимости за 2 года, этого достаточно)17. Цвет роста запросов — зеленый, если на одном уровне — серый, падение — красный. Раскрашиваем ячейку в нужный цвет18. Анализируем остальные сайты, заполняя таблицу

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

Скролим сайт до «ИСТОРИЯ ВИДИМОСТИ КОНКУРЕНТОВ»

Удаляем все сайты, оставляя нужный-наш и Переключаемся на вкладку «Запросы В ТОП»

Анализируем график от начала до конца графика и видим, что этот сайт падает

Как настроить передачу данных для онлайн-кассы?

Чтобы передавать данные о покупке в платежный сервис для онлайн-кассы:

• Используйте корзину
• Выберите нужный параметр:

  — Передавать чек без НДС— Передавать чек 0% НДС— Передавать чек 10% НДС— Передавать чек 18% НДС— Передавать чек 18/118 НДС— Передавать чек 10/110 НДС

Закрываем сайт от индексации

На время разработки нужно обязательно закрывать сайт от поисковых роботов

Для этого в «Настройки сайта» —> «SEO» —> «Запретить поисковикам индексировать сайт». Сохраняем и переопубликовываем все страницы

Прокручиваем вниз и находим «ЗАПРЕТ ИНДЕКСАЦИИ» Ставим галочку. Сохраняем и переопубликовываем все страницы

Контакты

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

• Городской номер телефона. Как его получить писал выше
• Мобильный номер телефона
• Почта
• Адрес магазина
• Карта сайта
• Режим работы

Как принимать платежи банковскими картами

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

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

Перед тем, как заключить договор с эквайринговым сервисом, необходимо пройти этап создания интернет-площадки на Тильде, а именно:

• Купить и подключить доменное имя будущего интернет-магазина
• Установить SSL-сертификат

После этого нужно связаться с платежным сервисом, который поможет подключить оплату на Тильде любыми банковскими картами, а также онлайн-кассу. Ведь продавцу важно не только принимать платежи, но и оформлять и отправлять кассовые чеки при каждой продаже товара или услуги — этого требует закон № 54-ФЗ.

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

Футер (Подвал)

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

В Tilda стандартных блоков для футера, которые удовлетворяли всем пунктам нет. Поэтому применим смекалку и модифицируем стандартный блок!Чтобы вам было понятней, чуть ниже, я прикрепил 3 минутное видео, как я делаю дизайн подвала сайта. Можете просто скопировать как у меня, просто поменяв тексты разделов)

Все по пунктам:

• Создаем новый блок, в разделе Подвал, ищем блок — FT302 Панель: логотип, иконки соцсетей, копирайт и ссылки в 3 колонки
• Теперь наш стандартный блок переделали в Zero, но настройки адаптации все сохранились
• Переходим в редактирование
• PRODUCT переименовываем в РАЗДЕЛЫ
• А под ним пункты, это будут ваши разделы сайта
• Поле, где написано EDUCATION я использую для контактной информации
• EDUCATION меняем на ИНФОРМАЦИЯ, а в пунктах пишем: О компании, Контакты, Сертификаты, Доставка и оплата
• Поле HELP меняем на номер телефона, делаем его более контрастным и даем ему линк
• Под номером телефона, указываем: График работы, Карта сайта, Политика конфиденциальности, Копирайт
• Слева, где логотип, меняем на свой лого
• Под лого, если есть у вас соцсети или мессенджеры, то указываем
• Наш подвал готов.

К политике конфиденциальности и Карте сайта, вернемся позже

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

Блок 4. Перед созданием страниц

Доставка и оплата

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

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

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

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

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

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

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

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

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

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

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

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

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

Карточка товара в Zero блоке

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

• Если вы делаете карточку товара любым способом, но не через функцию «Товары», например, через Zero, то вы расходуете лимит страниц, у которых в Tilda на платном тарифе, всего 500. Поэтому, чтобы не расходовать лимит основных страниц, рекомендую делать из через Товары. Тильда дает возможность загрузить 2500 товаров на один сайт.
• Все ссылки на созданные карточки товара, вы будете прописывать сами в ручную. И если вдруг, вы решили поменять ссылку на какую-то карточку, то придется менять ее на всех страницах, где она есть. Плюс ко всему, на каждой кнопке «В корзину», вам придется вручную вписывать цену товара, указывать название и путь к картинке
• Когда вы делаете карточку товара, через Зеро, то увеличиваете время разработки сайта, а также управление товарами. А время, это ценный ресурс 😉 И если вы, затянете с разработкой сайта, то вероятность, что сайт так и не запустите, вырастает в несколько раз

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

Какой оптимальный размер изображения для Тильды

Для фоновой или картинки на первом экране, лучше всего использовать изображение хорошего качества, я рекомендую загружать в разрешении от 1600 px до 1920 px.

Больше нельзя, Tilda все равно их будет сжимать, а меньше не стоит, потому что качество будет плохое и первое, что увидят пользователи, когда перейдут на ваш интернет-магазин — это плохого качества изображение и впечатление может быть испорчено!

Запомните, картинка не должна весить больше 200 кб. Сжимайте ее с помощью сервиса, про который я говорил пунктом выше.

Для фото товара, можно использовать картинки маленького разрешения. От 500 до 900 пикселей. Это при условии, что фото товара у вас не на весь экран. Если фото товара на весь экран, то правила для фоновой картинки распространяется и на товарную фотку.

Конструктор Политики конфиденциальности

Конструктор находится по этой ссылке. Будьте внимательны, конструктор доступен только для России.

Внутри все очень просто.

• Заполняете все поля, которые вам предлагает платформа.
• В конце, нажимаете на кнопку, скопировать
• Создаете новую страницу на сайте
• Называете ее политика конфиденциальности
• Вставляете скопированный текст
• Готово!

Заполняете все поля для политики

Копируете весь текст в буфер обмена

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

Теперь нам надо подключить платёжную систему. Для этого выйдем из каталога и перейдем на страницу редактирования сайта. Чтобы вернуться, надо нажать на пункт «Мои Сайты» в основном меню.

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

И выберите из перечня платёжных сервисов те, с которыми вы работаете.

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

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

Вот и все технические настройки. Вам осталось сохранить изменения, и интернет-магазин на Тильде готов. В следующем материале поговорим о его контентном наполнении. Больше полезных материалов — в Клубе «Маркетинга с азов» и Телеграм-канале.

Ирина Жданова, специалист в Тильде, лоукостер сайтов, копирайтер и маркетолог.

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

Важные настройки и куда смотрим

• Идем в Представление в поиске, Региональность и привязываем регион. Самая сильная региональная привязка, через Яндекс.Бизнес.
• Идем в индексирование, страницы в поиске. Смотрим историю и исключенные
• Смотрим, чтобы не было статуса: Малоценная или маловостребованная страница. Это значит, что Яша проиндексировал страницу и выкинул ее из индекса, по какой то причине. Обычно, эти страницы похожи по содержанию на другие на вашем сайте. Проще говоря, одинаковый контент. В двух словах об этом противном статусе не расскажешь. Все статусы я подробно разбираю в своем курсе, Бешеное SEO на Тильде
• В разделе Индексирование — Переобход страниц, мы отправляем страницы на переобход, чтобы робот их быстрее обошел. Есть лимит в сутки, обычно у небольших свежих сайтов это 30 страниц

Привязываем регион в вебмастере

Идем в индексирование, страницы в поиске. Смотрим историю и исключенные

В разделе Индексирование — Переобход страниц, мы отправляем страницы на переобход, чтобы робот их быстрее обошел. Есть лимит в сутки, обычно у небольших свежих сайтов это 30 страниц

В диагностике сайта, смотрим оповещения от Яндекса о различных ошибках

В разделе Безопасность и нарушения, смотрим на наличие санкций от Яндекса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы создадите свой сайт

интернет магазина бесплатно с нуля

на конструкторе Тильда, под органический

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

УСЛУГИ

Обычно, карточка товара в интернет-магазинах, самая насыщенная по необходимым элементам на этой странице. Но в Tilda, далеко не все можно внедрить из того, что необходимо. Но как правило то, что можно внедрить — достаточно!

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

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

Идем в настройки сайта –> Действия –> Передать сайт –> Указываем почту заказчика, на которую зарегистрирована Tilda. ВАЖНО!!! Передать сайт мы сможем только на проплаченный аккаунт. Это сделано для того, чтобы было невозможно постоянно бесплатно пользоваться Тильдой, а только в течение 2 недельного периодаПосле того, как вы передали сайт заказчику, вы его не удаляйте, он сам пропадет, когда заказчик подтвердит получение в личном кабинете

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

Если вы хотите удалить сайт, идите в настройки сайта –> Декствия –> Удалить сайт. Сайт на сервере будет храниться еще 7 дней, потом его восстановить будет невозможноСнять весь сайт с публикации нельзя. Только каждую страницу по отдельности. Или же поставить пароль на сайт в разделе Еще

Я знаю очень много людей, которые зарабатывают исключительно создавая сайты на Тильде

Никаких проблем нет. Я лично разрабатывал интернет-магазин, у которого на данный момент 500 страниц

Insales — это очень мощная платформа для создания интернет-магазинов. Но я не сильно знаком с этой платформой, поэтому мне сложно сравнивать. Могу сказать, что функционал Tilda позволяет делать большие сайты, интернет-магазины с хорошей структурой, практически без ограничений. Из аналогов, на данный момент, могу сказать, что достойная платформа, с которой я знаком, это Creatium

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

В остальном, да, я рекомендую делать интернет-магазины на Тильде

На биржах типа, freelance, kwork, workzilla и подобные, разработку интернет магазина на Тильде можно будет найти по минимальной цене. В общем и целом, ценовая политика у меня и моих коллег, которых я знаю, варьируется от 40 тыс рублей до 200 тыс ₽

Подпишитесь на новинки

На канале в телеграм вышла новая статья: Создание и SEO продвижение сайта на Тильде. Все по шагам

О компании

Чем лучше вы опишете на этой странице о своем магазине, тем лучше. Я рекомендую не писать большие портянки текста, а разделять их, например, картинками, фото о компании. Можете посмотреть пример оформления, как у меня на странице. Заметьте, текста очень много, и я его разбивал на смысловые блоки, чтобы читать было удобно. Для магазина, не нужно такого огромного текста, можно обойтись 2-4 абзацами. Но только, пожалуйста, не пишите тексты в стиле:

• Огромный опыт работы
• Клиентоориентированность
• Мы лучшие и тд.

Старайтесь писать только факты

Якорные ссылки в тильде

Кстати, навигация на этой странице, у меня реализована через якорные.

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

Как их использовать?Например, вы хотите, чтобы определенная кнопка в меню вела на какой то блок с акцией

Для этого нужно дать cсылку нашей кнопки. Сделать это можем двумя способами:

• Нажать на кнопку «Выбрать блок»
• Вставить его в поле ссылки

Создаем кнопку для якорной

Идем настройки блока —> Копируем ID блока

Регистрация

Также, вы можете получить бонус +1 месяц, если зарегистрируетесь по этой ссылке и оплатите тариф

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

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

Блок 1. Правильная структура сайта

Как сделать функциональный и симпатичный интернет-магазин на Тильде

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

Осенью 2019 года разработчики Тильды выпустили подключаемый модуль «каталог товаров». Они совместили в нём всё лучшее из вордпресcовского Woocommerce, избавившись от недостатков вроде сложного подключения оплаты.

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

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

С чего же начать создание интернет-магазина на Тильде? Я бы поделила всю работу над сайтом на техническую часть и контентную. Сегодня в статье — часть техническая. Мы с вами пройдём пошаговый путь от создания меню и каталога до подключения платёжных сервисов.

Как подключить Яндекс. Карты

Обычно карту подключают на странице контакты, иногда в футере (подвале) сайта. Для этого используют блоки: T143, CN401, CN402, CN402A, CN403Сразу скажу, что недостаточно просто вписать свой адрес в настройках карты в Tilda, для того, чтобы нормально отображалась ваша организация на картах, нужно получить специальный ключ

Теперь по пунктам от и до:

• Идем в кабинет разработчика
• Нажимаем на кнопку «Подключить API»
• Заполняем небольшую анкету от Yandex
• Откройте настройки ключа по кнопке «Изменить»
• Сохраняем
• Ключ получен. Номер ключа будет указан под названием ключа в списке. Значение ключа нужно скопировать
• Вставляем наш ключ
• Сохраняем и переопубликовываем страницы

Более подробная инструкция в Справочном центре Тильды

Идем в кабинет разработчика

Заполняем небольшую анкету от Яндекса

Откройте настройки ключа по кнопке «Изменить»

Ключ получен. Номер ключа будет указан под названием ключа в списке. Значение ключа нужно скопировать

Снимаем запрет с индексации интернет-магазина

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

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

Для этого Переходим в «Настройки сайта» —> «SEO» —> «Запретить поисковикам индексировать сайт» Убираем галочку. Сохраняем и переопубликовываем все страницы

Убираем галочку «запретить индексировать сайт»

Логотип. Сервис Канва (Canva)

Регистрируемся в сервисе Canva2. Здесь вы можете найди логотипы под различные тематики3. Выбираем раздел Логотипы4. Воспользуемся поиском, можно по видам сайтов, а можно и по тематике. Например, магазин или очки5. Выбираете из понравившихся6. В правой части экрана (основной), можно редактировать наш логотип, менять тексты, добавлять/убирать/переносить элементы. После того, как сделали все правки, выгружаем логотипДля этого:

• Выбираем страницу с логотипом или сам элемент
• Тип файла PNG

Все, в итоге у вас есть логотип

В Канве можем искать по логотипам и тематикам

Например, по типам сайтов

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

Страница Спасибо

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

Для быстрого и тем более, первого запуска вашего ИМ, я рекомендую без этой страницы. А уж когда пойдут первые продажи, тогда уже сможете протестировать идею со страницей Спасибо)

Меню на десктопе

Давайте для простоты сделаем меню из одного блока. На мой взгляд самые лучшие, это ME301 или ME302, в зависимости от того, где вы хотите, чтобы располагался логотип, слева (301 блок) или по центру (302)

Я люблю стандарты, поэтому выбираю МЕ 301 с логотипом слева. В нем есть все, что необходимо для хорошей, а главное удобной навигации!

Давайте пройдемся подробнее

• Нажимаем на + (плюс), чтобы добавить новый блок. Если у вас на странице еще нет ни одного блока, то нажимаем на «Все блоки»
• Выбираем раздел «Меню» и нужный блок
• В добавленном блоке, жмем «Контент»
• Выбираем раздел «Логотип». Так как мы на позапрошлом этапе сделали логотип в Канве, то удаляем текст в поле «Заголовок» и загружаем наше лого. В поле «Ссылка», ставим «/» (слэш, без кавычек). Это для браузера значит, что при клике на лого, он перейдет на Главную
• Далее в «Контенте» в разделе Дополнительно и в поле описание пишем номер телефона
• В разделе «Кнопки» в первой кнопке пишем текст «Обратный звонок» ссылку пока не ставим
• Теперь идем в «Список пунктов меню». В первом пишем «Каталог» или «Разделы», а остальные пункты будут коммерческими факторами (о компании, доставка и оплата, контакты, акции и тд.)
• Далее определяемся с подменю. Если у нас разветвленная структура, то добавляем подменю второго уровня ME601B. Если не сильно большая структура, то можем прям в этом же меню добавить подпункты к Каталогу. (смотрите скрины ниже)
• Если вы добавили подменю отдельным блоком, то в ссылке в пункте Каталог, нужно указать ссылкувида #submenu:details

• В основных настройках блока в «ПОВЕДЕНИЕ ПОЗИЦИОНИРОВАНИЯ МЕНЮ» ставим «Статика»
• В «РАЗМЕР КОНТЕЙНЕРА МЕНЮ» ставим 12 колонок, если хотим, чтобы наши пункты меню, номер телефона и лого не растягивались на всю ширину экрана
• Переходимв в ОПИСАНИЕ и задаем описанию цвет. Я задал белый
• Листаем в самый низ настроек «ДИАПАЗОН ВИДИМОСТИ НА УСТРОЙСТВАХ» и ставим бегунок на от 980 до MAX
• Остальное можно ничего не менять

Добавляем новый блок на страницу

В разделе МЕНЮ выбираем МЕ301/302

Удаляем текст для лого, загружаем картинку и ставим ссылку на логотип, который ведет на Главную

в Дополнительно в ОПИСАНИИ пишем номер телефона и под ним Обратный звонок

Убираем ссылки и тексты из Кнопок

Если большое разветвленное меню, то добавляем блок с подменю МЕ601B

Если небольшое, то просто добавляем пункты второго меню в блоке 301/302

В основных настройках блока поставить Статика и контейнер 12 колонок

Tilda и Мой склад

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

Настройка оплаты на Тильде через сервис CloudPayments

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

В личном кабинете CloudPayments нужно перейти на вкладку «Сайты».

Зайти в настройки сайта, на который нужно установить платежный сервис.

Скопировать Public ID и пароль для API в настройках сайта.

Ввести скопированный номер в поле «Публичный ключ».

Принимать онлайн-платежи банковскими картами и повышать конверсию.