Разработка карточки товара

Первый экран

Пять элементов, без которых карточка не работает:

1. Название — полное, с моделью и артикулом.
2. Фотография — крупная, с возможностью увеличить.
3. Цена — числом, а не «по запросу».
4. Наличие и срок — «в наличии», «под заказ, 5 дней».
5. Кнопка заказа — в зоне большого пальца на мобильном.

Полный состав блоков

Характеристики важнее описания

Описание от поставщика скопировано сотней магазинов и ценности не добавляет. А вот параметры — добавляют, потому что по ним ищут и выбирают:

• Таблицей, а не абзацем. Сравнение параметров текстом читается плохо.
• Полно и единообразно внутри категории: если у одного товара указан вес, он должен быть у всех.
• С единицами измерения — «вылет излива 220 мм», а не «220».
• Совпадают с фильтрами каталога: характеристики и есть основа фильтрации.
• Своё, чего нет у поставщика: замеры, совместимость, опыт использования.

Разметка

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Смеситель Grohe Eurosmart 32843",
  "sku": "32843",
  "brand": { "@type": "Brand", "name": "Grohe" },
  "image": ["https://site.ru/img/32843-1.jpg"],
  "description": "Однорычажный смеситель для кухни, вылет 220 мм",
  "offers": {
    "@type": "Offer",
    "price": "8490",
    "priceCurrency": "RUB",
    "availability": "https://schema.org/InStock",
    "url": "https://site.ru/tovar/grohe-32843/"
  }
}

Правила применения разобраны в уроке о schema.org. Главное: данные разметки обязаны совпадать с видимыми на странице.

Товар не в наличии

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

Мобильный порядок блоков

На узком экране блоки идут в одну колонку, и порядок решает:

1. Фото → название → цена → наличие → кнопка.
2. Ключевые характеристики — сразу под целевым блоком.
3. Доставка и оплата — до полных характеристик.
4. Кнопка заказа дублируется в липкой панели внизу.
5. Отзывы и аналоги — в конце.

Итог

Карточка работает, когда на первом экране есть название, фото, цена, наличие и кнопка. Ценность добавляют характеристики, свои фото и отзывы, а не объём описания. Товары не в наличии не удаляют — им меняют статус. Дальше — страница категории.