Krok 1: Pobierz klucz widżetu Photta
Zaloguj się do Panelu Photta Business pod adresem business.photta.app. Przejdź do Ustawienia → Klucze API i znajdź swój klucz do publikacji (publishable key) — zaczyna się od pk_live_ i wygląda jak pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Kliknij ikonę kopiowania obok klucza. To jedyne poświadczenie potrzebne do integracji z Shopify; nigdy nie wklejaj swojego tajnego klucza sk_live_ do żadnego kodu frontendowego.
Jeśli nie masz jeszcze konta, kliknij „Rozpocznij bezpłatny okres próbny” na stronie Photta Business. Okres próbny oferuje 50 darmowych przymiarek bez wymaganej karty kredytowej. Twój klucz pk_live_ jest dostępny natychmiast po zweryfikowaniu adresu e-mail i zarejestrowaniu domeny sklepu w Ustawienia → Dozwolone domeny.
Krok 2: Otwórz kod motywu Shopify
W panelu administracyjnym Shopify przejdź do Sklep online → Motywy. Obok aktywnego motywu kliknij menu z trzema kropkami i wybierz Edytuj kod. Edytor kodu otworzy drzewo plików po lewej stronie. Rozwiń folder Layout i kliknij theme.liquid — to główny szablon, który obejmuje każdą stronę w Twoim sklepie.
Użyj wbudowanej wyszukiwarki przeglądarki (Cmd+F lub Ctrl+F) w edytorze kodu i wyszukaj </body>. Powinieneś znaleźć dokładnie jedno dopasowanie blisko samego dołu pliku, tuż nad </html>. Ustaw kursor w linii bezpośrednio przed </body>. Wszystko, co tu wkleisz, będzie ładowane na każdej stronie Twojego sklepu, co jest dokładnie tym, czego potrzebujesz.
Krok 3: Wklej fragment skryptu Photta
Wklej poniższy fragment w linii bezpośrednio przed </body>, zastępując pk_live_... swoim rzeczywistym kluczem skopiowanym w kroku 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Atrybut defer jest ważny — zapobiega on blokowaniu renderowania strony przez skrypt, zapewniając jednocześnie inicjalizację widżetu po przygotowaniu struktury DOM.
Kliknij Zapisz w prawym górnym rogu edytora kodu. Shopify zapisze plik i wyświetli zielone potwierdzenie. Nie musisz publikować nowej wersji motywu ani robić nic więcej — zmiana jest aktywna w Twoim motywie w momencie kliknięcia Zapisz.
Krok 4: Sprawdź, czy widżet ładuje się poprawnie
Otwórz dowolną stronę produktu w swoim sklepie w nowej karcie przeglądarki (użyj trybu prywatnego/incognito, aby pominąć pamięć podręczną zalogowanego użytkownika). Przewiń w dół do sekcji produktu — powinieneś zobaczyć przycisk „Przymierz” obok przycisku Dodaj do koszyka. Kliknij go, prześlij testowe zdjęcie i potwierdź, że pojawia się wynik przymiarki. Jeśli widzisz przycisk, instalacja jest zakończona.
Jeśli przycisk się nie pojawia, otwórz konsolę deweloperską przeglądarki (F12 → karta Konsola) i poszukaj komunikatów o błędach od photta lub sdk.js. Najczęstszym problemem jest niezgodność domeny: domena Twojego sklepu musi znajdować się na liście w Ustawienia → Dozwolone domeny w Panelu Biznesowym. Dodaj ją tam, odczekaj 30 sekund i odśwież stronę produktu.
Krok 5: Dostosuj kolory widżetu do swojej marki
Domyślnie widżet używa neutralnej ciemnej palety Photta. Aby dopasować go do swojej marki, dodaj atrybuty danych do tego samego znacznika skryptu: data-color-primary dla koloru przycisku CTA (wartość hex, np. #D4AF37) oraz data-color-surface dla tła okna modalnego. Przykład: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Po dodaniu tych atrybutów ponownie zapisz theme.liquid.
W przypadku pełnego nadpisywania na poziomie CSS, widżet Photta udostępnia właściwości niestandardowe CSS w przestrzeni nazw --photta-*, które można modyfikować w bazowym pliku CSS motywu. Plan Growth i wyższe pozwalają również ukryć plakietkę „Powered by Photta” za pośrednictwem Panelu Biznesowego w sekcji Dostosuj → Branding. Zmiany są stosowane w czasie rzeczywistym po zapisaniu — nie jest wymagane ponowne wdrożenie ani aktualizacja widżetu.