Подписывайтесь
10.05.2022

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

Вы создадите свой сайт интернет магазина бесплатно с нуля на конструкторе Тильда, под органический SEO трафик
Время чтения статьи 45 минут.
С подробными видео

Содержание

Блок 0. Вступление

Вступление! Важно

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

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

Регистрация

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

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

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

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

Как заложить правильную структуру сайта
Поиск лидеров

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

Самый важный этап работы — это правильно найти лидеров ниши.
Для этого:
  1. Берем коммерческий запрос, который характеризует нашу тематику. Например, Купить солнцезащитные очки
  2. Ищем несколько сайтов из выдачи ТОП-10. Важно, не смотрим рекламную выдачу, а только органическую
  3. Регистрируемся в сервисе Мегаиндекс по этой ссылке. Далее идем в инструмент «Видимость» по этой ссылке и по очереди вбиваем наши найденные сайты из пункта 2
  4. Выписываем 3-5 сайтов, на основании которых будем строить структуру в программе xmind
  5. Выписываем повторяющиеся элементы (которые есть у всех лидеров)

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

Сразу скажу, это сложно расписать текстом, поэтому, прилагаю видео по анализу и поиску конкурентов из моего большого платного курса по Созданию сайтов на Тильде под SEO
1. Вбиваем в поисковую строку Яндекса товар, который нам необходим
2. Не важно в каком регионе мы будем работать, обязательно ставим город Москва, т к тут самая большая конкуренция и внедрены самые прогрессивные технологии
3. Открываем сайты, в которых нет рекламы
4. Смотрим, продается ли на сайте тот товар, который продаем мы
5. Если да, то выписываем эти сайты в таблицу Excel, скачать шаблон вы можете здесь
6. Таблица должна выглядеть таким образом
7. Идем в сервис Мегаиндекс: https://ru.megaindex.com/
8. Выбираем «Видимость сайта»
9. Вводим ссылку сайта из нашей таблице, далее «Применить»
10. В параметре должно быть указано «Яндекс Органика Москва»
11. Смотрим, сколько запросов по поиску
12. Выписываем данные в нашу таблицу
13. Теперь нам нужно определить динамику нашего сайта.
Нам нужно проскролить сайт до «ИСТОРИЯ ВИДИМОСТИ КОНКУРЕНТОВ»
14. Удаляем все сайты, оставляя нужный-наш
15. Переключаемся на вкладку «Запросы В ТОП»
16. Анализируем график. Нам нужно отметить «мысленную» прямую от начала графика до последнего месяца (Мегаиндекс показывает историю видимости за 2 года, этого достаточно)
17. Цвет роста запросов — зеленый, если на одном уровне — серый, падение — красный. Раскрашиваем ячейку в нужный цвет
18. Анализируем остальные сайты, заполняя таблицу

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

Выписываем повторяющиеся элементы

Открываем шаблон таблицы, кто не открыл еще, то вот она
И начинаем выписывать каждый элемент на сайте:
  • шапку,
  • подвал,
  • главную страницу,
  • страницу Раздела,
  • карточку товара

Об это подробнее я рассказываю в видео вот здесь

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

  1. Сначала нужно выписать в отдельный лист Excel элементы шапки всех сайтов
  2. Выделяем столбец —> «Сортировка от А до Я»
  3. Наши элементы выстроились в алфавитном порядке, так нам будет удобно их считать. Считаем, сколько одинаковых элементов в шапке
  4. Выделим те элементы, которые будем внедрять (это элементы, которых больше всего), их отмечаем оранжевым
  5. Все остальное удаляем, оставляя только выделенные элементы
  6. Проделываем все с остальными элементами

Блок 2. Технические настройки

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

1. Регистрируем. Я регистрирую обычно на сайте https://www.reg.ru/
2. В Самом верху в шапке, в окне «Введите домен» вводите желаемый адрес сайта и нажимаете «Подобрать»
3. Если домен занят, то ниже будет написано об этом, а еще ниже, он предложит другие похожие варианты доменов. Я не рекомендую их выбирать

