Большое обновление «whatasoft: Интернет-магазин». Обновление дизайна каталога и внутренних страниц — советы в блоге

Мы подготовили большое обновление для решения «whatAsoft:Классический интернет-магазин». Изменения глобальные, затронули и функциональную, и визуальную части. Добавили новые модули, освежили дизайн, переработали мастер установки и внедрили новую панель настроек. В предыдущей статье мы начали рассказывать об изменениях в дизайне, в этой статье продолжим описывать улучшения в дизайне, а функциональные и архитектурные изменения опишем в следующих статьях. Итак, к обзору.

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

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

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

И так же, как и в списке разделов поработали над уменьшением избыточного пространства в дизайне. Сделав подачу информации более концентрированной и удобной.

Мы переработали карточку товара, сделав её более информативной, современной и функциональной:

1.     Добавили поле указания количества для добавления в корзину.

2.     Использовали символ рубля во всех блоках вывода цены.

3.     Вспомогательные функциональные элементы окрашиваются в дополнительный цвет из темы.

4.     Увеличили размер заголовка и одновременно сократили расстояние между элементами навигации.

5.     Вывели обратный отсчёт времени для товаров, участвующих в акциях.

6.     Изменили способ подключения видео — теперь доступна вставка любого источника через iframe (YouTube, VK, Rutube и другие). Видео подключается через отдельное поле в админке.

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

На странице оформления заказа было внесено несколько обновлений, направленных на повышение удобства и улучшение визуального восприятия. Заменили сокращение «руб.» на символ рубля, чтобы блок с ценой отображался одинаково на всех страницах сайта. Это формирует единый стиль и улучшает восприятие от сайта в целом. Добавили изображение для наличного способа оплаты, чтобы было удобнее ориентироваться при выборе метода оплаты.

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

Рисунок 5 – Оформление заказа

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

·       Измененный вывод 404 страницы.

·       Указание альтернативного изображения для мобильных устройств, расширили возможности вывода текста.

·       Возможность настройки сквозного блока в правой колонке. Можно отключить блок или выводить новости, статьи либо всё вместе.

·       Новое меню личного кабинета.

Страницу 404 за счёт более компактного вывода дерева сайта существенно сократили. Это упрощает навигацию и улучшает восприятие страницы.

Сквозной блок в правой колонке теперь настраивается. Можно либо новости, либо статьи или всё вместе. При этом можно выбирать порядок выбора: либо первыми новости, либо первыми статьи.

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

Решение сменило название и теперь оно звучит как «whatAsoft: Интернет-магазин Старт». Несмотря на глубокое обновление решения до конца мая цена на него останется на прежнем уровне – 24 000 рублей. А с 1 июня 2025 года цена повысится на символическую сумму – 900 рублей и составит 24 900 рублей.