Come Aggiungere Virtual Try-On a Squarespace

Squarespace non è mai stata costruita come una piattaforma di ecommerce aperta — scambia l'estensibilità per il design, il che è esattamente il motivo per cui aggiungere Virtual Try-On richiede una strategia diversa rispetto a quella di Shopify. I commercianti che sbagliano questo step si ritrovano con un widget che si carica sulla homepage ma non raggiunge la pagina prodotto dove dovrebbe effettivamente trovarsi. Fare le cose bene significa comprendere il modello di iniezione di codice di Squarespace prima di scrivere una singola riga.

Perché Squarespace Rende Questo Più Difficile Di Quanto Sembri

Squarespace non espone un ecosistema di app nativo come fa Shopify. Non c'è un equivalente dell'App Store di Shopify dove uno strumento Try-On si installa nel tema, si collega al carrello e legge automaticamente le varianti di prodotto. Invece, Squarespace offre l'Iniezione di Codice — un pannello di impostazioni dove è possibile inserire HTML, CSS e JavaScript personalizzati nell'intestazione, nel footer o nelle sezioni di pagine individuali del sito.

Questa distinzione è importante. Su Squarespace, non stai installando un'app; stai inserendo manualmente un tag script e indicandogli, pagina per pagina, dove eseguire il rendering. Commerce (il sistema di store integrato di Squarespace) limita anche la profondità con cui il codice di terze parti può interagire con i dati del prodotto — non c'è un'API di prodotto pubblica esposta agli script lato client come i modelli Liquid di Shopify espongono product.variants. Qualsiasi integrazione deve aggirare questo leggendo ciò che è visibile nel DOM o abbinando gli identificatori di prodotto che fornisci manualmente.

Dove Risiede Effettivamente L'Iniezione Di Codice

L'iniezione di codice su Squarespace ha tre livelli, e scegliere quello giusto determina se il pulsante Try-On viene visualizzato ovunque o da nessuna parte.

Il pattern che funziona in modo affidabile: carica lo script del widget YourSizer globalmente nell'iniezione del footer a livello di sito (Impostazioni → Avanzate → Iniezione di Codice), poi posiziona un piccolo snippet di embed — un <div> con un identificatore di prodotto — all'interno della descrizione del prodotto individuale o di un Code Block su quella pagina. Questo mantiene il caricamento dello script pesante una volta per visita del sito piuttosto che una volta per pagina prodotto, il che è importante per la velocità di pagina sui template già pesanti di JavaScript di Squarespace.

Operare All'Interno Della Struttura Della Pagina Prodotto Di Commerce

Le pagine prodotto di Squarespace sono costruite da blocchi di contenuto fissi, e Commerce (piani Basic o Advanced) limita quanto è possibile riorganizzarli. Generalmente non è possibile iniettare uno script direttamente nell'area del pulsante "Add to Cart" senza utilizzare un Code Block, che Squarespace tratta come elemento di contenuto piuttosto che funzionale.

La soluzione pratica è aggiungere un Code Block appena sopra o sotto il pulsante Add to Cart nell'editor dei contenuti della pagina prodotto, quindi fare in modo che quel blocco esegua il rendering di un pulsante "Try It On" che apra il widget in un modale o pannello laterale. Poiché i template di prodotto di Squarespace variano (le versioni Standard, Modern e legacy differiscono tutte), testa questo posizionamento su almeno due tipi di prodotto prima di presumere che si renderizzi coerentemente in tutto il catalogo — un blocco che si posiziona perfettamente sotto "Add to Cart" su un template può finire sotto la sezione delle recensioni su un altro.

Abbinare Prodotti Senza Un'API Di Prodotto

Poiché Squarespace non espone un feed di prodotto accessibile al client per impostazione predefinita, l'abbinamento di un widget Try-On all'immagine del prodotto corretto e alla tabella delle dimensioni richiede il passaggio esplicito di identificatori anziché fare affidamento sull'auto-rilevamento. In pratica, ciò significa usare lo SKU del prodotto o l'ID del prodotto generato da Squarespace come attributo di dati sul <div> di embed, in modo che il widget sappia quale capo e quali dati di dimensione caricare senza scansionare la pagina.

Questo è un impegno maggiore rispetto a un'integrazione Shopify, dove la piattaforma fornisce automaticamente JSON di prodotto strutturato. I proprietari di negozi con cataloghi di grandi dimensioni dovrebbero aspettarsi di elaborare questo per lotti — esportando SKU di prodotto da Commerce e mappandoli ai record di prodotto del widget — piuttosto che incorporare un prodotto alla volta a mano.

Testare L'Integrazione Prima Che Vada Live

Non trattare il primo rendering riuscito come completo. L'editor live di Squarespace e il suo sito pubblicato possono comportarsi diversamente, e il rendering mobile sui template di Squarespace è una fonte frequente di rotture di layout per il codice iniettato.

Una breve checklist che cattura la maggior parte dei problemi prima del lancio:

