Shopify

Recommendations

Recommendations

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 Best Practices complete, leggi questo articolo su quali Raccomandazioni utilizzare.

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

Seguendo i passaggi in my.clerk.io > Settings > Setup Guides verranno automaticamente creati i blocchi di Contenuto per le nostre Best Practices.

Crea Design #

Le raccomandazioni vengono mostrate 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 Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
  4. Dagli un nome e clicca su Create design.
  5. Apporta le modifiche che desideri al design.

Design di Codice #

  1. Vai a Recommendations > Designs e clicca su New Design.
  2. Scegli Other designs > Blank > Code.
  3. Dagli un nome e clicca su Create 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 ciascun banner di Raccomandazioni che desideri creare.

  1. Vai a Recommendations > Content.
  2. Clicca su New Content.
  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 Content type, 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. Clicca su Save nella parte superiore dello schermo.

Aggiungi al Sito Web #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Utilizzare l’iniezione ti consente di inserire il codice utilizzando un selettore CSS.
    • Utilizzare il codice incorporato ti 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 Choose your platform. 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 del prodotto:

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

Pagine #

Insert Code Example
Di seguito sono riportate le pagine specifiche in cui dovresti inserire le Raccomandazioni e quali tipi dovresti utilizzare, per seguire le nostre Best Practices. Shopify ha più di 100 temi, quindi le posizioni dei file potrebbero non essere sempre precise.

I frammenti di codice devono essere inseriti nei file HTML del tema, che di solito si trovano in Shopify Admin > Online Store > Themes. In alternativa, puoi iniettare i 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. Clicca su Add Section > Custom Liquid.
  4. Inserisci i codici di incorporamento nella casella Custom Liquid.
  5. Clicca su Save.

Se desideri mostrare tutti i banner uno sopra l’altro, inserisci tutti i codici di incorporamento nella stessa casella. Se desideri distribuirli nella 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 Insert into website > Choose your platform, 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 Insert into website > Choose your platform, 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 di 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 Anche” . Questo è importante affinché il codice di incorporamento funzioni correttamente.
  3. Clicca su Save nella parte superiore della pagina.
  4. Nei file del tema di Shopify, trova il file che genera le tue pagine di prodotto. Questo è più spesso Sections > main-product.liquid.
  5. Inserisci il codice di incorporamento Aggiungi Al Carrello nella parte inferiore del file e clicca su Save. Puoi trovare il codice di incorporamento nella sezione Modelli di Partenza.

Il popup Aggiungi Al Carrello verrà ora mostrato 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 Insert into website > Choose your platform, 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 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 Intento di Uscita verrà mostrato 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 Relativi a Una Pagina.
  2. In Shopify, vai a Online Store > Blog posts.
  3. Clicca sul post a cui vuoi aggiungere raccomandazioni.
  4. Clicca 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 personalizzare secondo le 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 del tema della pagina del 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 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;
        }
    }
</style>

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