Shopify

Recommendations

Generale #

Le Raccomandazioni di Clerk.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 la nostra Best Practice.

Dal menu principale, iniziare facendo clic su Iniziare a lavorare.

Creare un disegno standard #

La prima cosa da fare è creare un Design standard per i vostri cursori.

È possibile utilizzare la Guida all’installazione 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 Publish quando si è soddisfatti dello stile.

È possibile modificarlo facilmente in seguito, sotto Raccomandazioni - Progetti nel menu di sinistra.

Selezione delle raccomandazioni da utilizzare #

Quindi, ogni fase della Guida all’installazione si concentra su una specifica pagina del webshop.

Esse contengono informazioni su

  • Perché le raccomandazioni sono importanti nella pagina._

  • Quali tipi di raccomandazioni utilizzare._

  • In quale punto della pagina dovrebbero essere collocate._**

Fare clic su ciascun tipo di raccomandazione che si desidera utilizzare e seguire i passaggi.

Tenete presente che facendo solo clic su ogni blocco di Raccomandazioni diventeranno verdi come se fossero installate - non lo sono - dovete comunque 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 file che genera la pagina corrispondente nel vostro negozio web.

Cliccare su ciascun tipo di Raccomandazioni e seguire la procedura_.

Ecco un esempio di come Aggiungere raccomandazioni alla pagina del prodotto:

Cliccare su FATTO

È possibile modificare facilmente il contenuto in un secondo momento, sotto Raccomandazioni - Contenuto nel menu di sinistra.

Cambia contenuto

Dopo aver abilitato le funzioni, sarà possibile visualizzare la funzione RACCOMANDAZIONI di Clerk.io sul proprio negozio web.

Alcuni codici embed necessitano di variabili come prodotto o ID di categoria. In questi casi, è sufficiente scegliere Shopify dal menu a tendina Scegli la piattaforma, prima di copiare il codice embed.

Homepage #

Molti temi di Shopify consentono di inserire i codici embed di Clerk.io tramite 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 Aggiungi una nuova sezione.

4. Nominare la sezione Clerk-Slider e fare clic su Crea sezione.

5. Sostituire tutto il contenuto della 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. Andare su Temi -> Personalizza

2. Fare clic su Aggiungi sezione e poi aggiungere Clerk Slider:

3. Inserire il codice embedding 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 una sola, 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 è Sections -> product-template.liquid o main-product-liquid.

3. Copiare 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>
<style>
    @keyframes top {
        from {
        top: -100%;
        }
        to {
        top: 50%;
        }
    }

    .animate_top {
        animation: top 100 ease-in-out;
        top: 50% !important;
    }
    .animate_overlay {
        display:block !important;
    }
    #clerk_powerstep {
        width: clamp(45ch, 50%, 100ch) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0px !important;
        border: 3px solid #888 !important;
        border-radius: 2px !important;
        position: fixed;
        top: -100%;
        z-index: 999;
        display: none;
        background-color: white;
        box-shadow: 0px 8px 40px 0px rgba(0,0,60,0.15);
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
    }

    #clerk_powerstep h2 {
        text-align: center;
    }

    .clerk_powerstep_image {
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .clerk_powerstep_image img {
        object-fit: contain;
        max-height: 240px;
        height: 25vh;
        margin: auto;
    }

    .clerk-popup-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
        font-family: Arial;
        font-size: 32px;
        line-height: 1;
        color: gray;
        z-index: 2;
        padding: 3px;
    }
    .clerk_powerstep_header {
        position: relative;
    }

    .clerk_powerstep_wrap {
        position: relative;
        overflow-y: scroll;
        overflow-y: overlay;
        max-height: 80vh;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .clerk_powerstep_wrap::-webkit-scrollbar {
      display: none;
    }
    .clerk_powerstep_actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .clerk_powerstep_actions button {
        margin: 0 0 10px 0;
    }

    @media only screen and (max-width: 800px){
        .clerk_powerstep_actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

 /* from SB */
 .clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
  order:2;
  align-content: center;
  
 display: flex;
 flex-wrap:wrap;
 width:calc(100% - 100px - 180px - 20px);
}
#clerk_powerstep .clerk_powerstep_header h2 {
width:100%;
  
}  
.clerk_powerstep_top h2 {
font-weight: 500;
font-size: 1.2em;
text-align: left;
margin-bottom: 10px;
text-transform: uppercase;
  
}
.clerk_powerstep_image {
 height:0px;
 width:0px;
  order: 1;
  display:none;
}
.clerk_powerstep_actions {
  order: 3;
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
  width:180px;
}
.clerk_powerstep_actions button {
  margin-bottom:0;
  width: 100%;
}
.clerk_powerstep_actions .powerstep_continue {
background: #0d1e48;
border: 0px solid #000;
padding: 4px 12px;
color:#fff;
line-height: 26px;
font-size: 14px;
}

