Shopify

Recommendations

Recommendations

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

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

Configurazione dello Slider #

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

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

Creare un Design #

Le Recommendations vengono visualizzate come uno slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi configurarlo visivamente usando 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 template di design, scegli quello con cui vuoi iniziare.
  4. Dagli un nome e clicca su Create design.
  5. Effettua tutte le modifiche desiderate 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.

Creare un Element #

Qui imposterai tutte le opzioni usate per mostrare le Recommendations e renderle inseribili nel tuo sito. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Fornisci un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che vuoi usare. Es. “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica 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 a tendina e scegli il numero di prodotti da mostrare.
  6. Clicca Save nella parte superiore della schermata.

Aggiungi al Sito #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare l’ injection ti consente di inserire il codice tramite un selettore CSS.
    • Usare il codice embed ti consente di inserire manualmente il codice nel 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 precaricherà il codice embed 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 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 sono elencate le pagine specifiche in cui dovresti inserire Recommendations, e quali tipi utilizzare, per seguire le nostre Best Practices. Shopify offre più di 100 temi, quindi la posizione dei file potrebbe non essere sempre precisa.

I frammenti devono essere 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 inserire i risultati.

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

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti i codici embed nella stessa casella. Se desideri 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 nei file tema di Shopify e trova il file che genera le pagine Collection. Spesso è Sections > main-collection-product-grid.liquid.
  4. Inserisci il codice embed sotto il titolo e la descrizione. A seconda del tema, la posizione può variare.

Pagina Categoria Completa #

Se desideri che Clerk.io generi l’intera griglia prodotti nelle pagine collection (invece di solo uno slider), usa uno snippet basato sulla categoria e sostituisci il ciclo prodotti predefinito nel template della collection.

  1. In my.clerk.io, crea un nuovo Recommendations Element per le pagine categoria.
  2. In Shopify, apri il template della collection (spesso Sections > main-collection-product-grid.liquid).
  3. Commenta o rimuovi il ciclo prodotti del tema.
  4. Inserisci questo snippet nel punto in cui vuoi che venga mostrata 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 prova una pagina collection con i parametri nella URL per verificare che filtri e paginazione funzionino come previsto.

Consulta l’articolo a livello piattaforma per una guida più avanzata su API/logica: 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 ognuno e copia i codici embed.
  3. Nei file tema di Shopify, trova il file che genera le pagine prodotto. Spesso è Sections > main-product.liquid.
  4. Inserisci i codici embed sotto la descrizione prodotto. A seconda del tema, la posizione può variare.

Step Add-To-Basket #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Assegnagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante affinché il codice embed funzioni correttamente.
  3. Clicca Save in alto nella pagina.
  4. Nei file tema di Shopify, trova il file che genera le pagine prodotto. Spesso è Sections > main-product.liquid.
  5. Inserisci il codice embed Add-To-Basket in fondo al file e clicca Save. Puoi trovare 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 così non fosse, probabilmente il tuo pulsante “aggiungi al carrello” ha una classe o ID diverso. Ispeziona il pulsante e sostituisci .product-form__cart-submit nel codice embed con la classe/id del tuo pulsante.

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 il codice embed.
  3. Vai nei file tema di Shopify e trova il file che genera le pagine carrello. Spesso è Sections > main-cart-footer.liquid.
  4. Inserisci il codice embed sotto gli articoli del carrello e il pulsante per il 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. Spesso è 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. Ecco 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 sposta 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 recommendations.
  4. Clicca il pulsante <> in alto a destra della casella di testo per visualizzare l’HTML del post.
  5. Inserisci il codice embed nel punto del post dove è più 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 desideri utilizzare code designs, questi template ti aiuteranno a iniziare.

Slider Code #

Questo template renderizzerà 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 codice embed va inserito in fondo al file tema della pagina prodotto. Mostrerà un popup con uno slider di prodotti quando il cliente aggiunge un prodotto al carrello. È possibile personalizzarlo 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 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 }}';">Continua al Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continua gli Acquisti</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.