Dostosowana adaptacja motywu Shopify dla „NY Shelves”

Link do projektu: nyshelves.com

Rola: Frontend-deweloper / Specjalista Shopify

Stos technologii: Liquid (Shopify), HTML5, CSS3 / SCSS, JavaScript (Vanilla JS)

O projekcie
„NY Shelves” to nowoczesny sklep internetowy z stylowymi półkami do wnętrz. Główny nacisk w projekcie położono na minimalizm, premium wygląd oraz skupienie na wysokiej jakości treści wizualnej (kartach produktów, galeriach).

Zadania projektu
Dostosowanie komponentów UI: Stworzenie unikalnego projektu dla kluczowych elementów interfejsu (nagłówek strony, karta produktu), który nie mieściłby się w standardowych ustawieniach gotowej temy Shopify.

Idealna responsywność (Mobile-First): Zapewnienie doskonałego wyświetlania strony na smartfonach i tabletach, optymalizując nawigację oraz elementy interakcji.

Poprawa UX/UI: Uproszczenie procesu wyboru wariantów produktu oraz poprawa czytelności interfejsu w celu zwiększenia konwersji na zakupy.

Zrealizowane rozwiązania techniczne
1. Niestandardowa karta produktu (Układ strony produktu)
Elastyczna siatka wariantów (Rozmiary/Chipsy): Przepisałem standardową logikę rozwijanych list na dynamiczną responsywną siatkę „chipsów”. Na desktopie zastosowałem grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)), co pozwoliło przyciskom automatycznie rozkładać się po szerokości ekranu i poprawnie przenosić długi tekst bez wychodzenia poza granice bloków.

Interaktywna galeria: Zrealizowałem responsywny suwak obrazów z możliwością przełączania przez miniatury oraz strzałki nawigacyjne. W wersji mobilnej ustawiłem proporcje 1:1 dla obrazków, aby uniknąć pionowego rozciągania.

2. Optymalizacja nagłówka i wielopoziomowego menu mobilnego
Wielopoziomowa struktura nawigacji: Zmodernizowałem mobile-drawer (menu wysuwane). Dodałem zagnieżdżone pętle Liquid do wyświetlania podkategorii drugiego poziomu (link.links), dostosowałem dla nich odpowiednie marginesy oraz wizualną hierarchię, rozwiązując problem ukrytych kategorii na smartfonach.

Inteligentny efekt Sticky: Przykleiłem nagłówek strony na górze ekranu za pomocą position: sticky oraz izolacji kontekstu nakładania (isolation: isolate, z-index), co wykluczyło nakładanie się menu na inne niestandardowe bloki strony podczas przewijania.

Dynamiczny koszyk: Zintegrowałem asynchroniczne aktualizowanie licznika produktów w koszyku (cart-badge) poprzez przechwytywanie natywnych zapytań API Shopify (Fetch API), zapewniając natychmiastową reakcję interfejsu bez przeładowania strony.

Wyniki pracy
Strona została w pełni zoptymalizowana pod kątem wszelkich rozdzielczości ekranów: od małych smartfonów po szerokoformatowe monitory.

Rozwiązano problem z wyświetlaniem skomplikowanych i długich nazw modyfikacji produktów — tekst teraz przenosi się poprawnie, zachowując ogólną estetykę projektu.

Użytkownicy urządzeń mobilnych uzyskali pełny dostęp do całego katalogu dzięki poprawionej strukturze menu nawigacyjnego.