Кастомна адаптація 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), забезпечивши миттєвий відгук інтерфейсу без перезавантаження сторінки.

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

Вирішено проблему з відображенням складних та довгих назв модифікацій товарів — текст тепер переноситься коректно, зберігаючи загальну естетику дизайну.

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