Как улучшить внешний вид каталога товаров

Внешний вид каталога в 1С-Битрикс определяется не «дизайном сайта вообще», а конкретным шаблоном компонента и настройками вывода изображений. Разберём, где что редактируется, чтобы плитка товаров выглядела аккуратно, быстро грузилась и одинаково хорошо смотрелась на десктопе и телефоне.

Где задаётся внешний вид каталога

Первое, что нужно понять: витрина каталога рисуется не одним, а связкой компонентов. Комплексный компонент bitrix:catalog внутри вызывает bitrix:catalog.section (список товаров в разделе), bitrix:catalog.element (детальная карточка), bitrix:catalog.smart.filter (умный фильтр) и bitrix:sale.viewed.products (просмотренные). Внешний вид плитки — это шаблон именно catalog.section.

Редактировать чужой шаблон «по месту» нельзя — при обновлении решения правки затрёт. Правильный путь — скопировать шаблон в свой: из /bitrix/components/bitrix/catalog.section/templates/.default/ в /local/templates/ваш_шаблон/components/bitrix/catalog.section/имя_копии/. В визуальном редакторе это делает кнопка «Копировать шаблон компонента».

Режим вывода: плитка, список, число колонок

Многие «улучшения» достигаются без кодинга — параметрами компонента. В настройках catalog.section и в шаблоне сайта задаются:

• вид витрины — плитка (grid) или список (line);
• количество товаров на странице (PAGE_ELEMENT_COUNT) — обычно 12, 24 или 36, кратно числу колонок;
• число колонок в плитке — 3 или 4 на десктопе;
• тип пагинации — постранично, «Показать ещё» или бесконечная прокрутка (LAZY_LOAD).

Свойства, которые видно на плитке (артикул, бренд, короткое описание, наличие), настраиваются списком PROPERTY_CODE в параметрах компонента. Не выводите на витрину всё подряд — 2–3 ключевых поля читаются лучше, чем плотная простыня характеристик.

Карточка товара в плитке

Единица восприятия каталога — карточка (тайл). Аккуратная карточка держит одинаковую высоту у всех товаров, даже когда названия разной длины. Это решается на уровне вёрстки шаблона: фиксированная область картинки, обрезка названия в 2 строки через CSS (-webkit-line-clamp: 2), выравнивание цены и кнопки по низу карточки через flex.

Что обычно улучшают в карточке:

1. Единый размер изображения — контейнер с соотношением сторон 1:1 и object-fit: contain, чтобы товары не «прыгали».
2. Иконка-действие — «в корзину», «в избранное», «сравнить» появляются при наведении.
3. Второе фото по ховеру — подмена картинки на дополнительное изображение из свойства «Больше фотографий».
4. Метки — «Хит», «Новинка», «-20%» выводятся из свойств инфоблока или из скидок.

Изображения: ресайз и вес

Главный источник «мыла» и тормозов в каталоге — картинки, отданные в исходном размере. Никогда не выводите оригинал через <img src="оригинал">. Используйте штатный ресайз Битрикса — CFile::ResizeImageGet(), который создаёт кэшированную уменьшенную копию нужного размера.

В параметрах компонента за это отвечают настройки ELEMENT_PREVIEW_PICTURE_MODE и размеры превью для плитки. Задавайте размер под реальную ширину тайла, а не «с запасом».

Дополнительно помогают ленивая загрузка (атрибут loading="lazy" на изображениях ниже первого экрана) и современные форматы. Модуль Оптимизация изображений (webp) и настройка «Конвертировать в WebP» в шаблоне заметно снижают вес витрины без потери качества.

Адаптивность и сетка

Улучшение внешнего вида — это в первую очередь корректная сетка на всех экранах. На десктопе — 3–4 колонки, на планшете — 2, на телефоне — 1–2. Задаётся это CSS-сеткой (display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))) или брейкпоинтами Bootstrap, если сайт на нём собран.

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

Тестируйте не в «резиновом» окне браузера, а на реальных разрешениях 360, 768 и 1440 px — именно на них ломается большинство витрин.

Пустые состояния и мелочи, которые заметны

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

• Товар без фото — заглушка (placeholder) вместо битой иконки. Задаётся в шаблоне через проверку наличия картинки.
• Нет товаров в разделе или по фильтру — дружелюбное сообщение и кнопка сброса фильтра, а не пустая белая область.
• Товар не в наличии — приглушённая карточка и подпись «Под заказ» вместо кнопки «В корзину».
• Скелетоны при подгрузке «Показать ещё» — сдержаннее, чем резкий скачок контента.

Итог

Внешний вид каталога в 1С-Битрикс улучшается по слоям: сначала параметры компонента catalog.section (вид, колонки, свойства на плитке), затем аккуратный шаблон карточки в /local/templates/, затем правильный ресайз и WebP для изображений, и в конце — адаптив, метки и продуманные пустые состояния. Ключевое правило: любую правку витрины ведём в своей копии шаблона, чтобы обновления решения ничего не сломали.

Если нужно привести витрину к аккуратному, быстрому и по-настоящему адаптивному виду — мы в B2Bsite проектируем и переверстываем каталоги на 1С-Битрикс с учётом производительности и Core Web Vitals, а не только «красивой картинки». Поможем и с шаблонами компонентов, и с оптимизацией изображений и скорости витрины.