С января 2024 года мы занимаемся доработкой интернет-магазина воздушных шаров и товаров для оформления мероприятий. За это время успели поработать над производительностью сайта, SEO, навигацией и пользовательскими сценариями — от поиска нужного товара до оформления доставки.
Содержание:
В этом материале разберем, что именно изменили, какие технические задачи пришлось решить и как обновили основные страницы магазина. Покажем не только результат редизайна, но и внутренние доработки, которые не всегда заметны посетителю, однако влияют на работу сайта.
О проекте
Интернет-магазин воздушных шаров разных цветов, форм и тематик, а также сервис оформления мероприятий.
- Регион: Москва, Россия.
- Период работ: с января 2024 года.
Перенесли сайт на более производительный хостинг
Одной из первых задач стала работа с производительностью. На прежнем хостинге сайт загружался медленно, а при увеличении нагрузки могли возникать дополнительные проблемы со стабильностью.
Мы решили перенести интернет-магазин на более мощный сервер. Это позволило сократить время отклика и повысить устойчивость сайта при пиковых нагрузках. Для посетителей это означает более комфортную работу с каталогом и страницами товаров, а для поискового продвижения скорость загрузки остается одним из значимых технических факторов.
До переноса мы замерили производительность встроенными инструментами Битрикс.
После переезда провели повторный замер.
Добавили SEO-текст под пагинацией
На страницах каталога разместили SEO-текст в нижней части — под блоком пагинации, то есть переключения между страницами списка товаров.
Такое расположение позволяет добавить описание раздела и необходимые ключевые слова, не перегружая верхнюю часть страницы и не мешая пользователям просматривать товары.
В результате структура страницы стала удобнее для размещения дополнительного контента, а поисковые системы получили больше информации о тематике соответствующего раздела.
Привели заголовки H2 и H3 в порядок
На главной странице, страницах категорий и карточках товаров мы убрали лишние заголовки второго и третьего уровней — H2 и H3. Это помогло сделать семантическую структуру сайта логичнее, не меняя привычный внешний вид страниц.
Отдельная задача возникла при работе с описаниями товаров. Встроенный редактор Битрикс использует заголовки для форматирования текста, поэтому в описаниях уже могли присутствовать соответствующие HTML-теги.
Можно было изменить привычный процесс подготовки контента и переучить редакторов. Но тогда пришлось бы менять рабочий сценарий сотрудников и вручную исправлять множество карточек товаров.
Вместо этого мы разработали механизм, который автоматически определяет, какие теги использовать для оформления описания. Редакторы продолжают работать с контентом привычным способом, а на стороне сайта текст получает корректную структуру.
Так описание выглядит в административной панели сайта:
Обновили разметку хлебных крошек
Переработали шаблон хлебных крошек — навигационной цепочки, которая показывает, в каком разделе сайта находится пользователь.
Разметку привели в соответствие с актуальными требованиями Schema.org. Благодаря этому поисковым системам проще интерпретировать структуру страниц и взаимосвязи между разделами сайта.
Обновили дизайн и добавили новые страницы
Помимо технических доработок, мы последовательно переработали основные элементы интерфейса и создали несколько новых страниц. Цель — упростить взаимодействие с магазином, сделать важную информацию доступнее и улучшить пользовательский опыт.
1. Создали страницу «Вопрос-ответ»
Добавили отдельную страницу с ответами на часто задаваемые вопросы.
Теперь пользователи могут самостоятельно найти нужную информацию, не обращаясь каждый раз в службу поддержки. Это упрощает поиск ответов и помогает снизить нагрузку на сотрудников.
2. Добавили страницу «Сертификаты»
Для размещения сертификатов выделили отдельную страницу.
Она позволяет собрать подтверждающие документы в одном месте и сделать их доступными посетителям. Такая информация помогает повысить доверие к магазину и подтвердить подлинность предлагаемых товаров или услуг.
3. Переработали страницу «Гарантия и возврат»
Обновили дизайн страницы, посвященной условиям гарантии и возврата.
Примечание: на изображении допущена опечатка в слове «Гарантия». Ее планируется исправить позднее.
4. Обновили страницу «О нас»
Переработали оформление страницы, рассказывающей о компании.
Обновленный дизайн помогает последовательнее представить информацию о магазине, выделить его особенности и достижения. Благодаря этому посетителям проще познакомиться с компанией и сформировать представление о том, у кого они собираются заказать товары.
5. Реализовали страницу «Избранное»
Добавили возможность сохранять понравившиеся товары, чтобы пользователь мог вернуться к ним позже.
Способ хранения зависит от того, авторизован посетитель или нет:
- Для авторизованных пользователей избранные товары сохраняются в базе данных.
- Для посетителей без авторизации используются cookies.
Таким образом, функция доступна независимо от того, вошел ли пользователь в учетную запись.
6. Переработали карточку товара
Карточка товара — одна из ключевых страниц интернет-магазина: именно здесь покупатель знакомится с предложением и принимает решение о покупке.
Мы обновили ее оформление и добавили несколько элементов, которые помогают быстрее получить необходимую информацию и перейти к заказу.
До изменений:
После изменений:
Что сделали:
- Добавили артикул. Теперь идентификатор товара отображается непосредственно в карточке.
- Вывели рейтинг рядом с отзывами. Пользователю проще оценить обратную связь от других покупателей.
- Добавили возможность поделиться товаром в социальных сетях. Понравившуюся позицию стало удобнее отправить другим людям.
- Реализовали кнопку «Купить в 1 клик». Она позволяет перейти к упрощенному сценарию покупки.
- Переработали блок преимуществ в описании. Раньше он представлял собой изображение, теперь это отдельный элемент верстки.
В результате карточка стала информативнее, а основные действия — заметнее и доступнее.
7. Обновили меню каталога
Переработали меню каталога в десктопной версии сайта.
До:
После:
Изменения затронули визуальное оформление навигации по товарам. Обновленное меню стало частью общего редизайна интерфейса.
8. Переделали футер
Обновили нижнюю часть сайта — футер, который остается важным элементом навигации независимо от содержимого конкретной страницы.
До:
После:
В новой версии сделали акцент на контактной информации и ссылках на важные страницы. Задача заключалась в том, чтобы футер выглядел аккуратнее и помогал посетителям быстрее находить нужные сведения.
9. Полностью обновили оформление заказа
Оформление заказа стало одной из наиболее масштабных частей работы.
Раньше страница была предельно простой: пользователь мог перейти к заказу, но автоматического расчета стоимости доставки не было.
До изменений:
Мы обновили не только внешний вид страницы, но и ее функциональность.
Работа с корзиной и итоговой суммой
Теперь пользователь может полноценно управлять товарами в корзине. Блок с итоговой стоимостью вынесли в правую часть страницы, где он постоянно остается на виду.
Автоматический расчет доставки
Разработали механизм расчета стоимости доставки с использованием API Яндекса. Система определяет расстояние до покупателя и на основании полученных данных рассчитывает стоимость доставки.
Это позволяет точнее определять цену доставки с учетом расстояния до адреса клиента.
Подсказки при вводе адреса
Для работы с адресами подключили базу DaData. Улицы подгружаются из нее автоматически, а пользователь может исправить опечатки при вводе.
База содержит широкий перечень улиц, что упрощает заполнение адреса и помогает снизить вероятность ошибок.
Выбор даты и времени доставки
Разработали отдельный модуль, позволяющий выбрать удобные дату и время доставки.
При этом предусмотрено ограничение: оформить доставку ранее чем через два часа после создания заказа нельзя. По умолчанию система устанавливает время с учетом этого интервала — к моменту оформления автоматически прибавляются два часа.
В итоге оформление заказа стало не просто обновленной страницей, а полноценным интерфейсом с управлением корзиной, расчетом стоимости доставки и выбором времени получения.
10. Сделали шапку сайта компактнее
Переработали верхнюю часть сайта — шапку, в которой расположены важные элементы навигации.
До:
После:
Новый вариант получился компактнее. При обновлении сохранили акцент на доступности ключевой информации и навигационных элементов, чтобы посетителям было удобнее пользоваться сайтом.
11. Переработали поиск по сайту
Полностью обновили систему поиска товаров.
Раньше поиск выглядел иначе, а теперь в результатах отображаются изображения товаров и их стоимость. Кроме того, появилась возможность искать не только конкретные товары, но и разделы каталога.
До:
После:
Для реализации обновленного поиска подключили поисковый движок Sphinx.
В результате поиск стал информативнее: пользователи могут оценить найденные позиции по изображению и цене, а также быстрее перейти к нужной категории.
12. Обновили модальные окна
Привели модальное окно покупки товара в соответствие с новым дизайном сайта.
Это изменение дополнило обновление карточки товара и помогло сохранить единый визуальный стиль интерфейса при переходе к покупке.
Что получили в результате
Работа над интернет-магазином охватила сразу несколько направлений: производительность, техническое SEO, навигацию, дизайн и функциональность оформления заказа.
Переезд на более производительный хостинг позволил повысить стабильность сайта и улучшить время отклика. Изменения в структуре заголовков, разметке хлебных крошек и размещении SEO-текста помогли упорядочить страницы с точки зрения поисковых систем.
Параллельно мы обновили интерфейс и расширили возможности магазина. Появились страницы «Вопрос-ответ», «Сертификаты» и «Избранное», а также обновленные карточки товаров, меню каталога, шапка и футер.
Отдельное внимание уделили оформлению заказа. Теперь покупатель может управлять содержимым корзины, видеть итоговую сумму, получать расчет стоимости доставки по расстоянию и выбирать дату и время получения заказа с учетом установленного двухчасового интервала.
При этом многие технические изменения не требуют от сотрудников менять привычный рабочий процесс. Например, механизм автоматического определения тегов позволяет редакторам продолжать готовить описания товаров в привычном редакторе Битрикс, сохраняя корректную структуру страниц.
В результате интернет-магазин получил обновленный интерфейс, дополнительные инструменты для покупателей и техническую основу для более стабильной работы. Изменения направлены на то, чтобы пользователям было проще находить товары, получать необходимую информацию и проходить путь от выбора позиции до оформления заказа.
Источник: vc.ru