Больше половины покупателей приходят в магазин с телефона, а Google оценивает сайт по мобильной выдаче. При этом на многих проектах на 1С-Битрикс мобильная версия — это боль: съезжающая вёрстка, горизонтальная прокрутка, цена и кнопка «В корзину», которые надо выискивать, фильтр, которым невозможно пользоваться пальцем. Адаптивный шаблон, собранный правильно, снимает эти проблемы и напрямую влияет на продажи.
Это практический How-to по сборке адаптивного шаблона магазина на 1С-Битрикс: от выбора подхода и брейкпоинтов до адаптации шаблонов компонентов, каталога, фильтра и корзины без потери скорости. Если задача выходит за рамки вёрстки и упирается в производительность и логику, это уже уровень аудита и оптимизации 1С.
Коротко
- Стандарт для магазина — адаптивный шаблон (один код под все экраны), а не отдельная мобильная версия.
- Компоненты Битрикса адаптируют через копию их шаблона вывода, не трогая логику компонента.
- Критичные для конверсии узлы — карточка, фильтр, корзина, оформление — адаптируют в первую очередь.
- Адаптив неотделим от скорости: адаптивные картинки, минимум JS, композитный сайт для мгновенной статики.
Адаптив против отдельной мобильной версии
Первый выбор — как вообще делать мобильную поддержку. Есть два подхода: адаптивный шаблон и отдельная мобильная версия на поддомене.
Адаптивный шаблон — это один код, который подстраивается под ширину экрана через CSS. Правки делаются в одном месте, URL один, поведение консистентно. Отдельная мобильная версия — фактически второй сайт со своим кодом: дороже в поддержке, сложнее для SEO, легко рассинхронизируется с основной. Для магазина на 1С-Битрикс современный стандарт — адаптив; отдельную версию делают редко и только под очень специфические задачи.
Mobile-first и брейкпоинты
Подход mobile-first означает, что базовые стили пишутся сразу под мобильный, а для больших экранов вёрстка расширяется медиазапросами. Это обычно даёт более чистый и лёгкий CSS, чем обратный путь «сначала десктоп, потом ужимаем».
Брейкпоинты — точки, где вёрстка перестраивается — подбирают под контент, а не под модели устройств. Практический ориентир по классам:
| Класс устройств | Что меняется |
|---|---|
| Узкие телефоны | Одна колонка, крупные кнопки, скрытый фильтр |
| Телефоны | 2 товара в ряд, компактное меню-бургер |
| Планшеты | 2–3 товара, боковые блоки перестраиваются |
| Десктоп | Полная сетка, фильтр сбоку, многоколоночность |
| Широкие экраны | Ограничение ширины контента, больше товаров в ряд |
Ставьте брейкпоинт там, где вёрстка начинает «ломаться», и проверяйте весь диапазон ширин, а не три «эталонных» размера.
Сетка и структура шаблона
Основа адаптива — гибкая сетка. Современные магазины строят на CSS Grid и Flexbox: они позволяют перестраивать раскладку колонок без жёстких пикселей. Ширины задаются в относительных единицах и с ограничением максимальной ширины контента на широких экранах.
В 1С-Битрикс структура шаблона сайта — это header.php, footer.php и области, куда выводятся компоненты. Адаптивную сетку закладывают на уровне этих файлов и общих стилей шаблона, чтобы все страницы наследовали единую отзывчивую основу. Дальше внутри этой сетки адаптируются отдельные компоненты.
Шаблоны компонентов: что и как править
Ключевой принцип работы с Битриксом: адаптируется представление компонента, а не его логика. Штатные компоненты (каталог, корзина, фильтр) имеют шаблоны вывода, и именно их кастомизируют.
- Скопируйте шаблон компонента. Штатный шаблон копируется в свой (в шаблон сайта), чтобы правки не затёрлись обновлением.
- Правьте вёрстку и стили. В template.php и style.css своего шаблона меняется представление под мобильные.
- Не трогайте логику. Бизнес-логику компонента (component.php, result_modifier) без нужды не переписывайте.
- Проверьте на обновлении. Убедитесь, что правки лежат в своём шаблоне и переживут обновление платформы.
Мобильное меню и навигация
Навигация — первое, что ломается на узком экране. Горизонтальное десктопное меню на телефоне не помещается, поэтому его сворачивают в «бургер» — кнопку, открывающую выезжающую панель.
Хорошее мобильное меню магазина учитывает глубину каталога: разделы и подразделы должны раскрываться удобно, без бесконечной прокрутки. Поиск выносят на видное место, потому что на мобильном им пользуются активнее. Меню не должно перекрывать контент навсегда и должно легко закрываться. Это узел, где удобство напрямую влияет на то, дойдёт ли человек до товара.
Адаптивный каталог и карточка
Каталог на мобильном — это обычно одна-две колонки товаров вместо четырёх на десктопе. Плитка товара должна оставаться читаемой: название, цена, кнопка. Карточка товара — самый ответственный экран: именно там происходит решение о покупке.
На телефоне в карточке критично, чтобы цена и кнопка «В корзину» были видны без долгой прокрутки, галерея листалась пальцем, а характеристики и данные из каталога не уезжали за край экрана. Блок доставки и оплаты тоже должен быть компактным и заметным. Поломка любого из этих элементов на мобильном — прямая потеря конверсии.
Умный фильтр на мобильном
Умный фильтр (catalog.smart.filter) на десктопе живёт сбоку, а на мобильном для него нет места в основной раскладке. Решение — прятать фильтр в выезжающую панель или модальное окно, открываемое кнопкой «Фильтр».
Логика фильтра при этом остаётся штатной — меняется только представление в шаблоне компонента. Важно сохранить удобство: явная кнопка применения, счётчик найденных товаров, понятный сброс. На телефоне подбор по характеристикам критичен, и неудобный фильтр отсекает часть покупателей. Как устроен фильтр и от чего зависит его скорость, мы разбираем в связке с общей производительностью каталога.
Корзина и оформление на телефоне
Корзина и оформление заказа — финальная воронка, и на мобильном она особенно уязвима. Мелкие поля, неудобный ввод, съезжающие кнопки — и заказ не доходит до оплаты.
- Крупные поля и кнопки. Пальцем должно быть легко попадать, без промахов.
- Правильные типы полей. Телефон — цифровая клавиатура, email — соответствующая раскладка.
- Короткая форма. На мобильном лишние поля критичнее — оставляйте необходимое.
- Видимая итоговая сумма и кнопка оплаты. Всегда доступны, не теряются в прокрутке.
Оформление — то место, где адаптивность конвертируется в деньги. Его тестируют на реальных телефонах в первую очередь.
Изображения, скорость и композит
Адаптив неотделим от скорости. Мобильные пользователи часто на слабых сетях, а Core Web Vitals измеряет именно мобильную выдачу — тяжёлый шаблон бьёт по LCP и CLS.
- Адаптивные картинки. srcset отдаёт телефону лёгкую версию изображения, а не десктопную.
- Ленивая загрузка. Картинки за пределами экрана грузятся по мере прокрутки.
- Минимум блокирующего JS. Скрипты не должны тормозить отрисовку контента.
- Композитный сайт. Статика отдаётся мгновенно, что особенно ценно на мобильных.
Инфраструктурная сторона скорости — окружение и деплой — не менее важна: её мы разбираем в статьях про хостинг и BitrixVM и CI/CD и деплой.
Тестирование на реальных данных
Идеальные демо-данные скрывают проблемы. Тестировать адаптивный шаблон нужно на реальном каталоге: длинные названия, много характеристик, крупные корзины, разные типы товаров.
Проверяйте не в одном эмуляторе, а на реальных устройствах разных размеров и на всём пути покупки: каталог, фильтр, карточка, корзина, оформление, оплата. Особое внимание — отсутствию горизонтальной прокрутки, читаемости цен и кнопок, удобству ввода в формах. Именно живой каталог вылавливает то, чего не видно на «причёсанных» демо-товарах.
Частые ошибки
- Горизонтальная прокрутка. Элементы шире экрана (широкие таблицы, картинки без max-width) ломают вёрстку.
- Правки в ядре компонента. Кастомизация штатных файлов вместо своего шаблона — всё затрёт обновление.
- Неудобный фильтр. На мобильном фильтр не спрятан или пользоваться им пальцем невозможно.
- Мелкие поля в оформлении. Промахи по кнопкам и полям срывают заказ.
- Десктопные картинки на телефон. Тяжёлые изображения убивают скорость на мобильных.
- Тест только в эмуляторе. Проблемы на реальных устройствах и данных остаются незамеченными.
Чек-лист сборки
- Подход выбран. Адаптивный шаблон, mobile-first, брейкпоинты по контенту.
- Сетка заложена. Гибкая сетка на Grid/Flexbox в header/footer и общих стилях.
- Компоненты адаптированы. Правки в копиях шаблонов вывода, логика штатная.
- Меню и поиск удобны. Бургер, раскрытие каталога, видимый поиск.
- Карточка, фильтр, корзина проверены. Критичные узлы конверсии адаптированы в первую очередь.
- Скорость учтена. Адаптивные картинки, ленивая загрузка, минимум JS, композит.
- Протестировано на устройствах. Реальные телефоны, реальный каталог, весь путь покупки.
Вывод
Адаптивный шаблон магазина на 1С-Битрикс — это не про «чтобы влезало на телефон», а про продажи. Больше половины покупателей мобильные, и каждый съехавший элемент карточки, каждый неудобный фильтр и мелкое поле в оформлении стоят конверсии. Правильный подход — один адаптивный код, mobile-first, брейкпоинты по контенту и адаптация компонентов через их шаблоны вывода без вмешательства в логику.
Собирайте шаблон с оглядкой на скорость (адаптивные картинки, минимум JS, композит) и тестируйте на реальных устройствах и данных — особенно карточку, фильтр, корзину и оформление, где происходит конверсия. Тогда адаптив станет не косметикой, а инструментом, который напрямую увеличивает выручку с мобильного трафика.