Кстати, я рекомендую, выбирать домены в зоне RU или РФ
4. Подбираем другой адрес, который будет свободен.
5. Но не спешим его покупать. Нам надо проверить его историю. Часто бывает, что хорошие, красивые доменные имена, зачастую убитые предыдущими владельцами, либо запрещенной тематикой, либо неудачным продвижением.
6. Как его проверить? Идем на сайт Вебархив, вбиваем адрес желаемого нашего домена и смотрим, есть ли архивные записи ниже
7. Если есть, то отказываемся от покупки этого, нам нужен чистый
8. После того, как подобрали и проверили, возвращаемся обратно на сайт регистратора, нажимаем на значок корзины и переходим к оплате
9. Вам активно будут предлагать различные услуги, отказываемся от них, нам нужно только доменное имя. В итоге стоимость у вас должна быть 199 руб

Настраиваем и подключаем домен к Tilda

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

  1. Идем в РЕГ. РУ, в раздел Мои домены
  2. Выбираем наш домен
  3. В разделе DNS-серверы и управление зоной, жмека на кнопку «Изменить»
  4. Если вы при регистрации не указали DNS-серверы, то выбираем от REG RU
  5. В разделе «ресурсные записи» удаляем все записи
  6. Добавляем новую А-запись в поле Subdomain указываем - @ в поле IP копируем из ЛК Тильды, где это искать, я рассказал в видео, выше. «Готово»
  7. Добавляем еще одну А-запись в поле Subdomain указываем - www IP такой же как и выше
  8. Ждем. Обычно это занимает несколько часов. Максимально до 48 часов

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

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

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

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

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

1. Для выпуска SSL-сертификата, нужно обязательно дождаться, когда ваш сайт будет открываться на вашем домене. Если дождались то читаем далее.
2. В настройки сайта —> SEO —> НАСТРОЙКА HTTPS
3. —> на бегунок «Защищенный протокол»
4. Ждем около 5 минут
5. Жмем на «Проверить доступность сайта с защищенным соединением»
6. Должен открыться ваш сайт, перед доменом должен быть замок или https

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

1. Идем настройки сайта —> SEO —> РЕДИРЕКТЫ ДЛЯ WWW, HTTPS
2. Внутри ставим галочки на:
— Редирект с WWW на основной домен
— Редирект с HTTP на HTTPS
3. Спускаемся ниже и ставим галочку на «ОПРЕДЕЛЕНИЕ ОСНОВНОГО АДРЕСА САЙТА В МЕТА-ФАЙЛАХ»
4. Сохраняем и переопубликовываем страницы

Доменная почта на Тильде

Регистрируем почту на домене вида info@ваш-домен.ru

1. Открываем Яндекс Бизнес
2. Яндекс предлагает купить тарифы, но листаем ниже, так как у него есть бесплатный тариф, которого нам хватит за глаза, далее на кнопку «Попробовать с ограничениями»
3. Выбираем аккаунт
4. Вставляем ссылку на наш сайт
5. Далее нам нужно подтвердить наше доменное имя, для этого выбираем в Яндексе «Подтвердить с помощью HTML-файла на вашем сайте»
6. Скачиваем файл
7. Открываем этот файл и копируем текст после Verification:
8. Идем в настройки сайта —> Еще —> ПОДТВЕРЖДЕНИЕ ДОМЕНА ДЛЯ ЯНДЕКСА ЧЕРЕЗ HTML-ФАЙЛ:
9. Вставляем скопированный текст из скачанного файла
10. Сохраняем и переопубликовываем все страницы
11. Открываем вкладку с Яндекс Бизнесом —> «Проверить»
12. Ждем, когда будет написано — Права на домен подтверждены

