Shopify

Recommendations

Raccomandazioni

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile visualizzare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare un Clerk.js setup in Shopify.

Per le nostre migliori pratiche complete, leggi questo articolo su quali raccomandazioni utilizzare.

Impostazione dei contenuti #

Le raccomandazioni vengono create con blocchi di Contenuto che fanno riferimento a un Design. Di seguito è riportata la guida di base per impostare un blocco di Contenuto.

Seguire i passaggi in my.clerk.io > Impostazioni > Guide di configurazione creerà automaticamente i blocchi di Contenuto per le nostre migliori pratiche.

Crea Design #

Le raccomandazioni vengono visualizzate come uno slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare design di codice.

Un design può essere riutilizzato per qualsiasi numero di contenuti di raccomandazioni che crei.

Design Editor #

  1. Vai a Raccomandazioni > Design e fai clic su Nuovo Design.
  2. Scegli Product Slider
  3. Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
  4. Dagli un nome e fai clic su Crea design.
  5. Apporta le modifiche che desideri al design.

Design di Codice #

  1. Vai a Raccomandazioni > Design e fai clic su Nuovo Design.
  2. Scegli Altri design > Vuoto > Codice.
  3. Dagli un nome e fai clic su Crea design.
  4. Crea un design di codice da zero utilizzando Liquid code.

Se desideri un design di partenza, controlla il modello Slider più in basso.

Crea Contenuto #

Questo contiene tutte le impostazioni utilizzate per visualizzare le Raccomandazioni e renderle incorporabili nel tuo sito web. Segui questi passaggi per ogni banner di Raccomandazioni che desideri creare.

  1. Vai a Raccomandazioni > Contenuto.
  2. Fai clic su Nuovo Contenuto.
  3. Dagli un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che desideri utilizzare. Ad esempio, “Home Page / Raccomandazioni per Visitatori”.
  4. In Tipo di contenuto, seleziona la logica di prodotto che desideri utilizzare dal menu a discesa. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
  5. In Design seleziona il design che hai creato dal menu a discesa e scegli il numero di prodotti che desideri mostrare.
  6. Fai clic su Salva nella parte superiore dello schermo.

Aggiungi al Sito Web #

  1. Apri la scheda Inserisci nel sito web.
  2. Qui hai due opzioni:
    • Utilizzare l’iniezione consente di inserire il codice utilizzando un selettore CSS.
    • Utilizzare il codice incorporato consente di inserire il codice manualmente nel tuo sito web.
  3. Scegli l’opzione che è più facile per te da usare.
  4. Per alcune Logiche vedrai il menu a discesa Scegli la tua piattaforma. Seleziona Shopify in questi casi. Questo precompila il codice di incorporamento con i corretti shortcode di Shopify.

Ecco un esempio completo di codice di incorporamento delle Raccomandazioni, con uno shortcode di Shopify per inserire l’ID prodotto:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products="[{{ product.id }}]">
</span>

Pagine #

Inserisci Esempio di Codice
Di seguito sono riportate le pagine specifiche in cui dovresti inserire le Raccomandazioni e quali tipi dovresti utilizzare, per seguire le nostre migliori pratiche. Shopify ha più di 100 temi, quindi le posizioni dei file potrebbero non essere sempre precise.

I frammenti dovrebbero essere inseriti nei file HTML del tema, che di solito si trovano in Shopify Admin > Online Store > Themes. In alternativa, puoi iniettare risultati se conosci i selettori CSS per gli elementi in cui desideri inserire i risultati.

Homepage #

  1. In my.clerk.io, crea 3 blocchi di Contenuto con le seguenti logiche:
    • Raccomandazioni per Visitatori
    • Bestseller
    • Prodotti Caldi
  2. In Shopify, vai a Online Store > Themes > Customize
  3. Fai clic su Aggiungi Sezione > Liquid Personalizzato.
  4. Inserisci i codici di incorporamento nella casella Liquid Personalizzato.
  5. Fai clic su Salva.

Se desideri mostrare tutti i banner uno sopra l’altro, inserisci tutti i codici di incorporamento nella stessa casella. Se desideri distribuirli sulla Home Page, segui semplicemente il processo sopra più volte.

Pagina Categoria #

  1. In my.clerk.io, crea un blocco di Contenuto con la logica Bestseller In Categoria.
  2. Nel menu a discesa Inserisci nel sito web > Scegli la tua piattaforma, seleziona Shopify, e copia il codice di incorporamento.
  3. Vai ai file del tema di Shopify e trova il file che genera le tue pagine di Collezione. Questo è più spesso Sections > main-collection-product-grid.liquid.
  4. Inserisci il codice di incorporamento da qualche parte sotto il titolo e la descrizione. A seconda del tuo tema, questa posizione varierà.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 blocchi di Contenuto con le seguenti logiche:
    • Migliori Prodotti Alternativi
    • Migliori Prodotti Cross-Sell
  2. Nel menu a discesa Inserisci nel sito web > Scegli la tua piattaforma, seleziona Shopify per ciascuno di essi e copia i codici di incorporamento.
  3. Nei file del tema di Shopify, trova il file che genera le tue pagine prodotto. Questo è più spesso Sections > main-product.liquid.
  4. Inserisci i codici di incorporamento da qualche parte sotto la descrizione del prodotto. A seconda del tuo tema, questa posizione varierà.

