Shopify

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:

  1. Creare un nuovo sito Contenuto del sito web in my.clerk.io

  2. Scegliere la logica giusta - Suggeriamo “Raccomandazioni dei visitatori”.

  3. Da Inserire nel sito web, copiate il codice embed fornito e andate su Backend di Shopify.

  4. 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.

  5. 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>