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 nie wymaga 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/v1/embed.js" data-api-key="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/v1/embed.js" data-api-key="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.