Как создать сайт магазина одежды с ИИ - структура и промпт
Первый экран сайта магазина одежды и обуви: слайдер с кроссовками, заголовок про город и кнопка в каталог

Как создать сайт магазина одежды с ИИ - структура каталога и промпт

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

Ниже разобрано, из каких разделов складывается такой сайт и что должно быть в каждом. Примеры показаны на живом демо магазина «Хартия»: это сайт уличной одежды и обуви, собранный в конструкторе по текстовому описанию. Данные в демо условные, замените своими. В конце лежит готовое описание, по которому собирается похожий магазин. Общий порядок сборки любого магазина с ИИ разобран в статье как создать интернет-магазин с помощью ИИ, базовые блоки - в материале структура интернет-магазина. Здесь только то, что отличает одежду и обувь.

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

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

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

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

Что должно быть на сайте магазина одежды и обуви

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

  1. Первый экран - что продаёте, для кого и где, одна кнопка в каталог.
  2. Каталог - категории, фильтр по марке, сортировка по цене, отметки «новинка», «скидка», «продано».
  3. Карточка товара - фото, цена, состав и плотность ткани, размеры, условия доставки и возврата рядом с кнопкой.
  4. Корзина и оформление - количество, итог, короткая форма заказа с согласием на обработку данных.
  5. Доставка, оплата и возврат - отдельная страница с ценами и сроками и ответами на частые вопросы.
  6. Личный кабинет - история заказов, адреса, избранное.
  7. Коллекции и журнал - подборки и заметки, по которым магазин находят в поиске.
  8. О магазине и контакты - адреса шоурумов, часы работы, телефоны, форма вопроса.

В демо первый экран занимает слайдер с заголовком «Одежда города Казани», подписью про уличные марки и примерку в шоуруме и кнопкой «В каталог». Ниже идут промо-плитки с бейджами «Хит» и «−20 %», плитки категорий со счётчиками и ряд товаров. Верхняя полоса над шапкой держит три обещания сразу: примерка перед покупкой, доставка по России 2-4 дня, возврат 30 дней.

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

Каталог одежды: какие фильтры нужны на самом деле

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

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

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

Категории по типу вещи, коллекции отдельно

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

Карточка товара одежды и обуви

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

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

В демо карточка держит марку, название, категорию, цену и короткое описание: «Плотный футер 340 г/м² с начёсом, прямой крой, капюшон на кулиске. Не садится после стирки». Под кнопками «В корзину» и «Перейти в корзину» стоят три строки, которые обычно уносят на отдельную страницу: доставка по городу на следующий день, примерка и возврат 30 дней, оплата картой, при получении или по счёту. Ниже - похожие товары.

Размеры: что добавить в свою карточку

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

Описание ткани работает так же. «Футер 340 г/м²» говорит человеку, который носит худи, больше, чем «премиальный хлопок». Пишите плотность, состав в процентах и как вещь ведёт себя после стирки.

Корзина магазина одежды: заказ без регистрации

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

Корзина интернет-магазина одежды с формой заказа: имя, телефон, адрес и согласие на обработку данных
Корзина: две вещи, итог и форма заказа из трёх полей с галочкой согласия

В демо корзина показывает вещи с фото, ценой и счётчиком количества, кнопку «Очистить корзину» и справа блок «Итого» с формой заказа: имя, телефон, адрес доставки, галочка согласия со ссылкой на политику и кнопка «Оформить заказ». Три поля - это тот минимум, после которого менеджер может перезвонить, уточнить размер и способ доставки.

Что ещё стоит спросить в форме

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

Галочка согласия и ссылка на политику в форме заказа нужны: имя, телефон и адрес - персональные данные, магазин, который их собирает, по 152-ФЗ считается оператором и обязан опубликовать политику обработки. Кроме галочки и политики, до того, как первая форма на сайте начнёт собирать данные, подаётся уведомление в Роскомнадзор. Что ещё обязано быть на сайте магазина по закону, разобрано отдельно: что должно быть на сайте по закону.

Доставка, оплата и возврат: страница, которая снимает страх

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

Страница доставки и оплаты магазина одежды: четыре способа с ценами и частые вопросы
Доставка и оплата: четыре карточки с ценами и сроками, ниже частые вопросы

В демо эта страница собрана из четырёх карточек: курьером по городу на следующий день за 390 ₽ и бесплатно от 7 000 ₽, самовывоз из шоурума в день заказа, по России транспортной компанией за 2-4 дня от 490 ₽, оплата картой, при получении или по счёту для компаний. Ниже - шесть частых вопросов в аккордеоне: сколько идёт доставка, можно ли примерить, как вернуть вещь, как подобрать размер, чьи марки продаются, есть ли скидки постоянным покупателям.

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

Личный кабинет: нужен ли он магазину одежды

Кабинет окупается на повторных покупках. Человек, который взял у вас кроссовки, через полгода вернётся за худи, и если его адрес и размер сохранены, заказ занимает минуту. В кабинете живут история заказов, сохранённые адреса, избранное и ранний доступ к распродажам.

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

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

