Дизайн главной страницы интернет-магазина: блюпринт по блокам

Блюпринт главной страницы интернет-магазина по блокам: что разместить на первом экране, порядок секций, чек-лист перед запуском и особенности мобильной версии.

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

Что должно быть на главной странице интернет-магазина?

Как минимум: шапка с поиском, корзиной и навигацией по категориям; hero-блок, который говорит, что вы продаёте, и предлагает один понятный следующий шаг; вход в основные категории; несколько бестселлеров или новинок; элементы доверия — доставка, возврат и настоящие отзывы; и подвал с условиями и контактами. Всё остальное (редакционные блоки, подписка на рассылку, социальные доказательства) необязательно и должно оправдывать своё место.

Что размещать на первом экране главной страницы интернет-магазина?

Четыре вещи: навигацию с поиском и корзиной, заголовок, который называет, что вы продаёте, одну главную кнопку, ведущую к товарам, и одну заметную причину доверять магазину — например, строку про доставку или возврат. Сильное изображение товара в hero-блоке помогает посетителю понять ассортимент, ничего не читая.

Сколько товаров показывать на главной странице?

Универсального числа нет. Покажите достаточно, чтобы представить ассортимент: обычно это один ряд или сетка бестселлеров без карусели плюс плитки категорий, а затем ссылка на весь каталог. Если вы продаёте несколько товаров, можно показать их все. Если тысячи — главная должна направлять людей в категории, а не пытаться выставить весь каталог.

Нужен ли на главной странице интернет-магазина слайдер или карусель?

Один статичный hero-блок обычно доносит мысль яснее, чем вращающийся. Автопрокрутка слайдов прячет содержимое за таймером, хуже поддаётся доработке по доступности и часто утяжеляет страницу. Если нужно продвигать несколько вещей, дайте каждой отдельную плитку под hero-блоком.

Как ускорить загрузку главной страницы интернет-магазина?

Сжимайте изображения и подбирайте их правильный размер, используйте современные форматы вроде WebP или AVIF, загружайте hero-изображение с приоритетом, а всё, что ниже, — лениво (lazy-load), ограничьте сторонние скрипты (чат-виджеты, всплывающие окна, трекинг) и резервируйте место под изображения, чтобы вёрстка не «прыгала» при загрузке. Google PageSpeed Insights и отчёт Core Web Vitals в Search Console покажут, что именно тормозит вашу страницу.

Что важнее: главная страница или страница товара?

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

Коротко: у хорошей главной страницы интернет-магазина одна задача — быстро привести каждого посетителя к нужным товарам. Разместите по порядку: понятную шапку (поиск, корзина, категории), hero-блок с описанием того, что вы продаёте, и одной главной кнопкой, плитки категорий, короткий ряд бестселлеров, элементы доверия (доставка, возврат, отзывы) и полезный подвал. Всё, что находится на первом экране, должно отвечать на вопрос: «Что это за магазин и куда нажимать?»

Блюпринт одним взглядом

Используйте это как стартовый порядок блоков. Убирайте секции, которые нечем наполнить реальным содержанием: пустой блок «отзывы» вредит больше, чем его отсутствие.

№	Секция	Задача	Объём
1	Полоса объявлений	Одно актуальное сообщение: порог бесплатной доставки, конец распродажи, крайний срок заказа	Одна строка
2	Шапка и навигация	Поиск, корзина, аккаунт, главные категории	5–7 ссылок верхнего уровня
3	Hero-блок	Сказать, что вы продаёте, и дать один следующий шаг	Один заголовок, одна кнопка
4	Полоса доверия	Доставка, возврат, оплата, поддержка	3–4 коротких пункта
5	Плитки категорий	Направить покупателей по тому, что им нужно	4–8 плиток
6	Бестселлеры / новинки	Показать, что каталог настоящий	Один ряд или сетка
7	Блок ценности или истории	Почему вы, а не другой магазин	Один короткий блок
8	Социальные доказательства	Настоящие отзывы, упоминания в прессе, фото покупателей	Только если они подлинные
9	Подписка на рассылку	Зацепить тех, кто пока не готов купить	Одно поле
10	Подвал	Условия, контакты, второстепенные ссылки	Аккуратные колонки

