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

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

Десктоп Copy-icon

На главной странице отображаются:

  1.  шапка (хедер) сайта
  2. баннер (или карусель из баннеров)
  3. рекомендательная полка "Бестселлеры"/"Current bestsellers"
  4. рекомендательная полка "Лучшее предложение"/"Best suggestion"
  5. футер сайта

Подробнее о логике работы каждого компонента страницы вы можете узнать ниже.

Шапка (хедер) на десктопе Copy-icon

На десктопе в шапке сайта отображаются:

  1. разворачивающееся меню навигации для перехода на главную страницу, каталогблог, страницы "О нас" и "Что нового"
  2. кликабельное лого для возврата на главную с любой страницы сайта
  3. строка поиска
  4. текущая локация
  5. выбор языка, на котором отображается сайт
  6. выбор валюты, в которой отображается стоимость товаров
  7. иконка корзины со счетчиком товаров в корзине
  8. иконка избранного для перехода на страницу избранных товаров пользователя
  9. (если пользователь не авторизован) кнопка "Вход"/"Login" для перехода к форме регистрации/авторизации; (если пользователь авторизован) инициалы клиента, при наведении на которые отображается выпадающее меню для перехода в личный кабинет
Изображение статьи

При скролле шапка сохраняет свое положение и всегда отображается в верхней части экрана.

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

Поисковая строка на десктопе Copy-icon

Чтобы воспользоваться строкой поиска, нужно кликнуть на нее, затем ввести как минимум 1 символ поискового запроса, а затем сместить фокус мыши/нажать на Enter/кликнуть на иконку "Лупа" в левом углу строки.

Поиск регистронезависимый, возможен как по частичному, так и полному совпадению запроса и осуществляется по всем товарам и категориям каталога интернет-магазина.

Если на поисковый запрос не найдено соответствий, то на экране отобразится сообщение "По вашему запросу ничего не найдено", а под ним блок "Возможно вас заинтересует" с подборкой рекомендованных товаров.

Изображение статьи

Если на поисковый запрос соответствия есть, то на экране отобразится:

  • текст "По запросу "{текст запроса}" найдено {количество} товаров"
  • листинг мини-карточек товаров, подходящих под запрос Клиента
Изображение статьи

Чтобы сбросить результаты поиска, нажмите на крестик в правом углу поисковой строки.

Текущая локация на десктопе Copy-icon

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

Подробнее о настройке регионов в BackOffice можно узнать в Настройки в BackOffice.

По клику на локацию отображается:

  • Текущий населенный пункт и дополнительный список локаций
  • Строка поиска нужного населенного пункта
Изображение статьи

Для поиска нужной локации:

1. Кликните на строку поиска.

2. Введите как минимум 1 символ названия населенного пункта.

Поиск регистронезависимый и осуществляется как по частичному, так и по полному совпадению.

3. Выберите нужный вариант из предложенного списка.

Изображение статьи

Если результатов, подходящих под поисковый запрос, нет, то отобразится текст “По вашему запросу ничего не найдено”.

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

Избранные товары на десктопеCopy-icon

По клику ни иконку избранного:

  • (если пользователь не авторизован) отобразится окно входа и регистрации
  • (если пользователь авторизован) отобразится страница со списком избранных товаров клиента

Баннер (карусель из баннеров) на десктопе Copy-icon

На момент написания статьи (24/07/2024) баннер не кликабелен. Будет дополнено.

Узнать подробнее о том, как настраивается отображение баннера, можно здесь.

Изображение статьи

Подробнее о логике работы каждого компонента страницы можно узнать ниже.

Шапка (хедер) в МВС Copy-icon

При скролле шапка сохраняет свое положение и всегда отображается в верхней части экрана. В шапке отображаются:

  1. кнопка отображения бокового меню
  2. кликабельное лого для возврата на главную с любой страницы сайта
  3. иконка корзины со счетчиком товаров в корзине
  4. иконка перехода к избранным товарам
  5. (если пользователь не авторизован) кнопка "Вход"/"Login" для перехода к форме регистрации/авторизации; (если пользователь авторизован) инициалы клиента, при наведении на которые отображается выпадающее меню для перехода в личный кабинет
Изображение статьи

В боковом меню находятся:

  1. кнопка выбора текущей локации
  2. кнопка выбора языка сайта интернет-магазина
  3. кнопка выбора валюты, в которой отображается стоимость товаров
  4. кнопки "Главная"/"Home", "Каталог"/"Products""Блог"/"Блог""О нас"/"About""Что нового"/"What's new"
Изображение статьи

Чтобы свернуть боковое меню, тапните на крестик в левом верхнем углу экрана или по любой области за пределами меню.

Текущая локация в МВСCopy-icon

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

Подробнее о настройке регионов в BackOffice смотрите Настройки в BackOffice.

Изображение статьи

По тапу на локацию отображается:

  • текущий населенный пункт и дополнительный список локаций
  • строка поиска нужного населенного пункта
Изображение статьи

Для поиска нужной локации:

1. Тапните на строку поиска.

2. Введите как минимум 1 символ названия населенного пункта.

Поиск регистронезависимый и осуществляется как по частичному, так и по полному совпадению.

3. Выберите нужный вариант из предложенного списка.

Если результатов, подходящих под поисковый запрос, нет, то отобразится текст "По вашему запросу ничего не найдено".

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

Избранные товары в МВС

По тапу ни иконку избранного:

  • (если пользователь не авторизован) отобразится окно входа и регистрации
  • (если пользователь авторизован) отобразится экран со списком избранных товаров клиента

Строка поиска в МВС

В МВС строка поиска отображается под шапкой на страницах:

  • главная
  • каталог
  • PDP товара

Чтобы найти товар, нужно ввести как минимум один символ поискового запроса, а затем нажать на "Ввод"(iOS)/"Ок"(Android).

Поиск регистронезависимый, возможен как по частичному, так и полному совпадению запроса и осуществляется по всем товарам и категориям каталога интернет-магазина.

После этого отображается на экран с результатами поиска и текстом "По запросу "{текст запроса}" найдено {количество} товаров".

Изображение статьи

Если на поисковый запрос не найдено соответствий, то на экране отобразится сообщение "По вашему запросу ничего не найдено", а под ним блок "Возможно вас заинтересует" с подборкой рекомендованных товаров.

Изображение статьи

Чтобы сбросить результаты поиска, нажмите на крестик в правом углу поисковой строки.

Баннер (карусель из баннеров) в МВС Copy-icon

На момент написания статьи (24/07/2024) баннер не кликабелен. Будет дополнено.

Узнать подробнее о том, как настраивается отображение баннера, можно здесь.

Рекомендательные полки в МВСCopy-icon

Подробнее об отображении и поведении блоков с рекомендованными товарами смотрите в Рекомендательные полки.

Футер в МВС Copy-icon

В футере отображаются ссылки для перехода на страницы с информацией о e-commerce платформе и ее преимуществахновостями о релизе и политикой конфиденциальности.