Shopify

Recommendations

Recommendations

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

Per le nostre Best Practice complete, leggi questo articolo su quali Recommendations utilizzare.

Configurazione Slider #

Le Recommendations vengono create con Elements che fanno riferimento a un Design. Di seguito trovi la guida base per configurare un Element.

Seguendo i passaggi su my.clerk.io > Settings > Setup Guides verranno creati automaticamente gli Elements per le nostre Best Practices.

Crea Design #

Le Recommendations vengono visualizzate come 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 code designs.

Un design può essere riutilizzato per un numero illimitato di elementi Recommendations che crei.

Design Editor #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Dall’elenco dei template di design, scegli quello da cui vuoi partire.
  4. Dagli un nome e clicca su Create design.
  5. Apporta tutte le modifiche che desideri al design.

Code Design #

  1. Vai su 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 code design da zero utilizzando Liquid code.

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

Crea Element #

Questo contiene tutte le impostazioni usate per visualizzare le Recommendations, rendendolo incorporabile nel tuo sito web. Segui questi passaggi per ciascun banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Dagli un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Es: “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica di prodotto che vuoi utilizzare dal menu a discesa. Puoi vedere una panoramica di tutte le product logics qui.
  5. In Design seleziona il design che hai creato dal menu a tendina e scegli il numero di prodotti che desideri mostrare.
  6. Clicca su Save in alto allo schermo.

Aggiungi al Sito #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection ti permette di inserire il codice utilizzando un selettore CSS.
    • Usare embedded code ti permette di inserire il codice manualmente all’interno del tuo sito.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona Shopify. Questo compilerà automaticamente il codice di incorporamento con i corretti shortcodes Shopify.

Percorsi tipici dei file del tema (possono variare in base al tema):

  • Homepage: Online Store > Themes > Customize > Add Section > Custom Liquid.
  • Pagina prodotto: Sections > main-product.liquid.
  • Pagina collezione: Sections > main-collection-product-grid.liquid.
  • Pagina carrello: Sections > main-cart-footer.liquid.
  • Globale (Exit Intent): Layout > theme.liquid (inserire prima di </body>).

Ecco un esempio completo di codice embed Recommendations, con uno shortcode Shopify per inserire l’ID prodotto:

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

Pagine #

Insert Code Example
Di seguito trovi le pagine specifiche dove dovresti inserire le Recommendations, e quali tipologie usare, per seguire le nostre Best Practices. Shopify ha più di 100 temi, quindi le posizioni dei file potrebbero non essere sempre precise.

Gli snippet devono essere inseriti nei file HTML del tema, che normalmente si trovano su Shopify Admin > Online Store > Themes. In alternativa, puoi iniettare i risultati se conosci i selettori CSS degli elementi in cui vuoi inserirli.

Homepage #

  1. In my.clerk.io, crea 3 Elements con le seguenti logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. In Shopify, vai su Online Store > Themes > Customize
  3. Clicca su Add Section > Custom Liquid.
  4. Inserisci i codici embed nella box Custom Liquid.
  5. Clicca su Save.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti i codici embed nello stesso box. Se invece vuoi suddividerli sulla Home Page, ripeti semplicemente il processo più volte.

Pagina Categoria #

  1. In my.clerk.io, crea un Element con la logica Bestsellers In Category.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona Shopify e copia il codice embed.
  3. Vai ai file del tema di Shopify e trova il file che genera le tue pagine Collection. Di solito è Sections > main-collection-product-grid.liquid.
  4. Inserisci il codice embed sotto il titolo e la descrizione. A seconda del tuo tema, la posizione può variare.

Pagina Categoria Completa #

Se vuoi che Clerk.io renderizzi l’intera griglia prodotti nelle pagine collezione (al posto solo dello slider), usa uno snippet per categoria e sostituisci il loop prodotti predefinito nel template della collezione.

  1. In my.clerk.io, crea un nuovo Element Recommendations per le pagine categoria.
  2. In Shopify, apri il tuo template collezione (spesso Sections > main-collection-product-grid.liquid).
  3. Commenta o rimuovi il loop prodotti nativo.
  4. Inserisci questo snippet dove vuoi che venga visualizzata la griglia prodotti:
