Mystore

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Mystore

Automatizza e personalizza i prodotti su qualsiasi pagina in Mystore. 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 su Mystore.

Per le 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. Di seguito trovi la guida di base per configurare un Element.

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

Crea un design #

Le Recommendations vengono visualizzate come uno slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic.

Puoi usare il Design Editor per configurarlo in modo visivo, oppure usare i code designs.

Un design può essere riutilizzato per un numero qualsiasi 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. Assegna un nome e clicca su Create design.

  5. Apporta 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. Assegna 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 poco sotto.

Crea Element #

Contiene tutte le impostazioni utilizzate per visualizzare le Recommendations e renderle incorporabili nel tuo sito web.

Segui questi passaggi per ogni banner Recommendations che desideri creare.

  1. Vai su Recommendations > Elements.

  2. Fai clic su New Element.

  3. Assegna 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 dal menu a tendina la logica di prodotto che vuoi usare. Puoi vedere una panoramica di tutte le product logics qui.

  5. In Design seleziona il design che hai creato dal menu a tendina e scegli il numero di prodotti che vuoi mostrare.

  6. Clicca su Save in alto allo schermo.

Aggiungi al sito web #

Per aggiungere Clerk Recommendations al tuo sito web, hai due opzioni: Injection e Embedded code.

  1. Apri la scheda Insert into website.

  2. Qui hai due opzioni:

    • Usare injection ti permette di inserire il codice utilizzando un selettore CSS.

    • Usare embedded code ti consente di inserire manualmente il codice nel sito web.

  3. Scegli l’opzione che ti è più comoda.

  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona Mystore. Questo precompilerà l’embedcode con i corretti shortcode di Mystore.

Per aggiungere dettagli di sincronizzazione o avviare una sincronizzazione, vai su my.clerk.io > Data > Configuration.

my.clerk.io setup #

  1. Vai su Recommendations > Elements.

  2. Seleziona l’elemento che vuoi inserire.

  3. Apri la scheda Insert into website.

  4. Scegli una delle opzioni seguenti:

    • Usare injection inserisce il codice tramite un selettore CSS.

    • Usare embedded code inserisce il codice manualmente.

  5. Per l’embedded code su Mystore, i posizionamenti tipici sono:

    • Homepage: inserisci l’embed code nel template/blocco della homepage.

    • Pagina prodotto: imposta data-products sull’ID del prodotto corrente.

    • Pagina categoria: imposta data-category sull’ID della categoria corrente.

    • Pagina carrello: imposta data-products sugli ID dei prodotti nel carrello.

Pagine #

Di seguito trovi le pagine specifiche dove inserire le Recommendations, e quali tipi utilizzare per seguire le nostre Best Practices.

Homepage #

  1. In my.clerk.io, crea 3 Elements con le seguenti logiche:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Inserisci gli embedcodes nel template/blocco della homepage.

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 Mystore e copia l’embedcode.

  3. Inserisci l’embedcode nel template della pagina categoria. Imposta data-category sull’ID della categoria corrente.

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 Mystore per entrambi e copia gli embedcodes.

  3. Inserisci gli embedcodes nel template della pagina prodotto. Imposta data-products sull’ID del prodotto corrente.

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 cima alla pagina.

  4. Per attivare l’add-to-basket Powerstep:

    1. Crea gli Elements che vuoi mostrare su Powerstep.

    2. Inserisci il codice embed di Powerstep nel popup/pagina e attivalo quando un prodotto viene aggiunto al carrello.

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 Mystore e copia l’embedcode.

  3. Inserisci l’embedcode nel template della pagina carrello. Imposta data-products sugli ID dei prodotti nel carrello.

Exit intent #

  1. In my.clerk.io, crea un Element con la logica Visitor Recommendations.

  2. Aggiungi quanto segue vicino alla fine del tuo layout/template, prima di </body>:

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

Template di partenza #

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

Codice slider #

Questo template mostrerà uno slider standard con le principali informazioni sul 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}


.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;
}

@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%;
    }
}

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.