Что размещать на первом экране

«Первый экран» (above the fold) — это всё, что посетитель видит до прокрутки, и оно зависит от устройства. Проектируйте отдельно под ноутбук и отдельно под телефон, а не рисуйте одну линию на макете. На любом устройстве эти четыре вещи должны быть видны без прокрутки:

Навигация с поиском и корзиной. Покупатели, которые знают, чего хотят, сначала воспользуются поиском. Не прячьте его за иконкой на десктопе.
Заголовок, называющий товар. «Керамические кружки ручной работы с доставкой из Портленда» лучше, чем «Добро пожаловать в наш магазин». Называйте категорию простыми словами.
Одна главная кнопка. «Купить кружки» или «Смотреть новинки». Вторая, менее заметная ссылка допустима; три равнозначные кнопки — нет.
Одна причина вам доверять. Порог бесплатной доставки, срок возврата или количество отзывов, которое вы действительно можете подтвердить. Используйте только те утверждения, которые можете доказать.

Используйте в hero-блоке реальное фото товара или его использования, а не стоковое изображение, которое подошло бы любому магазину. Картинка — самый быстрый способ для посетителя убедиться, что он попал туда, куда нужно.

Заметки по секциям

Шапка и навигация

Оставьте в верхнем уровне только те категории, которые стал бы искать новый посетитель, и называйте их теми словами, которыми он пользуется. Сделайте поиск видимым полем, следите за актуальностью счётчика корзины и сделайте логотип ссылкой на главную. Для большого каталога может подойти мегаменю, но проверьте, что им удобно пользоваться с трекпадом и с клавиатуры. Более подробно об остальных частях магазина — в нашем материале о лучших практиках дизайна интернет-магазина.

Hero-блок

У hero-блока должно быть одно сообщение. Если вы проводите сезонную акцию, сделайте её hero-блоком на время её действия, а затем вернитесь к постоянному сообщению. Избегайте слайдов с автопрокруткой: они прячут содержимое за таймером и хуже поддаются доработке по доступности. Если у вас несколько кампаний, дайте каждой отдельную плитку ниже на странице.

Плитки категорий

Это рабочая лошадка страницы. Каждой плитке нужны чёткое фото и понятная подпись («Женские кроссовки для бега», а не «Коллекция Stride»). Располагайте их по тому, что вы больше всего хотите продать или что чаще всего ищут посетители, а не по алфавиту.

Бестселлеры и новинки

Показывайте реальные товары с реальными ценами, а не безликую сетку. Каждой карточке нужны изображение, название, цена и ссылка; рейтинги добавляйте, только если у вас есть настоящие отзывы. Держите пропорции изображений одинаковыми, чтобы сетка выглядела аккуратно. Завершите ряд ссылкой «Смотреть всё» на страницу коллекции.

Доверие и социальные доказательства

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

Подвал

В подвале внимательные покупатели ищут условия. Добавьте доставку, возврат, конфиденциальность, условия использования, контакты и ссылку на таблицу размеров или FAQ, если они у вас есть. О вариантах оформления мы рассказываем в материале примеры дизайна подвала сайта.

Мобильная версия

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

Делайте hero-блок коротким. Заголовок, изображение и кнопка должны помещаться на экране обычного телефона без прокрутки за пределы шапки.
Делайте области нажатия достаточно крупными. Кнопкам, фильтрам и пунктам меню нужны размер и отступы, удобные для пальцев. Проверяйте на реальном устройстве.
Разумно сворачивайте навигацию. Иконка меню — это нормально, но поиск и корзина должны оставаться видимыми в строке шапки.
Горизонтальную прокрутку используйте умеренно. Ряд товаров, прокручиваемый вбок, допустим, если он наглядно намекает на продолжение; сетка в столбик надёжнее.
Не показывайте полноэкранные всплывающие окна сразу при входе. Они закрывают страницу и могут навредить и удобству, и видимости в поиске. Отложите их или замените встроенным блоком подписки.
Учитывайте клавиатуру. Убедитесь, что поле подписки на рассылку не скрывается, когда открывается экранная клавиатура.

