Shopify

Recommendations

Recommendations

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. In questo articolo viene spiegato come iniziare a usare un Clerk.js setup in Shopify.

Per tutte le Best Practices, leggi questo articolo su quali Recommendations utilizzare.

Configurazione dello Slider #

Le Recommendations vengono create con gli Elements che fanno riferimento a un Design. Qui sotto trovi la guida di base per impostare un Element.

Seguire i passaggi in my.clerk.io > Settings > Setup Guides creerà automaticamente gli Elements per le nostre Best Practices.

Crea Design #

Le Recommendations vengono mostrate come uno slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi configurarlo visivamente tramite il Design Editor, oppure utilizzare i code designs.

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

Design Editor #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Dalla lista dei design template, scegli quello con cui vuoi iniziare.
  4. Dagli un nome e clicca su Create design.
  5. Esegui tutte le modifiche che vuoi 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 usando Liquid code.

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

Crea Element #

Questo contiene tutte le impostazioni usate per mostrare le Recommendations e renderle integrabili nel tuo sito. Segui questi passaggi per ogni 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. Ad es., “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica di prodotto che vuoi usare dal menu a tendina. Puoi vedere una panoramica di tutte le logiche prodotto qui.
  5. In Design seleziona il design che hai creato dal menu e scegli il numero di prodotti da mostrare.
  6. Clicca su Save in cima alla schermata.

Aggiungi al sito #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection ti consente di inserire il codice utilizzando un selettore CSS.
    • Usare il codice embedded ti permette di inserire manualmente il codice nel tuo sito.
  3. Scegli l’opzione che ti risulta più semplice.
  4. Per alcune logiche vedrai il menu a tendina Choose your platform. Seleziona Shopify in questi casi. Questo auto-compilerà il codice embed con i corretti shortcode 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 embed code per Recommendations, con uno shortcode Shopify per inserire il product ID:

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

Pagine #

Insert Code Example
Qui sotto trovi le pagine specifiche in cui dovresti inserire le Recommendations e quali tipi utilizzare, per seguire le nostre Best Practices. Shopify ha più di 100 temi, quindi i file potrebbero avere posizioni leggermente diverse.

Gli snippet vanno inseriti nei file HTML del tema, che normalmente si trovano in 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 gli embedcode nel box Custom Liquid.
  5. Clicca su Save.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nello stesso box. Nel caso volessi dividerli nella 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 l’embedcode.
  3. Vai nei file tema di Shopify e trova il file che genera le pagine Collection. Di solito è Sections > main-collection-product-grid.liquid.
  4. Inserisci l’embedcode da qualche parte sotto il titolo e la descrizione. A seconda del tuo tema, questo posizionamento può variare.

Pagina Categoria Completa #

Se vuoi che Clerk.io mostri l’intera griglia prodotti nelle pagine collection (invece di solo uno slider), usa uno snippet basato su categoria e sostituisci il loop prodotti predefinito nel tuo template di collezione.

  1. In my.clerk.io, crea un nuovo Element Recommendations per le pagine categoria.
  2. In Shopify, apri il template della collezione (spesso Sections > main-collection-product-grid.liquid).
  3. Commenta o rimuovi il loop prodotti nativo.
  4. Inserisci questo snippet dove dovrebbe comparire 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 query nell’URL per confermare che facet e paginazione funzionino correttamente.

Usa l’articolo di livello piattaforma per una guida API/logica più approfondita: Guida per pagina categoria.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Elements con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. In Insert into website > Choose your platform menu a tendina, seleziona Shopify per ognuno e copia gli embedcode.
  3. Nei file tema di Shopify, trova il file che genera le pagine prodotto. Di solito è Sections > main-product.liquid.
  4. Inserisci gli embedcode sotto la descrizione prodotto. Il posizionamento varia in base al tema.

Step 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é l’embedcode funzioni correttamente.
  3. Clicca su Save in alto nella pagina.
  4. Nei file tema di Shopify, trova il file che genera le pagine prodotto. Di solito è Sections > main-product.liquid.
  5. Inserisci l’embedcode Add-To-Basket in fondo al file e clicca su Save. Puoi trovare l’embedcode nella sezione Starting Templates.

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

Se non succede, probabilmente il bottone add-to-cart ha una classe o ID diverso. Analizza il bottone e sostituisci .product-form__cart-submit nell’embedcode con la classe/id del tuo bottone.

Pagina Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona Shopify e copia l’embedcode.
  3. Vai nei file tema di Shopify e trova quello che genera la pagina carrello. Di solito è Sections > main-cart-footer.liquid.
  4. Inserisci l’embedcode da qualche parte sotto gli articoli nel carrello e il bottone checkout, ad esempio subito prima del tag {% schema %}.

Exit Intent #

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

Dopo aver aggiunto questo, il popup Exit Intent verrà mostrato quando un cliente sposterà il mouse sopra la 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 bottone <> in alto a destra nella casella di testo per vedere l’HTML del post.
  5. Inserisci l’embedcode dove è naturale mostrare le recommendations, e sostituisci INSERT_PAGE_ID_HERE con l’ID della pagina del post. Puoi trovare questo ID nell’URL del post.

Starting Templates #

Se vuoi usare i code design, questi template possono aiutarti a iniziare.

Codice Slider #

Questo template visualizzerà uno slider standard con diverse informazioni prodotto, 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">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 embedcode 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 come necessario.

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.