Recommendations
Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.
Generale #
ClerkLe Raccomandazioni di .io possono essere installate su qualsiasi pagina del negozio web, per aiutare i clienti a trovare i prodotti giusti.
Con la Guida all’installazione, è possibile vedere su quali pagine installare le raccomandazioni e quali tipi di raccomandazioni utilizzare, per far funzionare il nostro Migliori pratiche.
Dal menu principale, iniziare facendo clic su Per iniziare:
Crea un disegno standard #
La prima cosa da fare è creare un Design standard per i vostri cursori.
È possibile utilizzare Guida alla configurazione sotto Raccomandazioni - Creare un design per i cursori delle raccomandazioni - per creare rapidamente un design che abbia lo stesso schema di colori e lo stesso stile del vostro negozio web.
Fare clic su Pubblicare quando si è soddisfatti dello stile.
È possibile modificarlo facilmente in seguito, sotto Raccomandazioni - Designs nel menu di sinistra.
Selezione delle raccomandazioni da utilizzare #
Successivamente, ogni passo della Guida all’installazione si concentra su uno specifico Pagina del webshop.
Essi contengono informazioni su
Perché le raccomandazioni sono importanti nella pagina?
Quali tipi di raccomandazioni usare.
In quale punto della pagina devono essere collocate.
Fare clic su ciascun tipo di raccomandazione che si desidera utilizzare e seguire la procedura.
Tenete presente che: da solo cliccando su ogni blocco di Raccomandazioni diventeranno verde come se sono stati installati - non lo sono - è ancora necessario fare clic e seguire i passaggi.
Inserimento delle Raccomandazioni #
Dopo aver scelto quali raccomandazioni utilizzare per una pagina, è possibile aggiungerle al proprio webshop.
Inserimento solo con i codici incorporati #
Shopify consente solo un’integrazione con embedcode:
Per ogni tipo di raccomandazione, è sufficiente copiare l’embedcode e inserirlo nel sito file che genera la pagina corrispondente nel vostro negozio web.
Cliccate su ogni tipo di Raccomandazione e seguite i passi da seguire.
Ecco un esempio di come Aggiungere le raccomandazioni alla pagina del prodotto
Fare clic su FATTO
È possibile modificare facilmente il contenuto in un secondo momento, sotto Raccomandazioni - Contenuto nel menu a sinistra.
Cambia contenuto
Dopo aver abilitato le funzionalità, sarà possibile visualizzare la funzione RACCOMANDAZIONI di Clerk.io sul proprio negozio web.
Alcuni codici embed necessitano di variabili come prodotto o categoria-ID. In questi casi, è sufficiente scegliere Shopify dal menu a tendina Scegliere la piattaforma, prima di copiare il codice embed.
Homepage #
Molti temi di Shopify consentono di inserire i codici embed di Clerk.io attraverso un HTML personalizzato nella pagina iniziale. Tuttavia, alcuni temi non dispongono di questa opzione, nel qual caso è necessario aggiungere una propria sezione per consentirlo. Ecco come fare:
Aggiungere una sezione Clerk-Slider al proprio Tema #
1. Accedere al backend di Shopify.
2. Andare a Negozio online -> Temi -> Azioni -> Modifica codice
3. Scorrere fino a Sezioni e fare clic su Aggiungere una nuova sezione.
4. Assegnare un nome alla sezione Commesso-Slider e fare clic su Creare una sezione
5. Sostituire tutti i contenuti nella sezione con il seguente codice:
{%raw%}{{ section.settings.embedcode }}
{% schema %}
{
"name": "Clerk Slider",
"class": "clerk-slider",
"settings": [
{
"type": "html",
"id": "embedcode",
"label": "Embedcode"
}
],
"presets": [
{
"category": "Products",
"name": "Clerk Slider"
}
]
}
{% endschema %}
{%endraw%}
6. Fare clic su Salva
Inserire le sezioni con i codici embed nella propria homepage #
1. Vai a Temi -> Personalizza
2. Fare clic su Aggiungi sezione e aggiungere Cursore impiegato:
3. Inserire il codice di incorporamento delle raccomandazioni che si desidera visualizzare e fare clic su Salva:
E il gioco è fatto! È possibile aggiungere tutte le sezioni che si desidera alla homepage e persino includere più codici embedcode in uno solo, se lo si desidera.
Fase Aggiungi al carrello #
1. Accedere al backend di Shopify e andare su Negozio online -> Temi -> Azioni -> Modifica codice.
2. Trovare il file che genera la pagina del prodotto. Di solito è Sezioni -> prodotto-template.liquid o prodotto principale-liquido
3. Copiate il seguente codice in fondo al file:
<script>
document.addEventListener('DOMContentLoaded', function(){
const buyBtn = (document.querySelector('.product-form__add-button')) ? '.product-form__add-button' : '.product-form__add-button';
const prodPage = (document.querySelector('[data-section-id="product-template"] > div')) ? '[data-section-id="product-template"] > div' : '.product-section > section';
const clerkPowerstep = document.getElementById('clerk_powerstep');
const clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
document.querySelector(buyBtn).addEventListener('click', open_powerstep);
function open_powerstep() {
Clerk('content', '.clerk-powerstep-recommendations');
clerkPowerstep.style.display = 'block';
clerkPowerstep.style.padding = '5px 15px';
clerkPowerstep.classList.toggle('animate_top');
clerkPowerstepOverlay.classList.toggle('animate_overlay');
clerkPowerstepOverlay.style.height = document.body.clientHeight + 'px';
setTimeout(function(){
document.querySelector(prodPage).addEventListener('click', close_powerstep);
document.getElementsByTagName('header')[0].addEventListener( 'click', close_powerstep );
}, 500);
}
});
function close_powerstep() {
var clerkPowerstep = document.getElementById('clerk_powerstep');
var clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
clerkPowerstep.classList.toggle('animate_top');
clerkPowerstepOverlay.classList.toggle('animate_overlay');
//window.location.reload();
}
</script>
<placeholder>__PLACEHOLDER_0__</placeholder>
<div class="clerk_powerstep_overlay" style="display:none;"></div>
<div style="display: none;" id="clerk_powerstep">
<div class="clerk_powerstep_top">
<span class="clerk-popup-headline">
<h2>Almost there</h2>
</span>
<span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
</div>
<div class="clerk_powerstep_wrap">
<div class="clerk_powerstep_header">
<h2>You added "{{ product.title }}" to your cart.</h2>
</div>
<div class="clerk_powerstep_image">
<img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="You added <b><u>{{ product.title }}</u></b> to your cart.">
</div>
<div class="clerk_powerstep_actions">
<button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continue to Checkout</button>
<button class="powerstep_close button btn" onclick="close_powerstep();">Continue Shopping</button>
</div>
</div>
<span class="clerk-powerstep-recommendations"
data-template="@power-step-others-also-bought"
data-products="[{{product.id}}]">
</span>
</div>
4. La pagina Powerstep dovrebbe ora apparire quando un prodotto viene aggiunto al carrello.
Regolazione del tipo di carrello nel tema Shopify
Per modificare il tipo di carrello, seguire il percorso Tema > Personalizza > Impostazioni del tema > Carrello > Tipo di carrello nel backend di Shopify.
Nel menu a tendina Tipo di carrello, assicurarsi di selezionare qualsiasi opzione tranne che per “Pagina”.. Le opzioni che appaiono nel menu a tendina dipendono dal tema del vostro negozio web e possono includere “Cassetto” o “Popup”, tra le altre.
La scelta di un’opzione diversa da “Pagina” serve a evitare il ricaricamento della pagina con l’attivazione del Powerstep.
Dopo aver creato questi due file, aggiunto le due righe al file del tema e aggiornato il tema del carrello, il Powerstep dovrebbe apparire.
Cosa succede se il mio powerstep non viene visualizzato?
Se il powerstep non appare, è probabile che il pulsante Aggiungi al carrello abbia una classe o un ID diverso. Ispezionare il pulsante e inserire nel codice la classe/id della classe .product-form__cart-submit.
Intento di uscita #
Il popup Intento di uscita reagisce quando un visitatore cerca di lasciare il vostro negozio web. pops up e visualizza prodotti interessanti, eventualmente convertendo il visitatore che se ne va in un cliente che acquista.
Impostazione #
Seguire questi 5 passaggi:
Creare un nuovo sito Contenuto del sito web in my.clerk.io
Scegliere la logica giusta - Suggeriamo “Raccomandazioni dei visitatori”.
Da Inserire nel sito web, copiate il codice embed fornito e andate su Backend di Shopify.
Andate su Negozio online -> Temi -> Azioni -> Modifica codice e inserite il codice nel file che genera tutte le pagine. Di solito si tratta di tema.liquid.
Aggiungere: data-exit-intent=“true” al codice embed appena inserito.
Esempio
<span class="clerk"
data-template="@exit-intent"
data-exit-intent="true">
</span>
Inserito in theme.liquid_
Ora si vedrà il pop-up dell’intento di uscita quando qualcuno cercherà di uscire la pagina.
Ricordate di stile i vostri contenuti in Designs all’indirizzo my.clerk.io
Tutte le raccomandazioni contenenti data-exit-intent=“true” attiveranno il pop-up di exit intent.
Filtraggio dinamico #
Il Filtri Clerk.io può essere utilizzato direttamente nei codici embed utilizzando l’attributo filtro_dati. Ciò consente di inserire filtri dinamici nella logica basata su variabili del webshop.
Di seguito sono riportati alcuni esempi, ma è possibile utilizzarlo in molti altri modi.
Esempio 1: Visualizzare prodotti di un tipo o di un marchio specifico #
È possibile filtrare i cursori per mostrare solo i prodotti dello stesso tipo o dello stesso marchio/produttore.
In questo caso, è necessario utilizzare Logica di Shopify per recuperare il tipo. Di solito si tratta di ’{%raw%}{{ prodotto.tipo }}{%endraw%}’
Ricordare: è importante aggiungere gli apici singoli intorno alla variabile:
<span class="clerk"
data-template="@type-slider"
data-filter="type = '{%raw%}{{ product.type }}{%endraw%}'">
</span>
Esempio 2: Visualizzazione di prodotti che causano il raggiungimento di un limite di spedizione gratuita: #
Supponendo che il negozio abbia una variabile chiamata {{ order.shipping_limit }} che contiene l’importo rimanente necessaria al cliente per raggiungere il limite di spedizione gratuita, è possibile utilizzare un filtro dinamico che assomiglia a questo, per visualizzare solo i prodotti al di sopra di questo punto di prezzo:
<span class="clerk"
data-template="@complementary-to-basket"
data-filter="price > {%raw%}{{ order.shipping_limit }}{%endraw%}">
</span>