Структура интернет-магазина: что должно быть на сайте, чтобы покупали

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

Разберём, что должно быть на сайте интернет-магазина, на двух готовых примерах: зоомагазин «Лапки» и магазин техники «ТехноМаркет». Оба - наши демо, собранные в Wuna: товары, цены, рейтинги и отзывы в них условные, а набор блоков типовой для розницы. Это не инструкция по сборке, она есть в отдельной статье. Здесь про то, какие тринадцать блоков нужны, в каком порядке и зачем.

Главная страница интернет-магазина

Шапка: поиск, категории, корзина

Шапка магазина отличается от шапки любого другого сайта тем, что в ней живёт поиск. У «Лапок» строка поиска стоит рядом с логотипом, а в верхней полосе - телефон и почта. У «ТехноМаркета» поиск занимает половину ширины, под ним строка из восьми категорий, а справа «Избранное», вход в кабинет и корзина. В магазине с десятком категорий строка категорий в шапке экономит два клика, а личный кабинет нужен, как только появляются повторные заказы.

Первый экран с одним действием

Баннер на первом экране ведёт в одно место. У «Лапок» это «Всё для вашего любимца» с кнопкой «В каталог» и фотографией собаки, у «ТехноМаркета» - красный слайдер «Скидки до −40% на всё» с кнопкой «Перейти к скидкам». Рядом с баннером в обоих случаях стоят карточки категорий: «Корм для собак», «Корм для кошек», «Смартфоны от 14 999 ₽», «Ноутбуки: скидки до 25%». Тот, кто пришёл за конкретным, не должен листать до каталога.

Полоса доверия: доставка, оплата, возврат

Сразу под первым экраном четыре коротких обещания. У «Лапок»: «Бесплатная доставка при заказе от 3 000 ₽», «Безопасная оплата», «Возврат 14 дней», «Поддержка 7 дней с 9:00 до 21:00». У «ТехноМаркета»: «Быстрая доставка от 1 часа по городу», «Гарантия качества: оригинальная техника», «Удобная оплата: картой, наличными, в кредит», «Возврат 14 дней». Блок делается за час и снимает четыре вопроса, которые иначе задают в мессенджере или не задают вовсе.

Категории товаров с количеством

Блок категорий показывает число товаров в каждой. У «Лапок» это «Для собак - 4», «Для кошек - 5», и цифры сходятся с каталогом. В живом магазине счётчик считается из каталога; в демо цифры условные. Фотографии в категориях зоомагазина с животными, у магазина техники предметные, и это правильно для каждой из тематик.

Витрина с кнопкой «В корзину»

Витрина на главной состоит из полноценных карточек: цена, старая цена и процент скидки, рейтинг с числом отзывов, метка «Хит» или «Новинка», выбор количества и кнопка «В корзину». Посетитель может купить, не открывая карточку. У «ТехноМаркета» витрина повторяется трижды под разными заголовками: хиты, распродажа, новинки. У «Лапок» товаров двенадцать и витрина одна, и для такого каталога этого достаточно.

Акции и отзывы

«Лапки» показывают три акции, одну с датой («−25% на сухие корма до 15 октября»), и пять отзывов с именем и подписью, кто покупатель: «владелица кошки», «аквариумист». Подпись говорит, чей это опыт, и работает сильнее звёздочек. У «ТехноМаркета» на главной отзывов нет, вместо них блок «Нужна помощь с выбором?» с часами работы консультантов. Для техники отзывы важны не меньше, но им место в карточке, а на главной работает обещание живого совета.

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

Подписка на рассылку

Внизу главной «Лапок» стоит форма подписки с обещанием промокодов и советов по уходу, под ней согласие на обработку данных. Для небольшого магазина это самый дешёвый способ вернуть посетителя, который ничего не купил. Одно поле и галочка, больше ничего.

Футер: контакты, реквизиты, документы

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

Каталог интернет-магазина: фильтры, сортировка, наличие

Какие фильтры нужны в каталоге

Каталог «Лапок» фильтруется по цене ползунком, категории, типу товара (корма, игрушки, лежанки, амуниция, средства ухода), акциям и рейтингу. У «ТехноМаркета» добавлены бренды, и у каждого стоит число товаров: «Apple - 4», «Samsung - 3». Над списком «Найдено товаров: 3» и кнопка «Сбросить фильтры». У «Лапок» по умолчанию сортировка по популярности. Счётчики у фильтров важнее самих фильтров: они заранее говорят, что выбор даст результат, а не пустую страницу.

Товар не в наличии: что показывать вместо кнопки

У переноски для кошек в каталоге «Лапок» статус «Нет в наличии», и вместо «В корзину» стоит «Сообщить о поступлении». Пропавшая кнопка теряет продажу, замена кнопки её откладывает. Второй вариант того же приёма - переключатель «Только в наличии» у «ТехноМаркета»: он убирает разочарование ещё до клика.

Карточка товара: что должно быть

Выше кнопки «В корзину»: цена, выгода, наличие, гарантии

