Steg 1: Hent din Photta widget-nøkkel
Logg inn på Photta Business-dashbordet på business.photta.app. Naviger til Settings → API Keys og finn din publiserbare nøkkel — den starter med pk_live_ og ser ut som pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klikk på kopier-ikonet ved siden av nøkkelen. Dette er den eneste legitimasjonen du trenger for Shopify-integrasjonen; lim aldri din sk_live_ hemmelige nøkkel inn i noen frontend-kode.
Hvis du ikke har en konto ennå, klikk på 'Start free trial' på Photta Business-siden. Prøveperioden gir deg 50 gratis prøvinger uten krav om kredittkort. Din pk_live_ nøkkel er tilgjengelig umiddelbart etter at du har bekreftet e-postadressen din og registrert butikkens domene i Settings → Allowed Domains.
Steg 2: Åpne din Shopify-temakode
I ditt Shopify-adminpanel, gå til Online Store → Themes. Ved siden av ditt aktive tema, klikk på tre-prikker-menyen og velg Edit code. Kodeeditoren åpner et filtre til venstre. Utvid Layout-mappen og klikk på theme.liquid — dette er hovedmalen som omslutter hver side i butikken din.
Bruk nettleserens innebygde søk (Cmd+F eller Ctrl+F) inne i kodeeditoren og søk etter </body>. Du bør finne nøyaktig ett treff nær bunnen av filen, rett over </html>. Plasser markøren på linjen rett før </body>. Alt du limer inn her vil lastes på hver side i butikken din, noe som er nøyaktig det du trenger.
Steg 3: Lim inn Photta-skriptet
Lim inn følgende snutt på linjen rett før </body>, og erstatt pk_live_... med din faktiske nøkkel kopiert i Steg 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. 'defer'-attributtet er viktig — det forhindrer at skriptet blokkerer gjengivelsen av siden din, samtidig som det sikrer at widgeten initialiseres etter at DOM-en er klar.
Klikk på Save i øverste høyre hjørne av kodeeditoren. Shopify vil lagre filen og vise en grønn bekreftelse. Du trenger ikke å publisere en ny temaversjon eller gjøre noe annet — endringen er live på ditt aktive tema i det øyeblikket du klikker på Save.
Steg 4: Verifiser at widgeten lastet korrekt
Åpne en vilkårlig produktside i nettbutikken din i en ny fane (bruk et privat/inkognito-vindu for å unngå mellomlagring). Rull ned til produktseksjonen — du bør se en 'Try it on'-knapp nær 'Legg i handlekurv'-knappen. Klikk på den, last opp et testbilde, og bekreft at prøvingsresultatet vises. Hvis du ser knappen, er installasjonen fullført.
Hvis knappen ikke vises, åpne nettleserens utviklerkonsoll (F12 → Console-fanen) og se etter feilmeldinger fra photta eller sdk.js. Det vanligste problemet er feil domene: butikkens domene må være oppført under Settings → Allowed Domains i Business-dashbordet. Legg det til der, vent 30 sekunder, og last produktsiden på nytt.
Steg 5: Tilpass widget-farger for å matche din merkevare
Som standard bruker widgeten Phottas nøytrale mørke palett. For å matche din merkevare, legg til data-attributter i samme script-tag: data-color-primary for din CTA-knappfarge (hex-verdi, f.eks. #D4AF37), og data-color-surface for modal-bakgrunnen. Eksempel: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Lagre theme.liquid igjen etter at du har lagt til disse attributtene.
For fullstendige overstyringer på CSS-nivå, eksponerer Photta-widgeten CSS custom properties i --photta-*-navnerommet som du kan målrette fra temaets base-CSS. Growth-planen og oppover lar deg også skjule 'Powered by Photta'-merket via Business-dashbordet under Customize → Branding. Endringer trer i kraft i sanntid etter lagring — ingen ny distribusjon eller widget-oppdatering er nødvendig.