Aggiungi lo Skin Test al tema

Lo Skin Test arriva in vetrina tramite l’estensione del tema di Dermaself. Lo attivi e lo personalizzi nell’editor del tema di Shopify: l’app non modifica mai il codice del tuo tema.

Per mettere il pulsante dentro una pagina serve un tema Online Store 2.0. Sui temi più vecchi (vintage) funzionano comunque il pulsante flottante, i link nel menu e JavaScript.

1. Attiva il Loader Skin Test

Il loader è obbligatorio: senza, nessun pulsante o link apre lo Skin Test.

Nell’app apri Pubblica e clicca Attiva il loader. Si apre l’editor del tema con Incorporazioni app (App embeds) e il Loader Skin Test già selezionati. In alternativa vai tu in Negozio online → Temi → Personalizza → Incorporazioni app.
Accendi Loader Skin Test.
Se vuoi, regola le impostazioni (vedi sotto), poi clicca Salva.

Attiva il loader dalla pagina Pubblica, accendi Loader Skin Test negli Incorporazioni app, poi Salva

Incorporazioni app con il loader Skin Test acceso e il pulsante flottante nell’anteprima

Se non salvi il tema, il loader resta spento sul negozio live.

2. Il pulsante Skin Test flottante

Mostra il pulsante Skin Test flottante è acceso di default: un pulsante flottante compare in basso su tutte le pagine, senza cambiare il layout del tema.

Le sue impostazioni sono nel loader:

Testo del pulsante, Mostra l’icona, File dell’icona (facoltativo, PNG quadrato, idealmente 96×96 px), Dimensione dell’icona
Posizione: in basso a sinistra (predefinita, così non copre una chat o lo Store Assistant) o in basso a destra
Su mobile: solo icona, oppure icona e testo
Distanza dal bordo laterale, Distanza dal fondo
Inizio gradiente, Fine gradiente, Colore del testo, Dimensione del testo, Raggio degli angoli

Impostazioni del Loader Skin Test con Mostra il pulsante Skin Test flottante

Spegni Mostra il pulsante Skin Test flottante se metti il pulsante dentro una pagina. Il loader invece resta acceso.

3. Un pulsante dentro una pagina

Nell’app apri Pubblica e clicca Aggiungi il pulsante, oppure apri l’editor del tema sulla pagina che vuoi (per esempio la home).
Clicca Aggiungi sezione (o Aggiungi blocco dentro una sezione) → scheda App → Pulsante Skin Test.
Trascinalo dove vuoi, imposta le opzioni e clicca Salva.

Aggiungi sezione, App, Pulsante Skin Test, impostazioni, Salva

Impostazioni del blocco: Testo del pulsante, Mostra l’icona, File dell’icona, Dimensione dell’icona, Allineamento, Pulsante a tutta larghezza, Inizio gradiente / Fine gradiente, Colore del testo, Dimensione del testo, Raggio degli angoli, Spaziatura verticale / Spaziatura orizzontale, Margine superiore / Margine inferiore.

Impostazioni del blocco Pulsante Skin Test

Per stili o posizionamenti in più, usa il CSS personalizzato della sezione nell’editor del tema.

Alcuni temi avvolgono i blocchi della sezione App in un’animazione allo scroll, che rompe position: fixed. Se il tuo posizionamento non tiene, aggiungi questa riga nel CSS personalizzato della stessa sezione:

.scroll-trigger{transform:none!important;opacity:1!important;animation:none!important}

4. Traduci il testo del pulsante

Il testo del pulsante è un unico campo. Per mostrarlo in tutte le lingue del negozio usa l’app Translate & Adapt di Shopify: apri Tema, trova il template dove sta il pulsante (per esempio Home page), poi Pulsante Skin Test → testo, e inserisci la traduzione per ogni lingua.

Voce di menu: in Contenuti → Menu aggiungi una voce con un link che finisce con #dermaself-quiz. Vanno bene anche gli URL localizzati, per esempio /it#dermaself-quiz.
Qualsiasi link il cui URL finisce con #dermaself-quiz apre lo Skin Test.
Qualsiasi elemento con l’attributo data-dermaself-quiz lo apre al clic.
JavaScript: chiama openSkinAnalysis() da un tuo pulsante.

Funzionano tutti solo con il Loader Skin Test acceso.

6. Pubblica

Nell’app apri Pubblica e clicca Pubblica: lo Skin Test è acceso per i clienti.

Pagina Pubblica dopo la pubblicazione

Annulla pubblicazione mette lo Skin Test offline. Il pulsante resta nel tema, ma lo Skin Test risulta non disponibile.
Testo, colori e posizione del pulsante si cambiano nell’editor del tema: salva il tema, non serve ripubblicare.

7. Quando lo Skin Test non è disponibile

Il cliente vede un pannello “non disponibile” al posto del quiz quando:

lo Skin Test non è pubblicato;
il piano Free ha finito le 25 analisi del mese (torna il mese dopo, o subito se passi a un piano a pagamento);
il piano non è attivo.

Vedi Piani e consumi.

Prova

Apri il negozio live in una finestra privata, da desktop e da mobile, e completa uno Skin Test. Il flusso è descritto in Esperienza cliente.