Скорость и доступность: основы

Красивая главная, которая медленно грузится, теряет посетителей раньше, чем они её увидят. Главные рычаги почти всегда — изображения и сторонние скрипты.

Сжимайте изображения и используйте современные форматы, такие как WebP или AVIF.
Задавайте изображениям явные ширину и высоту, чтобы вёрстка не смещалась при загрузке.
Загружайте hero-изображение первым; изображения ниже — лениво (lazy-load).
Проведите аудит каждого стороннего скрипта (чат, всплывающие окна, трекеры) и уберите то, чем не пользуетесь.
Пишите содержательный alt-текст для изображений товаров и категорий.
Проверьте, что у текста достаточный контраст с фоном и что каждым интерактивным элементом можно пользоваться с клавиатуры.

Воспользуйтесь Google PageSpeed Insights на живом URL, чтобы увидеть, какие именно файлы тормозят страницу.

Чек-лист главной страницы

Скопируйте его в свои заметки к запуску:

[ ] В шапке есть видимый поиск, корзина и 5–7 понятных ссылок на категории
[ ] Заголовок hero-блока простыми словами называет, что мы продаём
[ ] Одна главная кнопка; она ведёт к товарам, а не на страницу «О нас»
[ ] На hero-изображении реальный товар или реальное его использование
[ ] Доставка и возврат кратко описаны на первом экране или чуть ниже
[ ] Плитки категорий написаны языком покупателей и охватывают основные группы товаров
[ ] У бестселлеров реальные цены и ссылки на страницы товаров
[ ] Отзывы и упоминания в прессе показаны, только если они подлинные
[ ] Подписка на рассылку — одно поле с понятной выгодой
[ ] В подвале есть условия, контакты и способы оплаты
[ ] Нет карусели с автопрокруткой, прячущей важное содержимое
[ ] Мобильная версия проверена на реальном телефоне
[ ] Изображения сжаты, подобраны по размеру и снабжены alt-текстом
[ ] Title и meta description написаны именно для главной страницы

Частые ошибки

Попытка показать всё. Главная — это маршрутизатор, а не каталог.
Расплывчатый текст в hero-блоке. Если незнакомец не может за пять секунд понять, что вы продаёте, перепишите заголовок.
Одинаковое продвижение пяти вещей. Когда выделено всё, не выделено ничего.
Фальшивая срочность. Таймеры обратного отсчёта, которые сбрасываются при каждом визите, подрывают доверие.
Игнорирование вернувшихся посетителей. Подумайте о блоке «продолжить покупки» или «недавно просмотренное», если ваша платформа это поддерживает.

Более общие принципы создания главной страницы, не только для интернет-магазинов, разобраны в наших руководствах как спроектировать главную страницу и дизайн главной страницы сайта, а если вы ещё выбираете платформу, загляните в обзор лучших конструкторов сайтов для интернет-магазинов.

Применяем на практике

Начните с написания содержимого ещё до дизайна: заголовок, названия категорий, строки про доставку и возврат и шесть ваших лучших товаров. Затем расставьте их в порядке, описанном выше. Если нужен быстрый старт с макетом, бесплатный тариф We.Inc позволяет опубликовать до трёх сайтов на основе готовых шаблонов; ИИ-конструктор, который создаёт черновик сайта по запросу, доступен с тарифа Starter за $20 в месяц. Зарегистрироваться можно здесь. Какой бы инструмент вы ни выбрали, перед запуском сверьте каждый блок с чек-листом.

Начать бесплатно · Банковская карта не нужна

Umair Ali Sadaqat

Основатель We.Inc

Умайр — основатель We.Inc. Он пишет о создании сайтов с помощью ИИ, агентствах и ведении бизнеса веб-студии.

Готовы создать что-то стоящее?

Присоединяйтесь к 15,000+ компаний, которые с We.Inc запускаются, растут и автоматизируют работу — всё на одной платформе.

Начать бесплатно

Банковская карта не нужна · Связаться с отделом продаж