Steg 1: Hämta din Photta-widgetnyckel
Logga in på Photta Business-instrumentpanelen på business.photta.app. Gå till Inställningar → API-nycklar och leta reda på din publicerbara nyckel — den börjar med pk_live_ och ser ut som pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klicka på kopieringsikonen bredvid nyckeln. Detta är den enda uppgiften du behöver för Shopify-integrationen; klistra aldrig in din hemliga sk_live_-nyckel i någon frontend-kod.
Om du inte har ett konto ännu, klicka på 'Starta gratis provperiod' på Photta Business-sidan. Provperioden ger dig 50 gratis provningar utan krav på kreditkort. Din pk_live_-nyckel är tillgänglig omedelbart efter att du verifierat din e-postadress och registrerat din butiksdomän under Inställningar → Tillåtna domäner.
Steg 2: Öppna din Shopify-temakod
I din Shopify-administratörspanel, gå till Webbshop → Teman. Bredvid ditt aktiva tema, klicka på menyn med de tre punkterna och välj Redigera kod. Kodredigeraren öppnar ett filträd till vänster. Expandera mappen Layout och klicka på theme.liquid — detta är huvudmallen som omsluter varje sida i din butik.
Använd webbläsarens inbyggda sökfunktion (Cmd+F eller Ctrl+F) inuti kodredigeraren och sök efter </body>. Du bör hitta exakt en träff nära slutet av filen, precis ovanför </html>. Placera markören på raden omedelbart före </body>. Allt du klistrar in här kommer att laddas på varje sida i din butik, vilket är exakt vad du behöver.
Steg 3: Klistra in Photta-kodsnutten
Klistra in följande kodsnutt på raden omedelbart före </body> och ersätt pk_live_... med din faktiska nyckel som du kopierade i steg 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Attributet defer är viktigt — det förhindrar att skriptet blockerar sidans rendering samtidigt som det säkerställer att widgeten initieras när DOM:en är redo.
Klicka på Spara i det övre högra hörnet av kodredigeraren. Shopify sparar filen och visar en grön bekräftelse. Du behöver inte publicera en ny temaversion eller göra något annat — ändringen är live på ditt aktiva tema så fort du klickar på Spara.
Steg 4: Verifiera att widgeten laddades korrekt
Öppna valfri produktsida i din webbshop i en ny flik (använd ett privat/inkognito-fönster för att kringgå cache). Scrolla ner till produktsektionen — du bör se knappen 'Prova den' nära knappen Lägg i varukorg. Klicka på den, ladda upp ett testfoto och bekräfta att provresultatet visas. Om du ser knappen är installationen klar.
Om knappen inte visas, öppna webbläsarens utvecklarkonsol (F12 → fliken Konsol) och leta efter felmeddelanden från photta eller sdk.js. Det vanligaste problemet är en domänmatchning: din butiksdomän måste vara listad under Inställningar → Tillåtna domäner i instrumentpanelen för företag. Lägg till den där, vänta 30 sekunder och ladda om produktsidan.
Steg 5: Anpassa widgetens färger för att matcha ditt varumärke
Som standard använder widgeten Photta:s neutrala mörka palett. För att matcha ditt varumärke, lägg till data-attribut i samma script-tagg: data-color-primary för färgen på din CTA-knapp (hex-värde, t.ex. #D4AF37) och data-color-surface för bakgrunden i modalen. Exempel: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Spara theme.liquid igen efter att ha lagt till dessa attribut.
För fullständiga åsidosättningar på CSS-nivå exponerar Photta-widgeten anpassade CSS-egenskaper i namnrymden --photta-* som du kan styra från ditt temas bas-CSS. Growth-planen och högre tillåter dig även att dölja 'Powered by Photta'-märket via instrumentpanelen under Anpassa → Branding. Ändringar tillämpas i realtid efter att de sparats — ingen ny distribution eller widgetuppdatering krävs.