Пиксельно-точный перенос дизайна из 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.