Krok 1: Získejte svůj Photta klíč k widgetu
Přihlaste se do Dashboardu Photta Business na adrese business.photta.app. Přejděte do Settings → API Keys a najděte svůj veřejný klíč (publishable key) — začíná na pk_live_ a vypadá jako pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klikněte na ikonu kopírování vedle klíče. Toto je jediný údaj, který pro integraci Shopify potřebujete; nikdy nevkládejte svůj tajný klíč sk_live_ do žádného frontendového kódu.
Pokud ještě nemáte účet, klikněte na „Start free trial“ na stránce Photta Business. Zkušební verze nevyžaduje zadání platební karty. Váš pk_live_ klíč je k dispozici ihned po ověření e-mailové adresy a registraci domény vašeho obchodu v Settings → Allowed Domains.
Krok 2: Otevřete kód šablony Shopify
V administraci Shopify přejděte na Online Store → Themes. Vedle vaší aktivní šablony klikněte na menu se třemi tečkami a vyberte Edit code. Editor kódu otevře vlevo strom souborů. Rozbalte složku Layout a klikněte na theme.liquid — toto je hlavní šablona, která obaluje každou stránku vašeho obchodu.
Použijte vestavěné vyhledávání v prohlížeči (Cmd+F nebo Ctrl+F) uvnitř editoru kódu a vyhledejte </body>. Měli byste najít přesně jednu shodu téměř na úplném konci souboru, těsně nad </html>. Umístěte kurzor na řádek těsně před </body>. Vše, co sem vložíte, se načte na každé stránce vašeho obchodu, což je přesně to, co potřebujete.
Krok 3: Vložte úryvek skriptu Photta
Vložte následující fragment kódu na řádek těsně před </body> a nahraďte pk_live_... svým skutečným klíčem zkopírovaným v 1. kroku: <script src="https://widget.photta.app/v1/embed.js" data-api-key="pk_live_..." defer></script>. Atribut defer je důležitý — zabraňuje skriptu v blokování vykreslování stránky a zároveň zajišťuje, že se widget inicializuje až po načtení DOM.
Klikněte na Save v pravém horním rohu editoru kódu. Shopify soubor uloží a zobrazí zelené potvrzení. Nemusíte publikovat novou verzi šablony ani dělat nic jiného — změna je na vaší aktivní šabloně aktivní v momentě, kdy kliknete na Save.
Krok 4: Ověřte, že se widget správně načetl
Otevřete libovolnou stránku produktu ve svém e-shopu v nové kartě prohlížeče (použijte anonymní okno, abyste obešli mezipaměť přihlášeného uživatele). Přejděte dolů do sekce produktu — u tlačítka Přidat do košíku byste měli vidět tlačítko „Vyzkoušet na sobě“. Klikněte na něj, nahrajte testovací fotografii a potvrďte, že se výsledek zkoušky zobrazí. Pokud tlačítko vidíte, instalace je dokončena.
Pokud se tlačítko nezobrazí, otevřete vývojářskou konzoli prohlížeče (F12 → záložka Console) a vyhledejte případné chybové zprávy od photta nebo sdk.js. Nejčastějším problémem je neshoda domén: doména vašeho obchodu musí být uvedena v Settings → Allowed Domains v Business Dashboardu. Přidejte ji tam, počkejte 30 sekund a stránku produktu znovu načtěte.
Krok 5: Přizpůsobte barvy widgetu své značce
Ve výchozím nastavení používá widget neutrální tmavou paletu Photta. Chcete-li jej sladit se svou značkou, přidejte do stejného tagu script datové atributy: data-color-primary pro barvu CTA tlačítka (hex hodnota, např. #D4AF37) a data-color-surface pro pozadí modálního okna. Příklad: <script src="https://widget.photta.app/v1/embed.js" data-api-key="pk_live_..." data-color-primary="#D4AF37" defer></script>. Po přidání těchto atributů soubor theme.liquid znovu uložte.
Pro úplné přepsání na úrovni CSS nabízí widget Photta vlastní vlastnosti CSS v jmenném prostoru --photta-*, na které můžete cílit z hlavního CSS vaší šablony. Tarif Growth a vyšší také umožňuje skrýt odznak „Powered by Photta“ prostřednictvím Business Dashboardu v sekci Customize → Branding. Změny se projeví v reálném čase po uložení — není nutné žádné opětovné nasazení ani aktualizace widgetu.