Далее настраиваем MX-записи, чтобы письма от нашего ящика, не попадали в спам
13. Для этого листаем ниже, где «Настройка MX-записи»
14. Копируем из поля «Значение» текст вида: mx.yandex.net.
Приоритет: 10
Имя поддомена (хост): @
Все, больше нам ничего не надо
15. Идем в наш регистратор REG RU
16. Выбираем наш домен
17. DNS серверы и управление зоной
18. Ресурсные записи —> Добавить запись
19. Добавляем MX-запись с данными:
Subdomain: @
Priority: 10
Mail Server: тот, который вы скопировали из Яндекс.Бизнес
20. Готово
21. В Яндекс.Бизнес Жмем «Проверить MX-запись»
22. Ждем до 3-х суток (тут действительно может пройти много времени, не пугайтесь)
  • После того, как доменное имя подтверждено, у вас появится зеленая галочка (Подтвержден)
  • Открываем раздел «Пользователи» и добавляем пользователя
  • Создаем новый аккаунт и заполняем все поля
  • Поле логин, это ваш будущий адрес почты. Я обычно пишу info или sale.
  • Когда все поля заполнены, у вас появится новый пользователь
  • В почту заходите с логином таким, каким его писали на прошлом шаге, например, если писали info, то будет логин info@вашдомен.ру

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

1. Открываем сервис Задарма
2. Регистрируемся в нем и жмем Услуги —> Подключить номер
3. В поиске выбираем нужный город, например, Москва
4. Выбираем номер, из предложенных, можно воспользоваться поиском. Если ничего не нравится, то Обновите список номеров
5. Стоимость номеров для Москвы:
  • 499 номер стоит 120 руб/мес
  • 495 стоит 190 руб/мес
  • 8800 подключить будет бесплатно (акция у них, на момент написания статьи), а в месяц вам придется платить 790 руб. + стоимость входящих звонков около 3 руб, так как 8800 - это бесплатный номер для звонящих и оплачивает его тот, кто принимает звонки
6. Стоимость номеров для других регионов РФ в среднем 190 руб.
7. После того, как забронировали номер, нужно загрузить скан паспорта. Он будет проверяться 2 дня. Или можете пройти идентификацию, через Портал ГосУслуг
8. Далее, скачиваем их оф приложение, чтобы входящие для вас были бесплатны (на 8800 не распространяется)
9. В итоге, все звонки вы будете принимать на своем мобильном, но звонящий будет думать, что он звонит на городской ????

Блок 3. Шапка и подвал

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

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

Коммерческие разделы

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

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

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

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

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

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

Откуда это пошло и почему они важны?

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

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

Видео про коммерческие факторы для интернет магазина

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

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

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

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

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

Давайте пройдемся подробнее
  1. Нажимаем на + (плюс), чтобы добавить новый блок. Если у вас на странице еще нет ни одного блока, то нажимаем на «Все блоки»
  2. Выбираем раздел «Меню» и нужный блок
  3. В добавленном блоке, жмем «Контент»
  4. Выбираем раздел «Логотип». Так как мы на позапрошлом этапе сделали логотип в Канве, то удаляем текст в поле «Заголовок» и загружаем наше лого. В поле «Ссылка», ставим "/" (слэш, без кавычек). Это для браузера значит, что при клике на лого, он перейдет на Главную
  5. Далее в «Контенте» в разделе Дополнительно и в поле описание пишем номер телефона
  6. В разделе «Кнопки» в первой кнопке пишем текст «Обратный звонок» ссылку пока не ставим
  7. Теперь идем в «Список пунктов меню». В первом пишем «Каталог» или «Разделы», а остальные пункты будут коммерческими факторами (о компании, доставка и оплата, контакты, акции и тд.)
  8. Далее определяемся с подменю. Если у нас разветвленная структура, то добавляем подменю второго уровня ME601B. Если не сильно большая структура, то можем прям в этом же меню добавить подпункты к Каталогу. (смотрите скрины ниже)
  9. Если вы добавили подменю отдельным блоком, то в ссылке в пункте Каталог, нужно указать ссылкувида #submenu:details
Настройки блока
  1. В основных настройках блока в «ПОВЕДЕНИЕ ПОЗИЦИОНИРОВАНИЯ МЕНЮ» ставим «Статика»
  2. В «РАЗМЕР КОНТЕЙНЕРА МЕНЮ» ставим 12 колонок, если хотим, чтобы наши пункты меню, номер телефона и лого не растягивались на всю ширину экрана
  3. Переходимв в ОПИСАНИЕ и задаем описанию цвет. Я задал белый
  4. Листаем в самый низ настроек «ДИАПАЗОН ВИДИМОСТИ НА УСТРОЙСТВАХ» и ставим бегунок на от 980 до MAX
  5. Остальное можно ничего не менять

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

