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 utilizzare un Clerk.js setup su Shopify.

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

Configurazione dello Slider #

Le Recommendations sono create tramite Elements che fanno riferimento a un Design. Di seguito trovi la guida base per impostare un Element.

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

Creare un Design #

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

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

Design Editor #

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

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

Creare un Element #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations, rendendo l’element integrabile nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che desideri creare.

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

Aggiungere al sito web #

  1. Apri la tab Insert into website.
  2. Qui hai due opzioni:
    • Utilizzare injection ti consente di inserire il codice tramite un selettore CSS.
    • Utilizzare embedded code ti consente di inserire il codice manualmente nel tuo sito.
  3. Scegli l’opzione più comoda per te.
  4. Per alcune Logiche vedrai il menu a tendina Choose your platform. In questi casi seleziona Shopify. Questo riempirà automaticamente l’embedcode con i giusti shortcode per Shopify.

Percorsi dei file tipici 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 l’ID prodotto:

<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 inserire Recommendations e quali tipi usare, per seguire le nostre Best Practices. Shopify ha oltre 100 temi, quindi la posizione dei file potrebbe non essere sempre precisa.

Gli snippet andrebbero inseriti nei file HTML del tema, che normalmente si trovano in Shopify Admin > Online Store > Themes. In alternativa puoi effettuare l’injection dei 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 box di Custom Liquid.
  5. Clicca su Save.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nello stesso box. Se vuoi distribuirli nella Home Page, segui più volte il processo di cui sopra.

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 ai file tema di Shopify e trova il file che genera le pagine Collezione. Solitamente è Sections > main-collection-product-grid.liquid.
  4. Inserisci l’embedcode subito sotto il titolo e la descrizione. A seconda del tema, la posizione potrebbe variare.

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 rispettivi embedcode.
  3. Nei file tema di Shopify, trova il file che genera le pagine prodotto. Solitamente è Sections > main-product.liquid.
  4. Inserisci gli embedcode sotto la descrizione del prodotto. La posizione varia a seconda del tema.

Passaggio Aggiungi al Carrello #

  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”. È importante per far funzionare correttamente l’embedcode.
  3. Clicca su Save in alto nella pagina.
  4. Nei file tema di Shopify, trova il file che genera la pagina prodotto. Solitamente è 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 verrà ora mostrato quando un cliente aggiunge un prodotto al carrello dalla pagina prodotto.

Se non viene mostrato, è probabile che il tuo bottone “add-to-cart” abbia una classe o un 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 ai file tema di Shopify e trova quello che genera le pagine carrello. Solitamente è Sections > main-cart-footer.liquid.
  4. Inserisci l’embedcode sotto gli articoli nel carrello e il pulsante 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 ai file tema di Shopify e trova il file principale del tema. Solitamente è 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 un esempio di come dovrebbe risultare:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Dopo l’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 bottone <> in alto a destra del box di testo per vedere l’HTML del post.
  5. Inserisci l’embedcode in una parte del post dove sia naturale mostrare i prodotti consigliati, 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 utilizzare code designs, questi template ti permettono di iniziare subito.

Slider Code #

Questo template renderizza uno slider standard con varie informazioni sul 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 va 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 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>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.