Passaggio 1: Ottieni la tua chiave widget Photta
Accedi alla Dashboard Photta Business su business.photta.app. Vai su Impostazioni → Chiavi API e individua la tua chiave pubblicabile — inizia con pk_live_ e ha un aspetto simile a pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Clicca sull'icona di copia accanto alla chiave. Questa è l'unica credenziale necessaria per l'integrazione Shopify; non incollare mai la tua chiave segreta sk_live_ in alcun codice frontend.
Se non hai ancora un account, clicca su 'Inizia la prova gratuita' sulla pagina Photta Business. La prova ti offre 50 prove virtuali gratuite senza carta di credito richiesta. La tua chiave pk_live_ è disponibile immediatamente dopo aver verificato il tuo indirizzo email e registrato il dominio del tuo negozio in Impostazioni → Domini Consentiti.
Passaggio 2: Apri il codice del tuo tema Shopify
Nel tuo pannello di amministrazione Shopify, vai su Negozio Online → Temi. Accanto al tuo tema attivo, clicca sul menu a tre punti e seleziona Modifica codice. L'editor di codice apre un albero di file sulla sinistra. Espandi la cartella Layout e clicca su theme.liquid — questo è il template principale che racchiude ogni pagina del tuo negozio.
Usa la ricerca integrata del browser (Cmd+F o Ctrl+F) all'interno dell'editor di codice e cerca </body>. Dovresti trovare esattamente una corrispondenza vicino alla fine del file, appena sopra </html>. Posiziona il cursore sulla riga immediatamente precedente a </body>. Tutto ciò che incollerai qui verrà caricato su ogni pagina del tuo negozio, che è esattamente ciò di cui hai bisogno.
Passaggio 3: Incolla lo snippet di script Photta
Incolla il seguente snippet nella riga immediatamente precedente a </body>, sostituendo pk_live_... con la tua chiave reale copiata nel Passaggio 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. L'attributo defer è importante — impedisce allo script di bloccare il rendering della pagina, assicurando comunque che il widget si inizializzi dopo che il DOM è pronto.
Clicca su Salva nell'angolo in alto a destra dell'editor di codice. Shopify salverà il file e mostrerà un messaggio di conferma verde. Non pubblicare una nuova versione del tema o fare altro — la modifica è attiva sul tuo tema in uso nel momento in cui clicchi su Salva.
Passaggio 4: Verifica che il widget sia caricato correttamente
Apri una qualsiasi pagina prodotto sul tuo storefront in una nuova scheda del browser (usa una finestra privata/in incognito per bypassare la cache). Scorri fino alla sezione prodotto — dovresti vedere un pulsante 'Prova ora' vicino al pulsante Aggiungi al carrello. Cliccalo, carica una foto di prova e conferma che il risultato della prova appaia. Se vedi il pulsante, l'installazione è completata.
Se il pulsante non appare, apri la console per sviluppatori del browser (F12 → scheda Console) e cerca eventuali messaggi di errore da photta o sdk.js. Il problema più comune è una mancata corrispondenza del dominio: il dominio del tuo negozio deve essere elencato sotto Impostazioni → Domini Consentiti nella Dashboard Business. Aggiungilo lì, attendi 30 secondi e ricarica la pagina del prodotto.
Passaggio 5: Personalizza i colori del widget in base al tuo brand
Per impostazione predefinita, il widget utilizza la tavolozza scura neutra di Photta. Per abbinarlo al tuo brand, aggiungi attributi data allo stesso tag script: data-color-primary per il colore del pulsante CTA (valore esadecimale, es. #D4AF37) e data-color-surface per lo sfondo del modale. Esempio: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Salva nuovamente theme.liquid dopo aver aggiunto questi attributi.
Per modifiche complete a livello CSS, il widget Photta espone proprietà personalizzate CSS nel namespace --photta-* a cui puoi puntare dal CSS di base del tuo tema. Il piano Growth e superiori consentono inoltre di nascondere il badge 'Powered by Photta' tramite la Dashboard Business sotto Personalizza → Branding. Le modifiche vengono applicate in tempo reale dopo il salvataggio — non è richiesto alcun nuovo deployment o aggiornamento del widget.