Нажимаем + и идем в раздел «Форма и кнопка»
Выбираем блок BF502N Popup: форма с множеством полей
В ней, оставляем только блоки с именем и номером телефона. Я рекомендую убрать картинку
  1. Копируем адрес для открытия блока, вида #popup:myform
  2. Идем в контент нашего меню и в разделе «Дополнительно», еще раз выделяем текст Обратный звонок, нажимаем на значок ссылки и вставляем нашу скопированную ссылку из формы для обратного звонка
  3. В настройках можете указать цвет и подчеркивание, если оно нужно
  4. Сохраняете
Чтобы телефон был кликабельным надо дать ему ссылку, как для Обратного звонка, только в link указать так:
tel:74951234567
номер телефона начинать с 7 (без плюсов, пробелов)

Меню в мобильной версии

Для мобильного меню, я рекомендую использовать блок ME403. Заполняем его по типу блока как для компьютеров

В настройках блока МЕ 403, в самом низу «ДИАПАЗОН ВИДИМОСТИ НА УСТРОЙСТВАХ» указываем от 0 до 980 пикселей

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

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

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

Якорные — это такие ссылки, которые ведут на определенный блок в рамках одной страницы. И выглядят вот так: #block12345
Чаще всего их можно встретить на лендингах (одностраничных сайтах), где вся информация расположена на одной странице.
В интернет магазинах их тоже можно использовать, тут вы ограничены только вашим воображением.

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

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

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

Для этого нужно дать cсылку нашей кнопки. Сделать это можем двумя способами:
  1. Нажать на кнопку «Выбрать блок»
  2. Прописать в ручную. Для этого, нам нужно перейти в настройки блока, на который хотим дать ссылаться, прокрутить в самый низ настроек и скопировать Block id
  3. Вставить его в поле ссылки

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

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

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

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

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

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

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

Все по пунктам:
  1. Создаем новый блок, в разделе Подвал, ищем блок — FT302 Панель: логотип, иконки соцсетей, копирайт и ссылки в 3 колонки
  2. Идем в настройки этого блока, скролим вниз и нажимаем «Конвертировать в Zero Block». ВАЖНО!!! Сначала конвертируем, а потом вносим правки, иначе вы потеряете все изменения
  3. Теперь наш стандартный блок переделали в Zero, но настройки адаптации все сохранились
  4. Переходим в редактирование
  5. PRODUCT переименовываем в РАЗДЕЛЫ
  6. А под ним пункты, это будут ваши разделы сайта
  7. Для того, чтобы начать править каждый пункт, надо два раза кликнуть на него, изменить текст и поставить ссылку. И так для каждого
  8. Поле, где написано EDUCATION я использую для контактной информации
  9. EDUCATION меняем на ИНФОРМАЦИЯ, а в пунктах пишем: О компании, Контакты, Сертификаты, Доставка и оплата
  10. Поле HELP меняем на номер телефона, делаем его более контрастным и даем ему линк
  11. Под номером телефона, указываем: График работы, Карта сайта, Политика конфиденциальности, Копирайт
  12. Слева, где логотип, меняем на свой лого
  13. Под лого, если есть у вас соцсети или мессенджеры, то указываем
  14. Наш подвал готов.
К политике конфиденциальности и Карте сайта, вернемся позже

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

Где искать картинки за которые не прилетят авторские

Тут все достаточно просто. Самые важные правила:
  1. Не берем картинки с Yandex и Google картинок
  2. Не тырим с чужих сайтов. Кстати, когда вы берете с Яндекс картинок, то это равносильно тому, что вы у кого то на сайте их взяли. Так как в эти хостинги они попадают именно из сайтов
  3. Берем только с сервисов, где есть коммерческая лицензия. То есть вы можете использовать эти картинки бесплатно для своих коммерческих нужд. Еще есть лицензия Creative Commons - это для личного использования или указания авторства

Бесплатные сервисы с фото для коммерческого использования

