Shopify

Recommendations

Recommendations

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

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

Configurazione Slider #

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

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

Crea Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi usare il Design Editor per configurare visivamente, 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 di template, scegli quello da cui vuoi partire.
  4. Dagli un nome e clicca su Create design.
  5. Modifica il design come desideri.

Code Design #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Seleziona Other designs > Blank > Code.
  3. Dai un nome e clicca su Create design.
  4. Crea un design da zero usando Liquid code.

Se vuoi un design di partenza, consulta il template Slider più sotto.

Crea Element #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito. Segui questi passaggi per ogni banner Recommendations che desideri creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Assegna un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Ad esempio, “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 creato dal menu a tendina e scegli il numero di prodotti da mostrare.
  6. Clicca su Save in cima allo schermo.

Aggiungi al Sito #

  1. Apri la scheda Insert into website.
  2. Hai due opzioni:
    • Usare injection ti permette di inserire il codice tramite un selettore CSS.
    • Usare il codice embed ti permette di inserire manualmente il codice nel sito.
  3. Scegli l’opzione più comoda.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. Seleziona Shopify in questi casi. Questo compilerà l’embedcode con i corretti shortcode Shopify.

Percorsi tipici dei file 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 Recommendations, con uno shortcode Shopify per inserire l’ID prodotto:

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

Pagine #

Qui sotto sono elencate le pagine specifiche in cui inserire Recommendations e quali tipi 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 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 mostrarli.

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 nella casella Custom Liquid.
  5. Clicca su Save.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nella stessa casella. Se invece vuoi separarli nella Home Page, ripeti 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 Collezione. È quasi sempre Sections > main-collection-product-grid.liquid.
  4. Inserisci l’embedcode sotto il titolo e la descrizione. In base al tema, questa posizione può variare.

Pagina Categoria Completa #

Se vuoi che Clerk.io mostri l’intera griglia prodotti nelle pagine collezione (e non solo uno slider), usa uno snippet basato su categoria e sostituisci il ciclo predefinito dei prodotti nel template della collezione.

  1. In my.clerk.io, crea un nuovo Element Recommendations per le pagine categoria.
  2. In Shopify, apri il template collezione (spesso Sections > main-collection-product-grid.liquid).
  3. Commenta o rimuovi il ciclo nativo della griglia prodotti.
  4. Inserisci questo snippet dove deve apparire 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 nella URL per confermare che facets e paginazione funzionino come previsto.

Consulta l’articolo di livello piattaforma per approfondimenti API/logic: Guida categoria.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Elements con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menù Insert into website > Choose your platform scegli Shopify per ciascuno e copia gli embedcode.
  3. Nei file tema Shopify, trova il file che genera le pagine prodotto. Questo è spesso Sections > main-product.liquid.
  4. Inserisci gli embedcode sotto la descrizione prodotto. In base al tema, questa posizione può variare.

Fase 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 cima alla pagina.
  4. Nei file tema Shopify, trova il file che genera le pagine prodotto. Questo è quasi sempre Sections > main-product.liquid.
  5. Inserisci l’embedcode Add-To-Basket in fondo al file e clicca su Save. Trovi l’embedcode nella sezione Starting Templates.

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

Se non appare, probabilmente il tuo pulsante aggiungi al carrello ha una classe o ID diverso. Controlla il tuo bottone e sostituisci .product-form__cart-submit nell’embedcode con la classe/ID corretti 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 il file che genera le pagine carrello. Questo è quasi sempre Sections > main-cart-footer.liquid.
  4. Inserisci l’embedcode sotto gli articoli del carrello e il bottone checkout, ad esempio subito prima del tag {% schema %}.
<span
  class="clerk"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

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 tema principale. Questo è quasi sempre 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 questa aggiunta, il popup Exit Intent verrà mostrato quando il cliente porta 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 del box di testo per vedere l’HTML del post.
  5. Inserisci l’embedcode in una parte del post dove è naturale mostrare le recommendations e sostituisci INSERT_PAGE_ID_HERE con l’ID pagina del post. Puoi trovare questo ID nell’URL del post.

Template Iniziali #

Se vuoi utilizzare code designs, questi template possono aiutarti a cominciare.

Slider Code #

Questo template mostrerà uno slider standard con varie informazioni prodotto, 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">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%;
    }
}

Add-To-Basket Code #

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 articolo 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>You added <b><u>{{ product.title }}</u></b> 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>
        <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.