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

Подготовьте лист мобильных изменений: место настройки, действие посетителя и ожидаемый результат. Разберём его на условном магазине домашнего текстиля. Каталог и проверки ниже придуманы для объяснения; настройки действующего сайта не менялись. Результат статьи – способ управлять доступными опциями и принимать их показ отдельно на телефоне, планшете и компьютере.

Мобильное оформление Хорошоп: независимые входы в каталог, сведения без наведения и секции телефона и планшета
Мобильное оформление Хорошоп связывают с маршрутом покупателя: два независимых входа в каталог, подготовленные данные без наведения и разный порядок секций телефона и планшета. Иллюстрация показывает связи, а не выполненную настройку магазина.

Ограничьте изменение нужной частью сайта

Мобильная группа находится в «Сайт → Дизайн → Редактор дизайна → Мобильная версия сайта». В руководстве мобильного редактора отдельно описаны меню, страница категории, миникарточка и страница товара. Выбирайте конкретный элемент, а не меняйте оформление целиком ради одного неудобного перехода.

Сохраните прежние значения и снимки затронутых мест. Запишите, что должно измениться, а что требуется сохранить на компьютере. Готовая палитра и комплект баннеров не заменяют такой записи: здесь принимается действие посетителя, а не общий стиль магазина.

В учебном каталоге раздел «Постельное бельё» содержит «Наволочки» и «Пододеяльники». У наволочек уже подготовлены материал, размеры и соответствующие фильтры. Цель – дойти до наволочек, выбрать размер 70×70 и увидеть материал подходящего товара. Создание характеристик и исправление товарных связей в этот пример не входят.

Разведите два входа в каталог

Выпадающее меню шапки и кнопка каталога на главной настраиваются независимо. В инструкции по навигации для меню предусмотрены отдельные опции: «Отображать кнопку “Каталог” на первом уровне» и «Открывать следующие уровни категорий в подменю». Они определяют начало маршрута и способ раскрытия вложенных разделов.

Например, для начала сразу с разделов первого уровня инструкция предлагает выключить первую опцию. Вторую оставляют включённой, если вложенные категории должны открываться в отдельных панелях. Это один допустимый вариант. Его не следует объявлять лучшим для любого ассортимента или включать без согласованного образца.

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

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

Проверьте условия показа внутри категории

На странице категории есть собственный блок «Меню подкатегорий». Документация мобильного каталога описывает компактный вид кнопками и вертикальный вид строками. Часть списка может скрываться под кнопкой «Все категории». Проверьте, что посетитель действительно может открыть оставшиеся пункты.

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

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

Покажите нужные сведения без наведения

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

Для кратких характеристик источник находится в поле страницы «Характеристики для миникарточки». Если материал не выбран или не заполнен у товара, один переключатель оформления не создаст нужную строку. Разберите отдельно настройку показа и сами данные. Не добавляйте повторную характеристику ради появления текста на одном экране.

До сохранения полезно составить такую таблицу ожиданий. Это условная проверка маршрута; она не подтверждает выполненную настройку или правильность всего каталога.

МестоДействиеОжидаемый результатЧто сверить отдельно
Меню шапкиОткрыть разделы первого уровняНайден путь к наволочкамНастройки кнопки на главной
Меню категорииРаскрыть «Все категории»Доступен оставшийся списокДочерние это разделы или соседние
Фильтр размераВыбрать 70×70Условие видно при включённом показе выбранных фильтровРазмеры отобранных товаров
МиникарточкаПрочитать краткие свойстваВиден подготовленный материалВыбор поля на странице и значение товара
Страница товараОткрыть описание и выбор размераНужные данные и элементы доступныПорядок секций на телефоне и планшете

Различайте телефон и планшет

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

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

Последовательность четырёх секций товара на телефоне и расположение левой и правой секций рядом на планшете
Схема передаёт описанный Хорошопом порядок секций. Содержание блоков условное; это не результат просмотра на реальном устройстве.

Примите изменение по повторяемому маршруту

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

  • Покупатель доходит до нужного раздела из обоих предусмотренных входов.
  • Навигация и фильтры показывают согласованные условия и подходящие товары.
  • Сведения миникарточки читаются без наведения, а карточка товара содержит нужные данные.
  • Замечания телефона и планшета записаны раздельно и проверены после исправления.

Для поисковой проверки ориентируйтесь на рекомендации Google о мобильном содержании. Google использует мобильную версию для индексирования; основной контент должен оставаться доступным и эквивалентным компьютерному. Другой макет или вкладки допустимы. Наличие нужного текста в HTML не доказывает фактическую индексацию страницы или удобство на конкретном телефоне.

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

Нужна помощь с вашим проектом?

Оставьте имя и телефон. Свяжусь с вами, чтобы обсудить задачу, объём работ и следующий шаг.

Обсудить проект