Как сделать карточку товара для сайта в 2026: каталог и ИИ

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

Из чего состоит карточка товара

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

• Фото: одно главное и ещё 2-4 дополнительных с разных ракурсов. Один фон и один размер у всех товаров сразу делают каталог аккуратным.
• Название: что это плюс отличительный признак (модель, объём, цвет, размер). Без рекламных прилагательных, по ним товар не найдут.
• Цена: отдельной строкой и крупно. Старая цена, если она есть, ставится рядом и зачёркивается.
• Короткое описание: 2-4 предложения о том, кому и для чего этот товар подходит.
• Характеристики: список или таблица из пар «свойство, значение»: материал, вес, размеры, состав, гарантия.
• Наличие и срок: «в наличии», «под заказ, 3 дня». Это снимает половину вопросов в переписке.
• Кнопка действия: «В корзину», «Купить» или «Оставить заявку», если корзины на сайте нет.

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

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

• Конструктор с магазином (Tilda, Craftum, Nethouse и другие). Каталог, фильтры и корзина уже встроены, карточка заполняется в панели, код писать не нужно. Ограничение: вид карточки задаётся шаблоном, сильно перекроить его не выйдет. Как вообще устроена сборка мышкой, мы показывали в разборе блочных конструкторов.
• Платформа интернет-магазина (InSales, 1С-Битрикс и подобные). Имеет смысл, когда товаров сотни и тысячи, есть склад, остатки и выгрузка на маркетплейсы. Для 10-30 позиций это лишняя сложность и лишние деньги.
• Свой код с помощью ИИ. Вы описываете карточку словами, Claude или Codex пишут HTML и CSS, вы правите деталями. Подходит, когда нужен свой вид, нестандартный набор полей или карточка встраивается в уже готовый сайт.

Цены у конструкторов открытые. У Тильды тариф Personal стоит 750 ₽ в месяц при помесячной оплате и 500 ₽ в месяц при оплате за год, Business обойдётся в 1250 и 1000 ₽ соответственно и разрешает до 5 сайтов (тарифы Tilda). Выбирая платформу, проверьте, работает ли она с российской оплатой: часть зарубежных сервисов рынок покинула, например конструктор магазинов Ecwid объявил об отключении российских пользователей в 2024 году (CNews).

По теме: Как сделать звук на сайте в 2026: музыка, эффекты и озвучка

Карточка в конструкторе: пошагово

1. Создайте товар в каталоге, а не как обычную страницу. В конструкторах с магазином есть отдельный раздел «Товары» или «Каталог», карточки живут там и оттуда же попадают в списки и фильтры.
2. Подготовьте фото заранее. Удобнее всего квадрат 1000×1000 пикселей, один фон, один свет. Файлы называйте по смыслу: kruzhka-krasnaya-1.jpg, это помогает и вам, и поиску по картинкам.
3. Заполните название, цену, артикул и наличие. Артикул пригодится, когда товаров станет больше 20 и вы начнёте путать похожие позиции.
4. Добавьте характеристики парами. Порядок полей у всех товаров держите одинаковым, тогда покупатель быстро сравнивает.
5. Напишите короткое описание. Промпт для нейросети дальше по тексту, но правку руками он не отменяет.
6. Настройте кнопку. Есть корзина, ведите в неё, нет корзины, ведите в форму заявки. Что происходит с заявкой дальше, разбирали в статье про сайт с формой.
7. Откройте карточку на телефоне. Проверьте, что цена и кнопка видны без прокрутки, фото не растягивается, а таблица характеристик не уезжает вбок.

Карточка кодом: что попросить у нейросети

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

Сделай страницу карточки товара на чистом HTML и CSS, без библиотек.
Блоки: галерея (главное фото + 4 миниатюры, клик меняет главное),
название, цена, статус наличия, кнопка «В корзину»,
короткое описание, таблица характеристик из пар свойство/значение.
На экранах уже 700px всё в одну колонку, фото сверху.
Данные о товаре вынеси в отдельный объект в начале скрипта,
чтобы я мог менять их, не трогая вёрстку.
Добавь JSON-LD разметку Product с вложенным Offer.

