Step 1: Get your Photta widget key
Log in to the Photta Business Dashboard at business.photta.app. Navigate to Settings → API Keys and locate your publishable key — it starts with pk_live_ and looks like pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Click the copy icon next to the key. This is the only credential you need for the Shopify integration; never paste your sk_live_ secret key into any frontend code.
If you do not yet have an account, click 'Start free trial' on the Photta Business page. The trial gives you 50 free try-ons with no credit card required. Your pk_live_ key is available immediately after you verify your email address and register your store domain in Settings → Allowed Domains.
Step 2: Open your Shopify theme code
In your Shopify admin panel, go to Online Store → Themes. Next to your active theme, click the three-dot menu and select Edit code. The code editor opens a file tree on the left. Expand the Layout folder and click theme.liquid — this is the master template that wraps every page on your store.
Use your browser's built-in search (Cmd+F or Ctrl+F) inside the code editor and search for </body>. You should find exactly one match near the very bottom of the file, just above </html>. Position your cursor on the line immediately before </body>. Everything you paste here will load on every page of your store, which is exactly what you need.
Step 3: Paste the Photta script snippet
Paste the following snippet on the line immediately before </body>, replacing pk_live_... with your actual key copied in Step 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. The defer attribute is important — it prevents the script from blocking your page render while still ensuring the widget initializes after the DOM is ready.
Click Save in the top-right corner of the code editor. Shopify will save the file and display a green confirmation toast. Do not publish a new theme version or do anything else — the change is live on your active theme the moment you click Save.
Step 4: Verify the widget loaded correctly
Open any product page on your storefront in a new browser tab (use a private/incognito window to bypass any logged-in caching). Scroll down to the product section — you should see a 'Try it on' button near the Add to Cart button. Click it, upload a test photo, and confirm the try-on result appears. If you see the button, the installation is complete.
If the button does not appear, open the browser developer console (F12 → Console tab) and look for any error messages from photta or sdk.js. The most common issue is a domain mismatch: your store domain must be listed under Settings → Allowed Domains in the Business Dashboard. Add it there, wait 30 seconds, and reload the product page.
Step 5: Customize widget colors to match your brand
By default the widget uses Photta's neutral dark palette. To match your brand, add data attributes to the same script tag: data-color-primary for your CTA button color (hex value, e.g. #D4AF37), and data-color-surface for the modal background. Example: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Save theme.liquid again after adding these attributes.
For full CSS-level overrides, the Photta widget exposes CSS custom properties on the --photta-* namespace that you can target from your theme's base CSS. Growth plan and above also allows you to hide the 'Powered by Photta' badge via the Business Dashboard under Customize → Branding. Changes apply in real time after saving — no re-deploy or widget update needed.