Testate i temi di Shopify con Varify.io
Indice dei contenuti
Breve e dolce
Utilizzate l'anteprima del tema Shopify per testare facilmente un nuovo tema Shopify con Varify.io. Create un nuovo esperimento e utilizzate il codice JavaScript fornito. Personalizzatelo con l'ID del nuovo tema e testatelo prima di convertire il vostro negozio.
Perché testare i temi di Shopify
Un nuovo tema di Shopify dovrebbe essere sottoposto a un test A/B prima di passare a un altro, per assicurarsi che non peggiori le prestazioni del negozio. Le modifiche al design possono influenzare il comportamento dei clienti e i KPI, come il tasso di conversione. Il test A/B consente di verificare, sulla base dei dati, se il nuovo tema offre risultati migliori.
Passo 1: Inserire lo snippet Varify.io nel file theme.liquid
💡Nota: si consiglia di integrare lo snippet Varify tramite il file themes.liquid per testare i temi.
Copiate lo snippet di Varify.io dalla dashboard e incollatelo il più in alto possibile nel file theme.liquid del vostro negozio. Per farlo, andate su "Negozio online"-> "Temi" nel backend di Shopify e cliccate su "modifica codice".
Passo 2: trovare l'ID del nuovo tema che si vuole testare
L'ID del tema ci serve per indicare a Shopify il tema che i partecipanti al test devono vedere. Ecco una guida passo passo su come trovare l'ID del tema dal link di anteprima:
1. andare a: Canali di vendita > Negozio online > Temi > Libreria di temi.
2. selezionare il tema che si desidera testare.
3. fare clic su : Azioni.
4. Fare clic con il tasto destro del mouse su Anteprima e copiare il link.
Il link di anteprima avrà un aspetto simile a questo: https://deinshop.myshopify.com/?preview_theme_id=1234567890
Il numero alla fine del link (1234567890) è l'ID del tema necessario.
Fase 3: Creare l'esperimento
Creare un esperimento per qualsiasi pagina del proprio negozio. Aggiungere quindi il seguente JavaScript all'esperimento. Per farlo, cliccare sul simbolo del codice in alto a destra e poi su JavaScript. Scambiare l'ID del tema nella riga 8 con l'ID del passaggio precedente.
💡Nota: nel codice, sostituire l'ID del tema nella riga 8 con l'ID corrispondente del passaggio precedente.
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('varify-mode') !== 'edit') {
var themeName = 'newTestTheme', themeQueryParam = {
_ab: 0,
_fd: 0,
_sc: 1,
preview_theme_id: 123456789876 // add theme ID here
};
var updateQueryStringParameter = function (uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (value === undefined) {
if (uri.match(re)) { return uri.replace(re, '$1$2'); } else { return uri; }
} else {
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if (uri.indexOf('#') !== -1) { hash = uri.replace(/.*#/, '#'); uri = uri.replace(/#.*/, ''); }
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
};
var themeUrl = window.location.href;
for (var key in themeQueryParam) {
themeUrl = updateQueryStringParameter(themeUrl, key, themeQueryParam[key]);
}
if (!(sessionStorage.getItem('theme-' + themeName) == 'true')) {
sessionStorage.setItem('theme-' + themeName, 'true');
window.location.href = themeUrl;
}
};
Quindi, aggiungiamo il seguente CSS alla funzione CSS per nascondere la barra di anteprima in Shopify:
#preview-bar-iframe{display: none !important;}
Una volta inseriti entrambi gli snippet di codice nell'esperimento nell'editor, si può fare clic su "Finito" e assegnare all'esperimento un nome adeguato.
Fase 4: Targeting e garanzia di qualità
Una volta implementati JavaScript e CSS e salvato l'esperimento, è possibile salvare l'URL del negozio nella pagina di destinazione dell'esperimento. È inoltre possibile utilizzare i link "Anteprima" per verificare se il reindirizzamento funziona e se tutte le impostazioni sono state effettuate correttamente.
Un suggerimento: se il reindirizzamento non appare immediatamente, ma si vede per un attimo il tema corrente, si dovrebbe verificare se è possibile spostare lo snippet del passo 2.1 più in alto.
Fase 5: Targeting e garanzia di qualità
Ora avviate l'esperimento con "Avvia esperimento". D'ora in poi, 50% dei vostri visitatori saranno indirizzati al nuovo tema. Dopo un po' di tempo, si capirà quale tema è più performante.