Dostosowana adaptacja motywu Shopify dla „NY Shelves”
Sklepy internetowe i e-commerce
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.
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.