Shopify

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 quando si utilizza un Clerk.js setup in Shopify.

Per le nostre Best Practices 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 di base per configurare un Element.

Seguendo i passaggi in my.clerk.io > Settings > Setup Guides saranno automaticamente creati 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 usare il Design Editor per configurarlo visivamente, oppure usare code designs.

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

Design Editor #

Vai su Recommendations > Designs e clicca New Design.
Scegli Product Slider
Dalla lista dei template di design, scegli quello con cui vuoi iniziare.
Assegnagli un nome e clicca su Create design.
Apporta le modifiche al design secondo le tue necessità.

Code Design #

Vai su Recommendations > Designs e clicca New Design.
Scegli Other designs > Blank > Code.
Assegnagli un nome e clicca su Create design.
Crea un code design da zero usando Liquid code.

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

Crea Contenuto #

Questo contiene tutte le impostazioni utilizzate per visualizzare le Recommendations e renderle integrabili nel tuo sito. Segui questi passaggi per ognuno dei banner Recommendations che vuoi creare.

Vai su Recommendations > Elements.
Clicca su New Content.
Assegnagli un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Es., “Home Page / Visitor Recommendations”.
In Content type, seleziona la logica di prodotto che vuoi utilizzare dal menu a discesa. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
In Design seleziona il design che hai creato dal menu a discesa e scegli il numero di prodotti da mostrare.
Clicca Save in cima alla schermata.

Aggiungi al Sito #

Apri la scheda Insert into website.
Qui hai due opzioni:
- Utilizzare injection ti consente di inserire il codice utilizzando un selettore CSS.
- Utilizzare embedded code ti permette di inserire manualmente il codice nel tuo sito.
Scegli l’opzione più semplice per te.
Per alcune Logics vedrai il menu a discesa Choose your platform. In questi casi seleziona Shopify. Questo precompilerà l’embedcode con gli shortcodes Shopify corretti.

Percorsi tipici dei file del tema (possono variare secondo il tema):

Homepage: Online Store > Themes > Customize > Add Section > Custom Liquid.
Pagina prodotto: Sections > main-product.liquid.
Pagina collezione: Sections > main-collection-product-grid.liquid.
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 #

Di seguito le pagine specifiche dove inserire le Recommendations e quali tipi utilizzare, per seguire le nostre Best Practices. Shopify ha più di 100 temi, quindi i percorsi dei file potrebbero non essere sempre precisi.

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 inserirli.

Homepage #

In my.clerk.io, crea 3 Elements con le seguenti logiche:
- Visitor Recommendations
- Bestsellers
- Hot Products
In Shopify, vai su Online Store > Themes > Customize
Clicca su Add Section > Custom Liquid.
Inserisci gli embedcode nella casella Custom Liquid.
Clicca su Save.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nella stessa casella. Se desideri separarli nella Home Page, semplicemente ripeti la procedura più volte.

Category Page #

In my.clerk.io, crea un Element con la logica Bestsellers In Category.
Nel menu a discesa Insert into website > Choose your platform, seleziona Shopify e copia l’embedcode.
Vai ai file tema di Shopify e trova il file che genera le pagine Collection. Molto spesso è Sections > main-collection-product-grid.liquid.
Inserisci l’embedcode sotto il titolo e la descrizione. A seconda del tuo tema, la posizione può variare.

Product Page #

In my.clerk.io, crea 2 Elements con le seguenti logiche:
- Best Alternative Products
- Best Cross-Sell Products
Nel menu a discesa Insert into website > Choose your platform seleziona Shopify per ciascuno e copia gli embedcode.
Nei file tema di Shopify, trova il file che genera le pagine prodotto. Molto spesso è Sections > main-product.liquid.
Inserisci gli embedcode in una posizione sotto la descrizione prodotto. A seconda del tema, la posizione può variare.

Add-To-Basket Step #

In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
Assegnagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante per il corretto funzionamento dell’embedcode.
Clicca Save in cima alla pagina.
Nei file tema di Shopify, trova il file che genera le pagine prodotto. Molto spesso è Sections > main-product.liquid.
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 sarà ora mostrato quando un cliente aggiunge un prodotto al carrello dalla pagina prodotto.

Se non funziona, probabilmente il pulsante aggiungi al carrello ha una classe o ID diverso. Controlla il pulsante e sostituisci .product-form__cart-submit nell’embedcode con la classe/id corretti.

Cart Page #

In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
Nel menu a discesa Insert into website > Choose your platform, seleziona Shopify e copia l’embedcode.
Vai ai file tema di Shopify e trova il file che genera la pagina Carrello. Molto spesso è Sections > main-cart-footer.liquid.
Inserisci l’embedcode sotto gli articoli del carrello e il pulsante checkout, ad esempio subito prima del tag {% schema %}.

Exit Intent #

In my.clerk.io, crea un Element con la logica Visitor Recommendations.
Vai ai file tema di Shopify e trova il file principale del tema. Molto spesso è Layout > theme.liquid.
Inserisci l’embedcode subito prima del tag di chiusura </body>.
Aggiungi l’attributo data-exit-intent="true" all’embedcode. Ecco un esempio di come dovrebbe essere:

<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Dopo questo, il popup Exit Intent apparirà quando un cliente muove il mouse sopra la barra degli indirizzi del browser.

Blog Page #

In my.clerk.io, crea un Element con la logica Products Related To A Page.
In Shopify, vai su Online Store > Blog posts.
Clicca sul post dove vuoi aggiungere le recommendations.
Clicca sul pulsante <> in alto a destra della casella di testo per vedere l’HTML del post.
Inserisci l’embedcode nella parte del post 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 desideri usare code designs, questi template possono permetterti di iniziare subito.

Slider Code #

Questo template genererà uno slider standard con varie informazioni prodotto, personalizzabile 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. È possibile personalizzarlo 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.