.clerk_powerstep_actions .powerstep_close {
padding: 3px 11px;
border: 1px solid #0d1e48;
color:#557b97;
line-height: 26px;
font-size: 14px;
}

#clerk_powerstep {
    width: clamp(45ch, 80%, 200ch) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
    border: 0px solid #888 !important;
    border-radius: 0px !important;
    position: fixed;
    
    z-index: 999;
    background-color:#fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}

@media (max-width: 1139px) {

  #clerk_powerstep {
    width: clamp(45ch, 90%, 100ch) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
    border: 0px solid #888 !important;
    border-radius: 0px !important;
    position: fixed;
    
    z-index: 999;
    background-color:#fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
  .clerk_powerstep_wrap {
  flex-direction: row;
  display: flex;
  align-content:center;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap: 10px;
  margin-top:0px;
  margin-right:0px;
  }

  .clerk_powerstep_header {
    width:calc(100% - 0px - 10px);
  }
  .clerk_powerstep_actions {
    flex-direction:row;
    gap:10px;
    width:100%;
  }
}
  @media (max-width: 448px) {

  #clerk_powerstep {
    width: 90% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
    border: 0px solid #888 !important;
    border-radius: 0px !important;
    position: fixed;
    
    z-index: 999;
    background-color:#fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
  .clerk_powerstep_wrap {
  flex-direction: row;
  display: flex;
  align-content:center;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap: 10px;
  margin-top:0px;
  margin-right:0px;
  }

  .clerk_powerstep_header {
    width:calc(100% - 0px - 0px);
  }
  .clerk_powerstep_actions {
    flex-direction:column;
    gap:10px;
    width:100%;
  }
}

  .clerk_powerstep_overlay {
width:100%;
    background-color:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0;
    z-index:998;
    transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
}
</style>
<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 ad eccezione di “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 appare?

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 Exit Intent reagisce quando un visitatore cerca di lasciare il vostro negozio web. Si apre** e mostra prodotti interessanti, convertendo eventualmente il visitatore uscente in un cliente acquirente.

Impostazione #

Seguire questi 5 passaggi:

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

  2. Scegliete la logica giusta - Noi suggeriamo “Raccomandazioni dei visitatori “.

  3. Da Insert Into Website, copiare il codice embed fornito e accedere al backend di Shopify.

  4. Andare a Online Store -> Themes -> Actions -> Edit Code e inserire il codice nel file che genera tutte le pagine. Questo è normalmente theme.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 si tenta di uscire dalla pagina.

Ricordate di stilizzare il vostro contenuto in Designs su my.clerk.io

Tutte le raccomandazioni contenenti il data-exit-intent=“true “ attiveranno l’intento di uscita.

Filtraggio dinamico #

I Clerk.io Filters possono essere utilizzati direttamente nei codici embed utilizzando l’attributo data-filter. Ciò consente di creare filtri dinamici nella logica in base alle variabili del negozio web.

Di seguito sono riportati alcuni esempi, ma è possibile utilizzarlo in molti altri modi.

Esempio 1: Visualizzare prodotti di un tipo o di una marca specifica #

È possibile filtrare i cursori per mostrare solo i prodotti dello stesso tipo o della stessa marca/produttore.

In questo caso, è necessario utilizzare la logica di Shopify per recuperare il tipo. Di solito si tratta di ’{%raw%}{{ product.type }}{%endraw%}’

Ricorda: è 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 necessario 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>