Я поделюсь с вами сервисами, которыми сам пользуюсь или слышал от своих коллег.
Картинки:
  1. Unsplash
  2. Pixabay
  3. FreePNG
  4. PNGTree
  5. IMGBIN
  6. Gratisography
  7. Little Visuals
  8. Foodiesfeed
Обычно первых двух сервисов мне хватает

Иконки:
  1. Freepik
  2. Flaticon
  3. Thenounproject
  4. Icon-icons
  5. Icons8
Есть интересный сервис, который убирает фон. Он называется Remove BG. Он работает даже в бесплатной версии)
А также, рекомендую сжимать фото, перед загрузкой в Тильду, чтобы ваши страницы были легче и быстрее загружались. Для этого я использую бесплатный сервис TinyPNG

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

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

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

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

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

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

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

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

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

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

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

Интернет-магазин состоит из типовых страниц:
  • Главная
  • Страница Раздела
  • Карточка товара
Не берем страницы, которые нужны для коммерческих факторов, типа контактов, о нас и тд.

Большинство страниц интернет-магазина — это Карточки товаров, они занимают около 90% всех страниц сайта.
Страниц разделов гораздо меньше, на них размещаются товары.
Ну и Главная страница одна!
Теперь давайте разберем их.

Главная

На этапе, где мы выписывали коммерческие элементы для каждого типа страниц, мы выписали, из чего должна состоять наша Главная страница.

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

Страница Раздела

Принцип такой же, как и для Главной страницы

У меня страница раздела состоит из таких элементов:
  • Хлебные крошки
  • Заголовок
  • Листинг товаров
  • Разделы
  • Фильтр
  • Подписаться
Обычно, это стандартный набор для такого типа страницы.

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

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

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

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

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

Как загрузить файл на Тильду?

Если это не картинка, то никак!
Если хотите загрузить файл, то загрузите его сначала в облако (Яндекс.Диск или Google), нажмите «Поделиться» и скопированную ссылку вставьте на страницу в Тильде, например, в кнопку «Скачать PDF»

Карточка товара

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

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

  • Хлебные крошки (нельзя, так как товары формируются автоматом, через функционал «Товары»)
  • Фотография
  • Кнопка «Купить в 1 клик»
  • Кнопка «В корзину» (можно одну любую кнопку, либо с модификацией)
  • Описание
  • Характеристики
  • Артикул
  • Цена
  • Выбор размера
  • Наличие
  • Доставка
  • Отзывы (есть ограничения по внедрению)
  • Рекомендованные товары
  • Акция
  • Другие цвета
  • Нашли дешевле
  • Преимущества (если только текстом)
  • Выбор кол-ва
  • Сертификаты (нельзя)
  • Комментарии (нельзя)

Добавление кнопки в карточку

Кнопка в товаре добавляется автоматически. Если вам нужно еще кнопок, то для этого прочитайте вот эту статью – Как добавить вторую кнопку в карточку товара Тильда

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

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

Табы в товаре:

раскрывающийся список, вкладки

В товаре, можно настроить отображение дополнительного блока с информацией
Можно сделать в виде раскрывающихся списков (аккордеона) и вкладок. Это делается в настройках блока с товарами, POP-UP –> ТАБЫ В КАРТОЧКЕ ТОВАРА –> В виде табов / В виде раскрывающихся карточек

Контент в этом блоке, настраивается в самих карточках товара в разделе Товары

В табах есть несколько типов вкладок:
  1. Информация — это уникальная информация для каждого товара. Тут вы указываете описание товара, которое относится только к данному товару. Этот блок хорошо подходит для уникализации товаров в интернет магазине, под новый алгоритм Yandex – Яти
  2. Шаблон — это какой-то шаблонный текст, который подходит для всех товаров. Например, доставка и оплата, Как заказать и тд. Можно создавать несколько различных шаблонов и их использовать на определенных товарах или сразу на всех
  3. Информация из поля: Текст — этот вид служит для того, чтобы разгрузить верхнюю часть товара и перенести его вниз, чтобы сфокусировать посетителя магазина на конверсионных действиях, это может быть - Положить товар в корзину или Купить его
  4. Информация из раздела: Характеристики — по сути тоже самое, что и третий пункт. Только отображает информацию из характеристик товара

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

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

