Pixel-Perfect przeniesienie projektu z Figma do Shopify

Opis zadania:
Głównym celem jest pełna realizacja unikalnych bloków internetowego sklepu z grami planszowymi premium Loomino. Zadanie obejmowało opracowanie niestandardowych sekcji Liquid z identycznym dopasowaniem do makiety w Figma, skomplikowaną logikę wyboru produktów oraz adaptację na urządzenia mobilne.

Kluczowe etapy i rozwiązania techniczne:

Opracowanie sekcji FBT (Frequently Bought Together):

Stworzenie dynamicznego bloku propozycji, w którym użytkownik może wybierać dodatkowe produkty za pomocą checkboxów.

Realizacja przeliczenia całkowitej ceny w czasie rzeczywistym po stronie klienta (JavaScript) z uwzględnieniem rabatów.

Napisanie logiki dodawania kilku produktów (multiple variants) do koszyka jednym kliknięciem przez AJAX API Shopify.

Niestandardowa sekcja "Product Sets":

Wykonanie kart produktów z uwzględnieniem skomplikowanych elementów graficznych (etykiety "Most Popular", "Best Value" z absolutną pozycją).

Wdrożenie interaktywnych stanów: zmiana koloru tła karty oraz efekt podniesienia (lift) przy najechaniu dla poprawy UX.

Konfiguracja elastycznych pól w schemacie (Schema settings) do personalizacji meta-danych i opisów bezpośrednio przez edytor motywów.

Sekcja "What's Inside" (Skomplikowana adaptacja):

Realizacja wersji desktopowej z fiksowanym pozycjonowaniem elementów w celu zachowania skomplikowanej kompozycji makiety.

Głęboka optymalizacja dla urządzeń mobilnych: restrukturyzacja siatki z absolutnej na elastyczną (flexbox).

Rozwiązanie problemu rozmytych obrazów (thumbnails) na smartfonach poprzez dokładne obliczenie proporcji i zakaz rozciągania na cały ekran, co pozwoliło zachować ostrość grafiki.

Praca ze stylami i UI:

Ścisłe przestrzeganie palety kolorów marki (#D3C089, #FBF8EF).

Stylizacja elementów sterujących: niestandardowe zaokrąglone przyciski (border-radius: 30px) oraz akcentowe kolory dla checkboxów.

Wynik:
Klient otrzymał w pełni funkcjonalne sekcje, zarządzane przez panel administracyjny, które wyglądają identycznie jak projekt. Kod jest zoptymalizowany, nie zawiera zbędnych zależności i w pełni odpowiada wymaganiom Shopify Theme Check.

Stos technologiczny:
Liquid, HTML5, CSS3 (BEM), JavaScript (Vanilla JS), Shopify AJAX API.