Разметка нужна затем, чтобы поисковик понял, что перед ним товар, и показал в выдаче цену и наличие. Для товаров используется тип Product с вложенным Offer, вставляется он в <head> страницы отдельным скриптом.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Кружка керамическая красная, 350 мл",
  "image": ["https://vash-sayt.ru/img/kruzhka-1.jpg"],
  "description": "Кружка из керамики объёмом 350 мл, подходит для посудомоечной машины.",
  "sku": "KR-350-RED",
  "brand": {"@type": "Brand", "name": "Ваш бренд"},
  "offers": {
    "@type": "Offer",
    "url": "https://vash-sayt.ru/catalog/kruzhka-red",
    "priceCurrency": "RUB",
    "price": "890",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Готовую страницу проверьте двумя бесплатными инструментами: валидатором микроразметки Яндекса и Rich Results Test от Google. Оба показывают, какие поля робот увидел, а какие потерял. Цена и наличие в разметке обязаны совпадать с тем, что написано на странице, иначе расширенный сниппет не покажут.

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

По теме: Как сделать сайт чёрным в 2026: тёмная тема, которая читается

Описание товара нейросетью: промпт и проверка

Описания для десятков позиций удобно писать нейросетью: она держит одинаковую структуру и не устаёт к тридцатому товару. Из России без обходных путей работают GigaChat от Сбера и YandexGPT, у Сбера есть отдельная инструкция под товарные карточки. Ключевое правило: нейросеть пишет только из тех фактов, которые вы дали, иначе она допишет характеристики сама.

Напиши описание товара для карточки на сайте.
Товар: кружка керамическая, 350 мл, красная, глазурь, можно в посудомойку.
Кому: подарок коллеге, покупка для офиса.
Формат: абзац до 400 знаков + 5 пунктов с фактами из списка выше.
Тон спокойный, без восторгов и превосходных степеней.
Не добавляй характеристики, которых нет в исходных данных.

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

• Выдуманные факты: объём, состав, страна производства, гарантия. Всё, чего вы не давали, вычёркивайте.
• Обещания: «прослужит 10 лет», «подойдёт всем». Такие фразы вам же потом и предъявят.
• Повторы между товарами: если пять описаний отличаются одним словом, поиск сочтёт страницы почти одинаковыми.
• Объём: 400-800 знаков достаточно. Длинные тексты на карточке никто не читает, а вопросы про доставку лучше вынести в отдельный блок.

Каталог: как собрать несколько карточек

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

• Один шаблон на все товары. Меняются данные, а не вёрстка. В коде это отдельный файл с массивом товаров, из которого страницы собираются циклом.
• Сетка в 2-4 колонки на компьютере и одна колонка на телефоне. Карточки одной высоты, иначе список выглядит рваным.
• Фильтры и сортировка нужны с 20-30 позиций. Для десяти товаров хватит простого списка, фильтр там только мешает.
• Хлебные крошки: главная, категория, товар. Они помогают и человеку, и поиску понять структуру.
• Единые правила именования: одинаковый порядок слов в названиях и одинаковый набор характеристик внутри категории.

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

По теме: Как сделать запрос на сайте в 2026: форма, поиск и обращение к API

Ошибки, из-за которых карточка не работает

• Фото со стоков вместо своих. Покупатель узнаёт чужие снимки и перестаёт верить остальному.
• Цена «по запросу» без цифры. Часть людей закроет страницу, а не напишет вам.
• Разный фон и размер у фотографий. Каталог сразу выглядит собранным на коленке.
• Кнопка есть, а действия нет: нажатие ничего не открывает, форма не отправляется. Проверяйте каждую карточку после клонирования.
• Характеристики текстом сплошным абзацем. Пары «свойство, значение» читаются в разы быстрее.
• Нет отметки о наличии. Заказ на товар, которого нет, обходится дороже, чем честная надпись «под заказ».

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

Можно ли сделать карточку товара бесплатно?

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

Сколько фотографий нужно в карточке?

Три-пять достаточно: общий вид, деталь, товар в использовании и снимок с масштабом (рядом с рукой или привычным предметом). Больше десяти фото люди пролистывают редко.

Нужна ли корзина, если товаров всего пять?

Не обязательно. При небольшом ассортименте кнопка «Оставить заявку» с формой работает не хуже, а собрать её проще. Корзина становится нужной, когда люди регулярно берут по несколько позиций сразу.

Обязательно ли добавлять разметку Product?

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

Что делать, если товаров несколько сотен?

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