Калькулятор

Калькулятор в Тильде можно реализовать практически любым блоком, где есть форма, на данный момент такие: BF204N, BF310N, BF311N, BF402N, BF403, BF502N

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

Мы добавляем эти поля в форму, например,
одно поле будет такое: укажите высоту окна,
второе — укажите ширину окна
Далее добавляете поле, калькулятор для отображения Итоговой (примерной) стоимости монтажа, а в окне Формула для вычисления пишем формулу. Тут стандартные символы: + (сложение), - (вычитание), * (звездочка - это умножение), / слэш - деление). ТАк же можно использовать скобки, %
А также, результат вычисления, можно добавить в корзину

ВАЖНО!
Для того, чтобы калькулятор считал, нужно для каждого поля, который будет участвовать в расчете, прописать ИМЯ ПЕРЕМЕННОЙ латиницей

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

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

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

Форма заявки. Прямая оплата без корзины

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

Блок 6. Остальные страницы

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

Sitemap (карта сайта)

Про сайтмап (карту сайта) я подробнее писал в статье про техническую оптимизацию на Тильде
Расскажу вкратце, зачем нужна эта страница, как ее делать и отличие html-карты сайта от xml-карты

XML-карта сайта

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

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

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

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

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

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

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

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

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

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

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

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

Письмо после оплаты

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

О компании, контакты, доставка и оплата

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

О компании

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

Контакты

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

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

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

Яндекс Гугл Карты

Так как Гугл сделал свои карты для бизнеса платными, рассматривать его не будем. Расскажу про Яндекс.

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

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

Теперь по пунктам от и до:
  1. Идем в кабинет разработчика
  2. Нажимаем на кнопку «Подключить API»
  3. Выбираем пункт «Javascript API и HTTP Геокодер»
  4. Заполняем небольшую анкету от Yandex
  5. Как увидим текст: API интерфейс подключен, жмем «Перейти к API»
  6. Откройте настройки ключа по кнопке «Изменить»
  7. В поле «Ограничение по HTTP Referrer» впишите доменное имя вашего сайта. На второй строке добавьте домен «tilda.cc», чтобы карта отображалась в Редакторе Тильды.
  8. Сохраняем
  9. Ключ получен. Номер ключа будет указан под названием ключа в списке. Значение ключа нужно скопировать
  10. Переходим в Настройках сайта → Еще → Ключи от API карт
  11. Вставляем наш ключ
  12. Сохраняем и переопубликовываем страницы
Более подробная инструкция в Справочном центре Тильды

Отзывы

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

Блок 7. Каталог. Подключение и работа с Товарами

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

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

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

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

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

Вебмастер

Что такое вебмастер и для чего он нужен?
Это сервис от Яндекса, который находится по адресу https://webmaster.yandex.ru/, с его помощью, мы следим за нашим сайтом, "Яша" сообщает о различных ошибках, например, сайт закрыт от индексации, нет фавиконки, не привязан регион, у сайта много дублей страниц, малополезного контента, страницы со статусом МПК и много чего другого.

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

  1. Переходим по ссылке в Webmaster
  2. Нажимаем на плюс и добавляем сайт
  3. Выбираем подтверждение, через метатег, копируем, то что в кавычках, после content="
  4. Идем в настройки сайта Tilda, Еще
  5. Листаем вниз, ищем поле, подтверждение домена яндекса через метатег
  6. Вставляем скопированный текст
  7. Публикуем страницы
  8. Возвращаемся в вебмастер и нажимаем Проверить

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

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

Метрика

В этом разделе разберем темы:
  • Настройка целей
  • Работа с отчетами
  • Tilda статистика

Блок 9. Финальная настройка

Настраиваем, куда приходят заявки:

почта, телеграм, google-таблицы и тд

Интеграция с CRM. Работа в ней

Как подключить Битрикс 24 к Тильде

В Bitrix24 есть встроенная интеграция с Тильдой. Для этого в личном кабинете Bitrix 24 в «Еще» → «Маркет». В строке поиска укажите Tilda Publishing Forms. Нужно установить приложение и действовать по инструкции в самом Битриксе

