Stap 1: Verkrijg je Photta widget-sleutel
Log in op het Photta Business Dashboard op business.photta.app. Navigeer naar Settings → API Keys en zoek je publishable key — deze begint met pk_live_ en ziet eruit als pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klik op het kopieericoon naast de sleutel. Dit is het enige gegeven dat je nodig hebt voor de Shopify integratie; plak nooit je sk_live_ secret key in frontend-code.
Als je nog geen account hebt, klik dan op 'Start free trial' op de Photta Business pagina. De proefperiode geeft je 50 gratis passessies zonder dat een creditcard vereist is. Je pk_live_ sleutel is direct beschikbaar nadat je je e-mailadres hebt geverifieerd en je winkeldomein hebt geregistreerd in Settings → Allowed Domains.
Stap 2: Open je Shopify thema-code
Ga in je Shopify beheerderspaneel naar Online Store → Themes. Klik naast je actieve thema op het menu met de drie puntjes en selecteer Edit code. De code-editor opent een mappenstructuur aan de linkerkant. Vouw de map Layout uit en klik op theme.liquid — dit is het hoofdsjabloon dat elke pagina in je winkel omhult.
Gebruik de ingebouwde zoekfunctie van je browser (Cmd+F of Ctrl+F) binnen de code-editor en zoek naar </body>. Je zou precies één resultaat moeten vinden bijna onderaan het bestand, net boven </html>. Plaats je cursor op de regel direct boven </body>. Alles wat je hier plakt, wordt op elke pagina van je winkel geladen, wat precies is wat je nodig hebt.
Stap 3: Plak het Photta scriptfragment
Plak het volgende fragment op de regel direct voor </body> en vervang pk_live_... door je daadwerkelijke sleutel die je in Stap 1 hebt gekopieerd: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Het defer-attribuut is belangrijk — het voorkomt dat het script de weergave van je pagina blokkeert, terwijl het er toch voor zorgt dat de widget wordt geïnitialiseerd zodra de DOM gereed is.
Klik op Save in de rechterbovenhoek van de code-editor. Shopify zal het bestand opslaan en een groene bevestigingsmelding tonen. Publiceer geen nieuwe themaversie en doe niets anders — de wijziging is live op je actieve thema zodra je op Save klikt.
Stap 4: Controleer of de widget correct is geladen
Open een willekeurige productpagina in je winkel in een nieuw browsertabblad (gebruik een privé/incognito-venster om eventuele caching van ingelogde gebruikers te omzeilen). Scrol omlaag naar de productsectie — je zou een 'Try it on'-knop moeten zien in de buurt van de knop Toevoegen aan winkelwagen. Klik erop, upload een testfoto en bevestig dat het resultaat verschijnt. Als je de knop ziet, is de installatie voltooid.
Als de knop niet verschijnt, open dan de browser developer console (F12 → tabblad Console) en zoek naar foutmeldingen van photta of sdk.js. Het meest voorkomende probleem is een domeinfout: je winkeldomein moet vermeld staan onder Settings → Allowed Domains in het Business Dashboard. Voeg het daar toe, wacht 30 seconden en laad de productpagina opnieuw.
Stap 5: Pas de widgetkleuren aan aan je merk
Standaard gebruikt de widget het neutrale donkere palet van Photta. Om het aan je merk aan te passen, voeg je data-attributen toe aan dezelfde script-tag: data-color-primary voor de kleur van je CTA-knop (hex-waarde, bijv. #D4AF37), en data-color-surface voor de achtergrond van de modal. Voorbeeld: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Sla theme.liquid opnieuw op na het toevoegen van deze attributen.
Voor volledige CSS-aanpassingen stelt de Photta widget CSS-variabelen beschikbaar in de --photta-* namespace die je kunt aanpassen vanuit de basis-CSS van je thema. Met het Growth-abonnement en hoger kun je ook de 'Powered by Photta' badge verbergen via het Business Dashboard onder Customize → Branding. Wijzigingen worden in realtime toegepast na het opslaan — geen herimplementatie of widget-update nodig.