Разработка сайта и блога для спортивного интернет магазина
Shopify без шума и пыли: аккуратный рефакторинг, сильная главная, закрытая страница обучения и блог с внутренней перелинковкой. Конверсия — в фокусе, код — под контролем. Мы не начинали с нуля — мы аккуратно довели начатое: вычистили технический долг, вынесли повторяющиеся куски в snippets, настроили единые правила сборки и логгирования. Главную страницу собрали из модульных секций, чтобы команда могла быстро переставлять блоки и запускать кампании. Для обучающего контента сделали скрытую страницу с удобным каталогом видео, возможностью подтвердить подлинность товара и получить гарантию. Доработали блог чтоб он соответсвовал потребностям заказчика и современным стандартам.
Проект стартовал в другой команде и пришёл к нам не напрямую, а через партнёрское агентство. Мы работали в формате выделенной команды. Наша задача была аккуратно подхватить кодовую базу, довести сайт до продакшн-качества, максимально сохраняя исходный визуальный язык, но при этом сделать страницы гибкими и «живыми»: отрефакторить тему, собрать сильную главную, привести в порядок скрытую страницу с видеоинструкциями и систематизировать блог. После выполнения согласованного объёма работ поддержка вернулась к основному подрядчику: мы передали всю документацию, доступы и артефакты, закрыли задачи и формально завершили участие.
Наш принцип Дизайн — нетронут. Логика — модернизирована. Мы оставили композицию, сетку, типографику и характерные элементы бренда, а внутри заменили «жёстко прошитые» участки на динамические источники данных: метаполя, metaobjects и секции Online Store 2.0. В результате контент-менеджер управляет содержимым без правок кода, а разработка концентрируется на эволюции продукта, а не на мелких правках.
Что мы сделали
- Рефакторинг темы (без потери визуала) Привели Liquid к единому стилю, вынесли повторяющиеся блоки в snippets, разобрали «инлайновые» костыли.
Настроили динамические источники (dynamic sources) для изображений, заголовков, CTA, списков — вместо «хардкода».
Оптимизировали ассеты: чистка неиспользуемого JS/CSS, минификация, defer/async, корректные preload для шрифтов.
Изображения — через image_url с наборами ширин, loading="lazy" и адаптивными постерами.
Добавили системные metafields и metaobjects для повторяющихся сущностей (от карточек преимуществ до блоков UGC).
Зачем: код стал предсказуемым, секции — переиспользуемыми, а контент — редактируемым из админки без вмешательства разработчика.
- Главная страница (гибкая, но знакомая) Сохранили композицию и стили, разложили страницу на модульные секции: хиро, преимущества, витрины коллекций, отзывы, UGC-блок.
Для каждой секции сделали настраиваемые пресеты и понятные schema — удобно запускать кампании и быстро переставлять блоки.
Производительность: критический CSS для above-the-fold, аккуратные анимации без jank, контроль LCP/CLS по Lighthouse.
Контентные блоки подключены к метаполям и metaobjects: тексты, медиагалерея, ссылки и бейджи меняются из админки.
Зачем: маркетинг запускает гипотезы за минуты, дизайн остаётся консистентным, страница работает быстро на мобильных.
- Скрытая страница видеоинструкций (структура и приватность) Отдельный шаблон + metaobject «Инструкция»: название, описание, теги, постер, ссылка на видео, длительность.
Удобный поиск/фильтры по тегам (тип устройства/сложность), адаптивный встроенный плеер, сетка карточек.
Доступ — по прямой ссылке и/или по тегу покупателя; убрано из меню; добавлен noindex.
Зачем: клиентам легко ориентироваться, поддержке — проще ссылаться на конкретные ролики, SEO не «засоряется» служебными страницами.
- Блог (не просто статьи, а система контента) Спроектировали рубрики и шаблоны статей, добавили оглавление, «Дальше по теме», шэринг.
Разметка Article/FAQ для поисковиков, единая типографика и аккуратные карточки списка.
Перелинковка между материалами, автообложки из метаполей, чистка устаревших публикаций.
Зачем: блог стал источником стабильного органического трафика и площадкой для экспертности бренда.
Контент-гавернанс и качество Правила именования метаполей и секций, чтобы редакторы не путались.
Pre-release чек-лист: валидация ссылок, обложек, alt-текстов, схемы данных.
Драфтовая среда/пароль для безопасных правок перед публикацией.
Мониторинг Lighthouse и логирование фронтенд-ошибок (сборка без «тихих» падений).
Результат для бизнеса Скорость изменений: тексты, баннеры, подборки — через админку; релизы быстрее и предсказуемее.
Стабильность и перформанс: корректная загрузка шрифтов/изображений, бережные анимации, мобильная отзывчивость.
Масштабируемость: новые страницы собираются из готовых секций; кодовая база — чистая и поддерживаемая.
Использованные технологии
Достигнутые результаты
+100% к интерактивности страниц
Улучшен пользовательский опыт
Отказ от хардкода
Хотите создать похожий проект?
Расскажите о вашей идее, и мы поможем её реализовать