Passo Aggiungi al Carrello #

  1. In my.clerk.io, crea un blocco di Contenuto con la logica Migliori Prodotti Cross-Sell.
  2. Dagli il nome “Aggiungi al Carrello / Altri Acquisti”. Questo è importante affinché il codice di incorporamento funzioni correttamente.
  3. Fai clic su Salva nella parte superiore della pagina.
  4. Nei file del tema di Shopify, trova il file che genera le tue pagine prodotto. Questo è più spesso Sections > main-product.liquid.
  5. Inserisci il codice di incorporamento Aggiungi al Carrello nella parte inferiore del file e fai clic su Salva. Puoi trovare il codice di incorporamento nella sezione Modelli di Partenza.

Il popup Aggiungi al Carrello verrà ora visualizzato quando un cliente aggiunge un prodotto al proprio carrello dalla pagina del prodotto.

Se non appare, è probabile che il tuo pulsante aggiungi al carrello abbia una classe o un ID diverso. Ispeziona il tuo pulsante e sostituisci .product-form__cart-submit nel codice di incorporamento con la classe/id del tuo pulsante.

Pagina Carrello #

  1. In my.clerk.io, crea un blocco di Contenuto con la logica Migliori Prodotti Cross-Sell.
  2. Nel menu a discesa Inserisci nel sito web > Scegli la tua piattaforma, seleziona Shopify, e copia il codice di incorporamento.
  3. Vai ai file del tema di Shopify e trova il file che genera le tue pagine Carrello. Questo è più spesso Sections > main-cart-footer.liquid.
  4. Inserisci il codice di incorporamento da qualche parte sotto gli articoli del carrello e il pulsante di checkout, ad esempio appena prima del tag {% schema %}.

Intento di Uscita #

  1. In my.clerk.io, crea un blocco di Contenuto con la logica Raccomandazioni per Visitatori.
  2. Vai ai file del tema di Shopify e trova il file principale del tema. Questo è più spesso Layout > theme.liquid.
  3. Inserisci il codice di incorporamento appena prima del tag di chiusura </body>.
  4. Aggiungi l’attributo data-exit-intent="true" al codice di incorporamento. Ecco un esempio di come dovrebbe apparire:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Dopo aver aggiunto questo, il popup di Intento di Uscita verrà visualizzato quando un cliente passa il mouse sulla barra degli indirizzi del proprio browser.

Pagina Blog #

  1. In my.clerk.io, crea un blocco di Contenuto con la logica Prodotti Correlati a Una Pagina.
  2. In Shopify, vai a Online Store > Post del Blog.
  3. Fai clic sul post a cui desideri aggiungere raccomandazioni.
  4. Fai clic sul pulsante <> nell’angolo in alto a destra della casella di testo per vedere l’HTML del post.
  5. Inserisci il codice di incorporamento in una parte del post dove è naturale mostrare raccomandazioni, e sostituisci INSERT_PAGE_ID_HERE con l’ID della pagina del post. Puoi trovare questo ID nell’URL del post.

Modelli di Partenza #

Se desideri utilizzare design di codice, questi modelli possono aiutarti a iniziare.

Codice Slider #

Questo modello renderizzerà uno slider standard con varie informazioni sui prodotti, che puoi adattare alle tue esigenze.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">In Offerta</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Esaurito</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Aggiungi al Carrello</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Codice Aggiungi al Carrello #

Questo codice di incorporamento dovrebbe essere inserito nella parte inferiore del file tema della pagina prodotto. Mostrerà un popup con uno slider di prodotti quando un cliente aggiunge un prodotto al proprio carrello. Può essere personalizzato secondo necessità.

HTML #

<script>
    document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.product-form__submit';
    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');

    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');

        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');
        //window.location.reload();
        clerkPowerstep.style.display = 'none';    
    }
</script>
<div style="display: none;" id="clerk_powerstep">
    <span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
    <div class="clerk_powerstep_wrap">
        <div class="clerk_powerstep_header">
        <h2>Hai aggiunto <b><u>{{ product.title }}</u></b> al tuo carrello.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="Hai aggiunto <b><u>{{ product.title }}</u></b> al tuo carrello.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continua al Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continua a Fare Shopping</button>
        </div>
        <br>
        <span class="clerk-powerstep-recommendations" 
            data-template="@add-to-basket-others-also-bought" 
            data-products="[{{product.id}}]">
        </span>
    </div>
</div>

<style>
    @keyframes top {
        from {
        top: -100%;
        }
        to {
        top: 50%;
        }
    }

    .animate_top {
        animation: top 100 ease-in-out;
        top: 50% !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 e 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;
        }
    }
</style>

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.