<div id="clerk-category-filters"></div>
<span
  id="clerk-category-products"
  class="clerk"
  data-template="@YOUR_ELEMENT_ID"
  data-category="{{ collection.id }}"
  data-facets-target="#clerk-category-filters"
  data-facets-attributes='["price","categories","vendor"]'
  data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
  data-facets-in-url="true">
</span>
  1. Salva e testa una pagina collezione con parametri di query nell’URL per verificare che le facets e la paginazione funzionino come previsto.

Consulta l’articolo a livello di piattaforma per indicazioni più approfondite su API/logic: Guida pagina categoria.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Elements con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menu a tendina Insert into website > Choose your platform seleziona Shopify per ciascuno di essi e copia i codici embed.
  3. Nei file tema Shopify, trova il file che genera le tue pagine prodotto. Di solito è Sections > main-product.liquid.
  4. Inserisci i codici embed sotto la descrizione prodotto. A seconda del tuo tema, la posizione può variare.

Passaggio Aggiunta al Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante affinché il codice embed funzioni correttamente.
  3. Clicca su Save in cima alla pagina.
  4. Nei file tema Shopify, trova il file che genera le tue pagine prodotto. Di solito è Sections > main-product.liquid.
  5. Inserisci il codice embed Add-To-Basket in fondo al file e clicca su Save. Trovi il codice embed nella sezione Starting Templates.

Il popup Add-To-Basket verrà ora mostrato quando un cliente aggiunge un prodotto al carrello dalla pagina prodotto.

Se questo non accade, probabilmente il pulsante di aggiunta al carrello ha una classe o ID diverso. Ispeziona il pulsante e sostituisci .product-form__cart-submit nel codice embed con la classe/id corretta.

Pagina Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Dal menu a tendina Insert into website > Choose your platform seleziona Shopify, e copia il codice embed.
  3. Vai ai file tema Shopify e trova il file che genera le tue pagine Carrello. Di solito è Sections > main-cart-footer.liquid.
  4. Inserisci il codice embed sotto gli articoli del carrello e il pulsante checkout, per esempio prima del tag {% schema %}.

Exit Intent #

  1. In my.clerk.io, crea un Element con la logica Visitor Recommendations.
  2. Vai ai file tema Shopify e trova il file tema principale. Di solito è Layout > theme.liquid.
  3. Inserisci il codice embed appena prima del tag di chiusura </body>.
  4. Aggiungi l’attributo data-exit-intent="true" al codice embed. Un esempio di come dovrebbe apparire:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Dopo averlo aggiunto, il popup Exit Intent verrà mostrato quando un cliente muove il mouse sulla barra degli indirizzi del browser.

Pagina Blog #

  1. In my.clerk.io, crea un Element con la logica Products Related To A Page.
  2. In Shopify, vai su Online Store > Blog posts.
  3. Clicca sul post a cui vuoi aggiungere le recommendations.
  4. Clicca sul pulsante <> in alto a destra della casella di testo per vedere l’HTML del post.
  5. Inserisci il codice embed nella parte del post in cui è naturale mostrare recommendations, e sostituisci INSERT_PAGE_ID_HERE con l’ID del post. Puoi trovare questo ID nell’URL del post.

Template di Partenza #

Se vuoi usare i code designs, questi template ti aiuteranno a iniziare.

Codice Slider #

Questo template visualizzerà uno slider standard con varie informazioni sul prodotto, che puoi personalizzare a tuo piacimento.

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">On Sale</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">Out of Stock</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">Add to Cart</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 Add-To-Basket #

Questo codice embed deve essere inserito in fondo al file tema della pagina prodotto. Mostrerà un popup con uno slider di prodotti quando un cliente aggiunge un prodotto al carrello. Può essere personalizzato secondo le esigenze.

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 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 carrello.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Procedi al Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continua lo 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.