Карточка кроссовок, велошлема или лыжного комплекта быстро разрастается: описание, размерная сетка, характеристики, комплектация, доставка, отзывы. Покупатель приходит с конкретным вопросом, например «подойдёт ли мой размер». Если ответ спрятан на пятом экране, он уйдёт искать его в другом магазине. Ниже приёмы, которые помогают упорядочить длинную страницу, не выбрасывая полезный текст.
С каких вопросов покупателя начать компоновку
Выпишите вопросы, которые чаще всего звучат в звонках, чате и почте. Для спортивных товаров они обычно такие: как выбрать размер, чем эта модель отличается от соседней, есть ли нужный размер в наличии, когда привезут, можно ли обменять. Из этого списка получается порядок блоков: частое выше, справочное ниже или в раскрывающихся секциях.
Что должно уместиться на первом экране
Без прокрутки покупатель должен увидеть название, фото, цену, выбор размера и цвета, кнопку «В корзину» и одну строку о наличии и сроке доставки. Под названием полезна короткая выжимка из трёх-четырёх пунктов: для какого покрытия или вида спорта товар, вес, сезон. Так человек сразу понимает, туда ли попал.
Отдельно проверьте телефон. Галерея там часто занимает всю высоту экрана, и кнопка покупки уезжает вниз. Уменьшите высоту фото или продублируйте кнопку в закреплённой нижней панели.
Как дать перейти к нужному разделу без долгой прокрутки
Под блоком покупки разместите строку ссылок-якорей: «Размеры», «Характеристики», «Описание», «Доставка и возврат», «Отзывы». Каждая ведёт к своему заголовку на этой же странице. Если закрепить строку вверху экрана, она останется под рукой при прокрутке. Следите, чтобы закреплённая панель не перекрывала заголовок раздела, к которому перешёл посетитель: задайте отступ сверху.
Вкладки подходят, когда разделы равнозначны. Но содержимое скрытых вкладок не видно при обычном пролистывании, а поделиться ссылкой на конкретную вкладку сложно. Если текста немного, надёжнее оставить разделы друг под другом с якорями.
Как оформить таблицу размеров и характеристики
Размер чаще всего решает, купят ли товар. Сделайте таблицу с понятными единицами: длина стопы в сантиметрах рядом с российским и европейским размером. Над таблицей поставьте одну фразу о том, как измерить, под ней — примечание, если модель заметно маломерит или большемерит. Пишите его только тогда, когда это подтверждено данными производителя или вашими замерами. Не делайте таблицу картинкой: текст масштабируется на телефоне и находится поиском по странице.
Характеристики оформляйте парами «параметр — значение» и группируйте по смыслу: «Материалы», «Размеры и вес», «Назначение». Двадцать строк подряд глаз пропускает. Малоизвестные термины («дроп», «мембрана») поясняйте короткой подсказкой рядом.
Условный пример: карточка беговых кроссовок
Допустим, страница называется «Кроссовки беговые Трек-200» (модель вымышленная). Порядок блоков может быть таким:
- первый экран: название, фото, цена, выбор размера, кнопка, строка «В наличии, доставка — по условиям магазина»;
- три строки выжимки: покрытие, вес, сезон;
- строка якорей: Размеры · Характеристики · Описание · Доставка и возврат · Отзывы;
- таблица размеров с инструкцией по замеру стопы;
- характеристики в трёх группах;
- описание в несколько абзацев с подзаголовками;
- доставка и возврат: краткая выдержка и ссылка на полный текст условий;
- отзывы, а если есть возможность, то с пометкой о том, какой размер брал автор.
Проверочный список перед публикацией шаблона
- Цена, выбор размера и кнопка покупки видны на телефоне без прокрутки или продублированы в закреплённой панели.
- Строка якорей ведёт к нужным заголовкам, а закреплённая панель не закрывает их.
- Таблица размеров набрана текстом, единицы подписаны, способ замера объяснён.
- Характеристики разбиты на группы, а сложные термины поясняются.
- Абзацы описания короткие, у каждого смысловой подзаголовок.
- Условия доставки и возврата на карточке совпадают с полной страницей условий.
- Страница проверена на узком экране и на медленном мобильном соединении: тяжёлые фото не мешают добраться до кнопки.
Начните с одной самой посещаемой карточки и перенесите удачную схему в шаблон для остальных товаров. Так проще проверить, что она работает для разных категорий, от обуви до инвентаря.
