Pasul 1: Obține cheia widget-ului Photta
Conectează-te la Dashboard-ul Photta Business la business.photta.app. Navighează la Setări → Chei API și găsește cheia publicabilă (publishable key) — aceasta începe cu pk_live_ și arată ca pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Dă click pe pictograma de copiere de lângă cheie. Aceasta este singura acreditare de care ai nevoie pentru integrarea Shopify; nu introduce niciodată cheia secretă sk_live_ în codul frontend.
Dacă nu ai încă un cont, dă click pe 'Începe perioada de probă gratuită' pe pagina Photta Business. Perioada de probă îți oferă 50 de probe gratuite, fără a fi necesar un card de credit. Cheia ta pk_live_ este disponibilă imediat după ce îți verifici adresa de e-mail și înregistrezi domeniul magazinului în Setări → Domenii permise.
Pasul 2: Deschide codul temei tale Shopify
În panoul de administrare Shopify, mergi la Magazin Online → Teme. Lângă tema activă, dă click pe meniul cu trei puncte și selectează Editează codul. Editorul de cod deschide o structură de fișiere în stânga. Extinde folderul Layout și dă click pe theme.liquid — acesta este șablonul principal care îmbracă fiecare pagină din magazinul tău.
Folosește funcția de căutare a browserului (Cmd+F sau Ctrl+F) în interiorul editorului de cod și caută </body>. Ar trebui să găsești exact o potrivire aproape de fundul fișierului, chiar deasupra </html>. Poziționează cursorul pe linia imediat anterioară lui </body>. Tot ce inserezi aici se va încărca pe fiecare pagină a magazinului tău, exact ceea ce ai nevoie.
Pasul 3: Inserează fragmentul de script Photta
Inserează următorul fragment pe linia imediat anterioară lui </body>, înlocuind pk_live_... cu cheia ta reală copiată la Pasul 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Atributul defer este important — acesta previne blocarea randării paginii de către script, asigurând în același timp inițializarea widget-ului după ce DOM-ul este gata.
Dă click pe Salvează în colțul din dreapta sus al editorului de cod. Shopify va salva fișierul și va afișa o notificare verde de confirmare. Nu publica o nouă versiune a temei și nu face nimic altceva — modificarea este activă pe tema ta curentă în momentul în care ai dat click pe Salvează.
Pasul 4: Verifică dacă widget-ul s-a încărcat corect
Deschide orice pagină de produs din magazinul tău într-o filă nouă de browser (folosește o fereastră privată/incognito pentru a evita cache-ul de autentificare). Derulează până la secțiunea de produs — ar trebui să vezi butonul 'Probă virtuală' lângă butonul Adaugă în Coș. Dă click pe el, încarcă o fotografie de test și confirmă că rezultatul probei apare. Dacă vezi butonul, instalarea este completă.
Dacă butonul nu apare, deschide consola pentru dezvoltatori a browserului (F12 → fila Console) și caută eventuale mesaje de eroare de la photta sau sdk.js. Cea mai frecventă problemă este o neconcordanță a domeniului: domeniul magazinului tău trebuie să fie listat în Setări → Domenii permise în Dashboard-ul Business. Adaugă-l acolo, așteaptă 30 de secunde și reîncărcă pagina de produs.
Pasul 5: Personalizează culorile widget-ului pentru brandul tău
În mod implicit, widget-ul folosește paleta neutră închisă a Photta. Pentru a se potrivi cu brandul tău, adaugă atribute de date la aceeași etichetă script: data-color-primary pentru culoarea butonului de apel la acțiune (valoare hex, ex: #D4AF37) și data-color-surface pentru fundalul ferestrei modale. Exemplu: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Salvează theme.liquid din nou după adăugarea acestor atribute.
Pentru suprascrieri complete la nivel de CSS, widget-ul Photta expune proprietăți CSS personalizate în spațiul de nume --photta-* pe care le poți viza din CSS-ul de bază al temei tale. Planul Growth și cele superioare permit, de asemenea, ascunderea ecusonului 'Powered by Photta' prin Dashboard-ul Business la secțiunea Personalizare → Branding. Modificările se aplică în timp real după salvare — nu este necesară o nouă implementare sau actualizare a widget-ului.