Блог дизайнера · Интернет-магазины

Собираю интернет-магазин одежды на Tilda с нуля и показываю все шаги: дизайн-система, фото товаров из нейросети, каталог, карточка товара, главная в Zero Block, корзина, личный кабинет, SEO, оплата и метрика.

Из обязательных расходов — только домен и платный тариф Tilda: на бесплатном магазин не собрать. Остальное бесплатно или почти бесплатно:

• нейросеть, которая работает с картинками, — Gemini, ChatGPT или любая другая. С её помощью я сделал фото товаров для учебного магазина;
• базовый Photoshop — убрать фон и подправить фото. Ничего сложного, всё показываю в видео;
• Figma — для мини-дизайн-системы и логотипа. Ставится бесплатно.

Если вы ещё выбираете платформу, сначала прочитайте разбор плюсов и минусов магазина на Tilda: там — лимиты каталога и случаи, когда лучше взять CMS.

Дизайн-система — это цвета плюс шрифты. Даже маленькая, она спасает магазин от пестроты. Палитру я подобрал на Pinterest и сразу решил, сколько цветов может быть в одном блоке, чтобы сайт не выглядел слишком цветным. Всё собрал на одном листе в Figma: цвета, шрифт и логотип магазина «Текстура».

Палитра и логотип «Текстуры» на одном листе в Figma

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

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

Без последних двух не подключить платёжную систему, так что не откладывайте их на конец.

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

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

Фото из нейросети дорабатываем в Photoshop

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

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

Каталог товаров Tilda сразу после подключения: демо-товары удаляем

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

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

Каталог нижнего белья «Текстуры» на новом блоке каталога

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

Отдельная страница товара, связанная с каталогом

Для главной я использую Zero Block: так она выглядит симпатично и не похожа на шаблон. Ключевая настройка — Grid container с автоскейлом по ширине окна (Autoscale to window width): всё, что собрано от тени до тени, растянется на всю ширину экрана. Работаю в шестиколоночной сетке.

На главной — первый экран с оффером, разделы каталога, популярные товары и блоки доверия. Если хотите выводить списки прямо в Zero Block, посмотрите инструкцию по Потокам 2.0.

Главная страница в редакторе Zero Block

У стандартных блоков мобильная версия уже есть, их нужно только чуть подправить. Zero-блоки верстаем вручную. Мой способ: две вкладки — в одной сайт в режиме эмуляции телефона (Посмотреть код → мобильный режим, например iPhone 12), в другой — редактор. Начинайте с главной, она самая сложная, и удалите в настройках блока лишние разрешения, которые почти нигде не используются.

Адаптив главной: верстаем мобильный брейкпоинт в Zero Block

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

Личный кабинет: Настройки сайта → Подключаемые модули → Личный кабинет для интернет-магазина. Я оставил авторизацию по желанию и включил автоматическое создание учётной записи при заказе — скрытую регистрацию. Для неё в корзине обязательно должно быть поле с типом email.

Служебные страницы вроде корзины и избранного закройте от индексации в их SEO-настройках.

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

Лёгкое SEO лучше, чем никакого. Для каждой важной страницы откройте раздел «SEO» в настройках страницы, а в соседней вкладке — Яндекс Wordstat. Для главной магазина одежды начинаем с запроса «магазин одежды», выбираем целевые фразы и заполняем заголовок, описание и адрес страницы. То же самое делаем для каталогов и карточек.

Что ещё проверить перед запуском, собрано в чек-листе запуска сайта на Tilda.

SEO-настройки страниц магазина

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

Затем аналитика: Яндекс Метрика с счётчиком интернет-магазина для рекламы и Яндекс Вебмастер для SEO. И то и другое подключается в настройках сайта за пару минут.

Подключение аналитики в настройках сайта

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

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

Как подключить оплату к магазину на Tilda?
Зарегистрируйтесь в платёжной системе на юрлицо или ИП, разместите оферту и политику на сайте и вставьте ключи в настройках сайта. Платёжка работает только на своём домене.

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

Откуда взять фото товаров, если их нет?
Для прототипа подойдут сгенерированные в нейросети, но для продаж лучше снять настоящий товар.

Хотите делать такие сайты сами?

Базу Tilda, Zero Block и автолейаут можно освоить на моём курсе. А если времени нет — сделаю сайт за вас.