Коллекции и журнал: зачем магазину одежды тексты

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

Страница коллекций магазина одежды: четыре подборки с фотографиями и плитки категорий
Коллекции: подборки под сезон, ниже плитки категорий с переходом в каталог

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

Что подготовить до сборки

Сборка идёт быстрее, когда данные лежат под рукой. Соберите в один файл:

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

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

Промпт, чтобы создать сайт магазина одежды с ИИ

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

Собери интернет-магазин одежды и обуви.
Название [Хартия], город [Казань], шоурум
по адресу [улица Баумана, 58], телефон
[+7 843 000-11-22], почта [shop@example.ru],
часы работы [ежедневно 11:00-21:00].
Страницы: главная, каталог, карточка товара,
корзина, коллекции, доставка и оплата,
о магазине, журнал, контакты, личный кабинет,
политика обработки персональных данных.
Первый экран: слайдер с заголовком про город
и уличные марки, кнопка «В каталог». Полоса
над шапкой: [примерка в шоуруме, доставка
по России 2-4 дня, возврат 30 дней].
Каталог: категории [худи, ветровки, брюки,
обувь, сумки, кепки], фильтр по марке,
сортировка по цене, отметки «новинка»,
«скидка», «продано». Товары: [худи начёс 6900],
[чёрные кроссовки 8900], [поясная сумка 4900],
[ветровка хаки 12900], [чёрные брюки 6500],
[рюкзак 9500], [кепка 3500], [шапка 2900].
Карточка товара: фото, марка, цена, состав
и плотность ткани, выбор размера [S, M, L, XL;
обувь 40-45], условия доставки и возврата
под кнопкой «В корзину», похожие товары.
Из карточки и из корзины - ссылка на страницу
доставки и возврата.
Корзина: количество, итого, форма заказа
с полями имя, телефон, адрес, выбор способа
доставки [курьер / самовывоз / по России],
галочка согласия со ссылкой на политику.
Страница доставки: четыре карточки [курьер
по городу на следующий день 390 ₽, бесплатно
от 7000 ₽; самовывоз из шоурума бесплатно;
по России транспортной компанией 2-4 дня
от 490 ₽; оплата при получении или по счёту,
онлайн-оплату не упоминать] и шесть частых
вопросов: сроки, примерка, возврат [30 дней,
бирки на месте], подбор размера, марки, скидки.
Личный кабинет: вход и регистрация, история
заказов, адреса, избранное.
Стиль строгий чёрно-белый, крупные заголовки
прописными, светло-серые подложки,
фотографии товаров на белом фоне.

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

Собрать магазин по этому описанию, 14 дней бесплатно

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

Что подставить своими данными

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

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

Проверка перед запуском: телефон и тестовый заказ

Одежду чаще смотрят с телефона, поэтому проверять сайт нужно сначала на нём.

Мобильная версия сайта магазина одежды: первый экран, каталог с фильтрами и корзина на телефоне
Тот же магазин на телефоне: первый экран, каталог и корзина

Пройдите по списку:

  • Сетка каталога на телефоне идёт в две колонки, фото не обрезаны.
  • Кнопка «В корзину» стоит сразу под ценой и попадает под палец.
  • Счётчик корзины в шапке меняется сразу после добавления.
  • Размер выбирается в карточке и виден в корзине.
  • Фото вещи на телефоне не обрезано по росту.
  • Страница доставки открывается из карточки и из корзины.
  • Оформите один заказ сами и проверьте, где он появился.

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

Создать сайт магазина одежды, 14 дней бесплатно

Подойдёт ли эта структура шоуруму, бренду и магазину кроссовок

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

Всё это правится в описании для конструктора: уберите строку про фильтр марок, добавьте примерку на первый экран или замените сетку размеров. Структура при этом остаётся той же.

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

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

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

Частые вопросы

Что должно быть на сайте магазина одежды?

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

Сколько стоит сделать сайт магазина одежды?

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

Можно ли сделать интернет-магазин одежды бесплатно?

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

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

Выбором размера с отметкой отсутствующих, замерами вещи в сантиметрах и ссылкой на размерную сетку марки. Замеры в сантиметрах снимают большую часть вопросов о размере ещё до заказа.

Нужен ли личный кабинет покупателю магазина одежды?

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

Какой срок возврата указать на сайте?

Не меньше семи дней после получения: столько даёт закон при дистанционной продаже. Многие магазины ставят 14 или 30 дней, как в демо, и это работает на доверие. Условия возврата напишите рядом со сроком: бирки, отсутствие следов носки, кто платит за обратную доставку.

Как принимать оплату на сайте магазина одежды?

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

Нужен ли сайт, если я продаю в Telegram, на Авито или на маркетплейсах?

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

Сколько времени занимает сборка сайта магазина?

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

Создайте свой проект
уже сегодня

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

Начать бесплатно