• Carica la pagina pubblicata (non l'anteprima dell'editor) sia su desktop che su un dispositivo mobile reale — gli script iniettati a volte falliscono silenziosamente in modalità anteprima.
• Conferma che il pulsante Try-On appaia su ogni template di prodotto rilevante, non solo su quello che hai testato per primo.
• Controlla che il modale o il pannello non vengano ritagliati dall'intestazione appiccicatizia di Squarespace o dalla barra degli annunci.
• Verifica che il widget continui a caricarsi dopo un aggiornamento del template o del piano Commerce di Squarespace, poiché il codice iniettato può essere ripristinato durante i principali aggiornamenti del sito.

Dato che l'abbigliamento e le calzature hanno già tassi di restituzione ben superiori a altre categorie di vendita al dettaglio — le scarpe in particolare si trovano vicino alla cima — un widget Try-On che fallisce silenziosamente su mobile è un costo reale, non un bug cosmetico.

Dove Si Posiziona YourSizer

Il widget di YourSizer è costruito per essere incorporato esattamente attraverso questo tipo di iniezione manuale, il che lo rende un adattamento praticabile ai vincoli di Squarespace. Lo script core si carica una volta a livello di sito, e gli embed di prodotto individuali sono snippet leggeri che fanno riferimento a un ID prodotto piuttosto che dipendere da un'API di prodotto live — corrispondendo al modo in cui Squarespace Commerce espone effettivamente i dati.

Per i commercianti che utilizzano Squarespace invece di Shopify o una configurazione headless, questo significa che il lavoro di setup riguarda principalmente il posizionamento (ottenere il Code Block posizionato correttamente per template) e la mappatura dei prodotti (associare SKU ai dati di dimensione e vestibilità), non lo sviluppo personalizzato. Il compromesso è che i cambiamenti del catalogo in corso richiedono la ri-verifica del posizionamento dopo gli aggiornamenti del template, il che è un passaggio di manutenzione specifico di Squarespace che vale la pena di prevedere nel budget. Se stai valutando se il Virtual Try-On o un flusso di raccomandazione di dimensioni più semplice si adatta meglio al tuo catalogo, vale la pena leggere come Virtual Try-On si confronta con la raccomandazione di dimensioni prima di impegnarsi in un embed completo.

Domande Frequenti

Posso aggiungere Virtual Try-On a Squarespace senza uno sviluppatore?

Per un singolo prodotto o un piccolo catalogo, sì — l'iniezione di codice richiede solo l'incollamento di uno script nel pannello Impostazioni Avanzate e l'aggiunta di un Code Block a ogni pagina prodotto, che la maggior parte dei proprietari di negozi può fare senza sviluppo personalizzato. I cataloghi più grandi beneficiano dell'aiuto dello sviluppatore principalmente per il passaggio di mappatura dell'ID prodotto, poiché l'etichettatura manuale di decine o centinaia di SKU è noiosa anche se ogni singolo passaggio è semplice.

Squarespace Commerce supporta le app Try-On di terze parti in modo nativo?

No. A differenza di Shopify, Squarespace non ha un marketplace di app che installa gli strumenti Try-On direttamente nelle pagine prodotto. Tutto viene eseguito attraverso l'Iniezione di Codice e i Code Block, il che significa che l'integrazione è più vicina a un embed manuale che a un'installazione di app, e deve essere ri-verificata ogni volta che Squarespace spinge un aggiornamento del template.

L'aggiunta di un widget Try-On rallenterà il mio sito Squarespace?

Può farlo, se lo script si carica su ogni pagina piuttosto che essere differito alle pagine prodotto dove è effettivamente usato. Caricare lo script core una volta nell'iniezione del footer a livello di sito e mantenere gli embed specifici del prodotto leggeri limita l'impatto sulle prestazioni, ma vale la pena controllare la velocità della pagina prima e dopo utilizzando uno strumento come Google PageSpeed Insights o gli analitici stessi di Squarespace.

Qual è la differenza tra iniezione di codice e product-page embed?

L'iniezione di codice è il meccanismo — il pannello di impostazioni di Squarespace dove incolla i tag script — mentre un product-page embed è lo snippet specifico posizionato su un singolo annuncio di prodotto che esegue il rendering del pulsante Try-On e lo connette ai dati di quel prodotto. In genere utilizzi l'iniezione di codice una volta, a livello di sito, per caricare lo script sottostante, e poi aggiungi un piccolo embed su ogni pagina prodotto dove desideri che il pulsante appaia.

Conclusione

La mancanza di un ecosistema di app nativo di Squarespace rende il Virtual Try-On più di una costruzione manuale che un'installazione con un clic, ma la meccanica sottostante — iniezione di codice, embed a livello di prodotto e test attento del template — sono ben alla portata della maggior parte dei proprietari di negozi. Il tempo di setup extra iniziale tende a ripagare con meno resi correlati alle dimensioni una volta che il widget è attivo e verificato in tutti i template, il che vale l'approccio deliberato e pagina per pagina che Squarespace richiede.