Pixel-Perfect перенос дизайну з Figma в Shopify

Опис завдання:
Основна мета — повна реалізація унікальних блоків інтернет-магазину настільних ігор преміум-класу Loomino. Завдання включало розробку кастомних Liquid-секцій з ідентичною відповідністю макету у Figma, складну логіку вибору товарів та адаптацію під мобільні пристрої.

Ключові етапи та технічні рішення:

Розробка секції FBT (Frequently Bought Together):

Створення динамічного блоку пропозицій, де користувач може вибирати додаткові товари за допомогою чекбоксів.

Реалізація перерахунку загальної ціни в реальному часі на стороні клієнта (JavaScript) з урахуванням знижок.

Написання логіки додавання декількох товарів (multiple variants) у кошик одним кліком через AJAX API Shopify.

Кастомна секція "Product Sets":

Верстка карток товарів з урахуванням складних графічних елементів (бейджи "Most Popular", "Best Value" з абсолютною позицією).

Впровадження інтерактивних станів: зміна кольору фону картки та ефект підняття (lift) при наведенні для покращення UX.

Налаштування гнучких полів у схемі (Schema settings) для кастомізації мета-даних та описів безпосередньо через редактор тем.

Секція "What's Inside" (Складна адаптація):

Реалізація десктопної версії з фіксованим позиціонуванням елементів для збереження складної композиції макета.

Глибока оптимізація для мобільних пристроїв: реструктуризація сітки з абсолютної в потокову (flexbox).

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

Робота зі стилями та UI:

Суворе дотримання колірної палітри бренду (#D3C089, #FBF8EF).

Стилізація елементів керування: кастомні скруглені кнопки (border-radius: 30px) та акцентні кольори для чекбоксів.

Результат:
Клієнт отримав повністю функціональні, керовані через адмін-панель секції, які виглядають ідентично дизайну. Код оптимізований, не містить зайвих залежностей та повністю відповідає вимогам Shopify Theme Check.

Технологічний стек:
Liquid, HTML5, CSS3 (BEM), JavaScript (Vanilla JS), Shopify AJAX API.