Trin 1: Hent din Photta widget-nøgle
Log ind på Photta Business-dashboardet på business.photta.app. Gå til Indstillinger → API-nøgler og find din publicable key — den starter med pk_live_ og ligner pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klik på kopi-ikonet ved siden af nøglen. Dette er den eneste legitimation, du skal bruge til Shopify-integrationen; indsæt aldrig din sk_live_ secret key i nogen frontend-kode.
Hvis du endnu ikke har en konto, skal du klikke på 'Start gratis prøveperiode' på Photta Business-siden. Prøveperioden giver dig 50 gratis try-ons uden krav om kreditkort. Din pk_live_-nøgle er tilgængelig med det samme, når du har bekræftet din e-mailadresse og registreret dit butiksdomæne i Indstillinger → Tilladte domæner.
Trin 2: Åbn din Shopify-temakode
I dit Shopify-administrationspanel skal du gå til Online butik → Temaer. Ud for dit aktive tema skal du klikke på menuen med de tre prikker og vælge Rediger kode. Kodeeditoren åbner et filtræ til venstre. Udvid mappen Layout og klik på theme.liquid — dette er hovedskabelonen, der omslutter hver side i din butik.
Brug din browsers indbyggede søgefunktion (Cmd+F eller Ctrl+F) inde i kodeeditoren og søg efter </body>. Du bør finde præcis ét match nær bunden af filen, lige over </html>. Placer din markør på linjen umiddelbart før </body>. Alt, hvad du indsætter her, vil blive indlæst på alle sider i din butik, hvilket er præcis det, du har brug for.
Trin 3: Indsæt Photta-scriptet
Indsæt følgende kodestump på linjen umiddelbart før </body>, og erstat pk_live_... med din faktiske nøgle kopieret i Trin 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Defer-attributten er vigtig — den forhindrer scriptet i at blokere din sideindlæsning, mens den stadig sikrer, at widgetten initialiseres, når DOM'en er klar.
Klik på Gem i øverste højre hjørne af kodeeditoren. Shopify vil gemme filen og vise en grøn bekræftelsesmeddelelse. Du behøver ikke at udgive en ny temaversion eller foretage dig andet — ændringen er live på dit aktive tema i det øjeblik, du klikker på Gem.
Trin 4: Bekræft at widgetten blev indlæst korrekt
Åbn en vilkårlig produktside på din webshop i en ny fane (brug et privat/inkognito-vindue for at undgå cache). Rul ned til produktsektionen — du bør se en 'Prøv den'-knap i nærheden af 'Læg i kurv'-knappen. Klik på den, upload et testbillede, og bekræft at try-on-resultatet vises. Hvis du ser knappen, er installationen fuldført.
Hvis knappen ikke vises, skal du åbne browserens udviklerkonsol (F12 → Konsol-fanen) og se efter fejlmeddelelser fra photta eller sdk.js. Det mest almindelige problem er en domæne-uoverensstemmelse: dit butiksdomæne skal være opført under Indstillinger → Tilladte domæner i Business Dashboardet. Tilføj det der, vent 30 sekunder, og genindlæs produktsiden.
Trin 5: Tilpas widget-farver så de matcher dit brand
Som standard bruger widgetten Phottas neutrale mørke palette. For at matche dit brand kan du tilføje data-attributter til det samme script-tag: data-color-primary for din CTA-knapfarve (hex-værdi, f.eks. #D4AF37), og data-color-surface for modal-baggrunden. Eksempel: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Gem theme.liquid igen efter at have tilføjet disse attributter.
For fuld CSS-overstyring eksponerer Photta-widgetten CSS custom properties på --photta-*-namespacet, som du kan målrette fra dit temas basis-CSS. Growth-planen og derover giver dig også mulighed for at skjule 'Powered by Photta'-mærket via Business Dashboardet under Tilpas → Branding. Ændringer træder i kraft i realtid efter lagring — ingen genudgivelse eller widget-opdatering er nødvendig.