Tilda и Мой склад

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

Онлайн чат

Интеграция с онлайн чатом у платформы есть со следующими сервисами:
  • Carrot quest, реализовано это в блоке T884
Вам нужно будет зарегистрироваться на сайте https://www.carrotquest.io/
Сервис сгенерирует специальный скрипт, его нужно будет скопировать и вставить в соответствующее поле

  • Callbackhunter - блок T128
  • JivoSite - блок T133
  • Chatra - T138
Все эти сервисы интегрируются по такому же принципу, как и первый

Я обычно пользуюсь виджетом для онлайн чатов, там можно сделать ссылки на все популярные мессенджеры, там общаться клиентам удобней, а для вас это абсолютно бесплатно:
  • Телеграм (telegram)
  • WhatsApp
  • Viber
  • Vk (вконтакте)
  • Skype
  • E-mail
  • Просто номер телефона

Платежные системы и промокоды

Подключение сервисов доставки СДЭК, Почта России

Рассылка в Тильда.

Возможны ли рассылки в Tilda

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

У конструктора есть интеграция с популярными сервисами рассылок:
  • MailChimp
  • SendinBlue
  • Mailerlite
  • GetResponse
  • UniSender
  • Или интегрировать свой

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

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

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

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

Как убрать надпись сделано на тильде

Убрать надпись Made On Tilda можно только при любом оплаченном тарифе на год, то есть Personal или Business
Если у вас этот пункт выполнен, то идем в настройки сайта –> Еще –> PLATFORM LABEL –> Не выводить

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

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

Блок 10. Важные вопросы

Как сохранить сайт на Тильде?
В самом редакторе, сайты на Тильде сохраняются автоматически.
Если же вы хотите сохранить сайт, на компьютере, то просто так это не получится. Экспорт исходного кода, доступно только на Бизнес тарифе. И вы должны понимать, что экспортируются только статичные файлы верстки, формы, приемщики данных работать не будут
Как снять / удалить с публикации сайт на тильде?
Если вы хотите удалить сайт, идите в настройки сайта –> Декствия –> Удалить сайт. Сайт на сервере будет храниться еще 7 дней, потом его восстановить будет невозможно
Снять весь сайт с публикации нельзя. Только каждую страницу по отдельности. Или же поставить пароль на сайт в разделе Еще
Можно ли заработать на Тильде?
Да. Я знаю очень много людей, которые зарабатывают исключительно создавая сайты на Тильде
Можно ли на тильде сделать хороший многостраничный сайт?
Да. Никаких проблем нет. Я лично разрабатывал интернет-магазин, у которого на данный момент 500 страниц
Тильда или Insales что лучше? Аналоги
Insales — это очень мощная платформа для создания интернет-магазинов. Но я не сильно знаком с этой платформой, поэтому мне сложно сравнивать. Могу сказать, что функционал Tilda позволяет делать большие сайты, интернет-магазины с хорошей структурой, практически без ограничений. Из аналогов, на данный момент, могу сказать, что достойная платформа, с которой я знаком, это Creatium
Тильда плюсы и минусы. Стоит ли делать интернет магазин на тильде
Однозначно стоит, если вы новичок, хотите погрузиться в сайтостроение и быстро научиться создавать сайты.
Если вы опытный разработчик, то вам будет сложно смириться с некоторыми ограничениями платформы. А также, хотите создать магаз на кол-во товаров более 2500 или структуру разделов более 500 веток

В остальном, да, я рекомендую делать интернет-магазины на Тильде
Цена интернет магазина на тильде?
На биржах типа, freelance, kwork, workzilla и подобные, разработку интернет магазина на Тильде можно будет найти по минимальной цене. В общем и целом, ценовая политика у меня и моих коллег, которых я знаю, варьируется от 40 тыс рублей до 200 тыс ₽
Пример сайта по доставке еды
https://suzdalpizza.ru/
Пример сайта по одежде
https://trench-code.ru/
Пример сайта Автомагазина
https://oil-master-elektrostal.ru/
Тематики
Рекомендуемые статьи
Видео

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

Made on
Tilda