В карточке смартфона у «ТехноМаркета» сверху вниз: метка «Хит», бренд, название, рейтинг, цена со старой ценой, строка «Ваша выгода: 15 000 ₽», описание в одно предложение, количество, «В наличии», кнопки «В корзину» и «В избранное». Под ними три иконки: бесплатная доставка, гарантия 2 года, возврат 14 дней. Правило одно: всё, что влияет на решение, стоит выше кнопки.

Ниже кнопки: характеристики, отзывы, похожие товары

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

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

Корзина и оформление заказа

Корзина: сводка справа, обещания под кнопкой

Обе корзины устроены одинаково: слева товары с изменением количества, справа сводка «Товары, Доставка, Итого», поле промокода и кнопка «Оформить заказ». Под кнопкой снова три коротких обещания: безопасная оплата, возврат 14 дней, поддержка. Это момент, когда покупатель сомневается в последний раз, и три строки текста стоят дешевле скидки. Пустая корзина у «ТехноМаркета» не тупик: «Корзина пуста» и кнопка «Перейти к товарам».

Страница «Доставка и оплата»

У «Лапок» это отдельная страница: три способа получения (курьер от 290 ₽ за 1-3 дня, пункты выдачи от 150 ₽ за 2-5 дней, самовывоз бесплатно через 2 часа), процесс из четырёх шагов от оформления до доставки и три способа оплаты. Такую страницу ищут через поиск по сайту и через Яндекс, поэтому ей нужен свой адрес и заголовок, а не всплывающее окно.

Условия доставки должны совпадать везде: в полосе доверия, в карточке, на странице доставки и в корзине. Сверьте их перед публикацией.

Мобильная версия интернет-магазина

Большая часть заказов в рознице делается с телефона, поэтому мобильную версию проверяют не по принципу «помещается ли», а «можно ли купить в три касания». В обоих магазинах на телефоне поиск остаётся в шапке, категории превращаются в горизонтальную ленту кнопок, фильтры прячутся в кнопку «Фильтры» со счётчиком выбранных, а «В корзину» стоит в каждой карточке каталога. Первый экран «Лапок» на телефоне вмещает баннер, кнопку в каталог и начало полосы доверия.

Структура сайта: какие страницы нужны и как они связаны

Блоки на страницах - половина структуры. Вторая половина - сами страницы и адреса. Иерархия у магазина всегда одна: главная → категория → подкатегория → карточка товара, плюс служебные страницы: доставка и оплата, возврат, о магазине, контакты, оферта и политика. У обоих демо каталог живёт по адресу вида «/products», категории открываются как «/products?category=smartphones», карточки как «/products/1».

Для поиска лучше, когда у категории свой адрес словами: «/catalog/koshki/korm/» вместо параметра в строке. Страница категории «Корм для кошек» с заголовком, текстом на два абзаца и товарами становится посадочной под запрос «корм для кошек купить» и под рекламу, как посадочная страница для Директа. Один товар - один адрес, без дублей через параметры. И на каждой странице глубже главной нужны хлебные крошки «Главная / Каталог / Для собак», как у «Лапок»: они и навигация, и подсказка поисковику, где страница лежит.

Структура магазина по нишам: зоотовары и техника

Набор блоков у двух демо одинаковый, разница в акцентах, и её стоит перенести на свою тематику.

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

Если товаров пять и они меняются редко, магазин с корзиной не нужен: хватит каталога с заявкой, как у сайта кондитера, или вовсе страницы в соцсети, что разобрано в статье сайт, Telegram, VK или Авито.

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

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

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

Хендмейду, чайной лавке и текстилю к общему набору нужны история мастера, пометка «один экземпляр», граммовка или размер и подарочная упаковка: структура сайта магазина ручной работы.

Чек-лист: проверьте структуру своего магазина

1. В шапке есть поиск, корзина и способ связи?
2. На первом экране одна кнопка и она ведёт в каталог или к акции?
3. Условия доставки, оплаты и возврата видны на главной без клика?
4. У категорий стоит число товаров, и оно совпадает с каталогом?
5. Из витрины на главной можно положить товар в корзину, не открывая карточку?
6. Есть хотя бы одна акция с датой и отзывы с подписью, кто покупатель?
7. Форма подписки из одного поля с согласием на обработку данных?
8. В подвале реквизиты, оферта, политика и условия возврата?
9. У фильтров стоят счётчики, есть сортировка и «Сбросить фильтры»?
10. У товара, которого нет, вместо кнопки стоит «Сообщить о поступлении»?
11. В карточке цена, выгода, наличие и три гарантии видны без прокрутки?
12. Ниже кнопки есть характеристики, отзывы и похожие товары?
13. В корзине сводка справа, промокод и обещания под кнопкой «Оформить заказ»?

Отдельно: у страницы доставки свой адрес, у категорий адреса словами, на телефоне покупка в три касания.

Как собрать такой магазин

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

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

Собрать интернет-магазин бесплатно