Кастомная адаптация Shopify-темы для «NY Shelves»

Ссылка на проект: nyshelves.com

Роль: Frontend-разработчик / Shopify-специалист

Стек технологий: Liquid (Shopify), HTML5, CSS3 / SCSS, JavaScript (Vanilla JS)

О проекте
«NY Shelves» — это современный интернет-магазин стильных интерьерных полок. Основной акцент в дизайне сделан на минимализм, премиальный внешний вид и фокус на высококачественном визуальном контенте (карточках товаров, галереях).

Задачи проекта
Кастомизация UI-компонентов: Создать уникальный дизайн для ключевых элементов интерфейса (шапка сайта, карточка товара), который не вписывался в рамки стандартных настроек готовой Shopify-темы.

Идеальный адаптив (Mobile-First): Обеспечить безупречное отображение сайта на смартфонах и планшетах, оптимизировав навигацию и элементы взаимодействия.

Повышение UX/UI: Упростить процесс выбора вариаций товара и улучшить читаемость интерфейса для повышения конверсии в покупку.

Реализованные технические решения
1. Кастомная карточка товара (Product Page Layout)
Гибкая сетка вариантов (Размеры/Чипы): Переписал стандартную логику выпадающих списков на динамическую адаптивную сетку «чипсов» (Chips). На десктопе применил grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)), что позволило кнопкам автоматически распределяться по ширине экрана и корректно переносить длинный текст без выхода за пределы блоков.

Интерактивная галерея: Реализовал отзывчивый слайдер изображений с возможностью переключения через миниатюры и навигационные стрелки. На мобильной версии настроил соотношение сторон 1:1 для картинок, чтобы избежать вертикального растягивания.

2. Оптимизация Хедера и Многоуровневого Мобильного Меню
Многоуровневая структура навигации: Модернизировал mobile-drawer (выезжающее меню). Добавил вложенные циклы Liquid для вывода подкатегорий второго уровня (link.links), настроил для них правильные отступы и визуальную иерархию, решив проблему скрытых категорий на смартфонах.

Умный Sticky-эффект: Закрепил шапку сайта вверху экрана с помощью position: sticky и изоляции контекста наложения (isolation: isolate, z-index), что исключило перекрытие меню другими кастомными блоками сайта во время скролла.

Динамическая корзина: Интегрировал асинхронное обновление счетчика товаров в корзине (cart-badge) через перехват нативных Shopify API-запросов (Fetch API), обеспечив мгновенный отклик интерфейса без перезагрузки страницы.

Результаты работы
Сайт полностью оптимизирован под любые разрешения экранов: от небольших смартфонов до широкоформатных мониторов.

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

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