Shopify · Kosmetyki

Hadat Cosmetics

Sklep Shopify w pięciu językach, z projektu w Figmie

Hadat Cosmetics sprzedaje kosmetyki do włosów, ciała i dłoni po angielsku, łotewsku, niemiecku, francusku i włosku. Nowy sklep na Shopify zastąpił starą stronę na WooCommerce. Napisałem motyw z pliku projektantki w Figmie, w dwuosobowym zespole, w którym kolega prowadził proces tłumaczeń i analitykę.

Rola: Programista motywu w zespole dwóch programistów i projektantki
Okres: maj - lipiec 2026
Technologie: Shopify
Liquid
JavaScript
Shopify Flow
Customer Privacy API
Judge.me
Strona: hadat.com(otwiera się w nowej karcie)

Hadat Cosmetics: strona główna na ekranie komputera

języków: EN, LV, DE, FR, IT: 5
tekstów pokrytych w ponownym audycie LV: 99%
podstron przeszukanych moim narzędziem: 70
opinii przeniesionych ze starego sklepu: 26 / 26

Kontekst

Marka przeszła ze strony na WordPressie i WooCommerce na Shopify, na nową domenę, z przeniesionym katalogiem i opiniami.

Motyw powstał na bazie motywu Skeleton od Shopify, więc każda sekcja, snippet i interakcja była pisana dla tego sklepu, a nie przerabiana z gotowego motywu.

Co zrobiłem

Motyw z Figmy: nagłówek z megamenu i banerami promocyjnymi, strony produktu, kolekcji i treści
Silnik quizu pielęgnacyjnego z paskiem postępu, przyciskiem ponownego podejścia i webhookiem Shopify Flow dla wyników
Koszyk w panelu bocznym z paskiem postępu do darmowej dostawy i przyklejony pasek dodawania do koszyka
Filmy w tle, które ładują się dopiero, gdy pojawią się na ekranie (IntersectionObserver)
Opinie Judge.me renderowane po stronie serwera i aktualna ocena na stronie głównej
Przestylowany baner cookies na Customer Privacy API Shopify
Narzędzia do audytu tłumaczeń: przeszukanie łotewskiej wersji sklepu i skrypt raportujący nieprzetłumaczone teksty

Trudne momenty i jak je rozwiązałem

Problem
Zapisy do newslettera wysyłane przez fetch omijały niewidzialną reCAPTCHA Shopify, więc nie były zapisywane.
Rozwiązanie
Formularz wysyła się teraz do ukrytego iframe'a. Podziękowanie pojawia się dopiero, gdy Shopify potwierdzi zapis, a gdy Shopify żąda weryfikacji, strona przechodzi na zwykłe wysłanie formularza.
Problem
Widżet Judge.me uruchamiany z JavaScriptu nie ładował opinii na kartach produktów.
Rozwiązanie
Opinie renderują się po stronie serwera z metapól, więc są w HTML-u od pierwszego załadowania.
Problem
overflow-x: hidden na kontenerze po cichu psuł każdy element position: sticky poniżej.
Rozwiązanie
Zamieniłem go na overflow-x: clip, który blokuje przewijanie w poziomie bez tworzenia kontenera przewijania.

Wyniki

Sklep działa na hadat.com w 5 językach, z hreflang
Ponowny audyt wersji łotewskiej: 70 podstron, 1575 z 1598 tekstów pokrytych (99%)
26 z 26 opinii przeniesionych ze starego sklepu i dopasowanych do produktów