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 prodotto, permettendoti di mostrare prodotti completamente automatizzati su qualsiasi pagina.

Questo articolo spiega come iniziare quando si utilizza un Clerk.js setup in Mystore.

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

Configurazione dello slider #

Le Recommendations vengono create con Sliders che fanno riferimento a un Design. Di seguito trovi la guida base per impostare uno Slider.

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

Crea un design #

Le Recommendations sono mostrate di default come uno slider. Questo consente ai clienti di vedere più prodotti con meno clic.

Puoi utilizzare il Design Editor per configurarlo visivamente, oppure creare code designs.

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

Editor design #

  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 fai clic su Create design.

  5. Apporta eventuali 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 fai clic su Create design.

  4. Crea un code design da zero usando Liquid code.

Se vuoi un design iniziale, consulta il template slider più in basso.

Crea il contenuto #

Questo contiene tutte le impostazioni utilizzate per visualizzare le Recommendations, rendendole integrabili sul tuo sito web.

Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Sliders.

  2. Clicca su New Content.

  3. Dagli un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che intendi usare. Es. “Home Page / Visitor Recommendations”.

  4. In Content type, seleziona la logica prodotto che vuoi usare dal menu a discesa. Puoi vedere una panoramica di tutte le logiche prodotto qui.

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

  6. Fai clic su Save in alto allo schermo.

Aggiungi al sito web #

Per aggiungere le Clerk Recommendations sul 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 consente di inserire il codice utilizzando un selettore CSS.

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

  3. Scegli l’opzione che ti è più semplice da usare.

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

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

Configurazione my.clerk.io #

  1. Vai su Recommendations > Sliders.

  2. Seleziona lo slider che desideri inserire.

  3. Apri la scheda Insert into website.

  4. Scegli una delle seguenti opzioni:

    • Usando injection inserisci il codice usando un selettore CSS.

    • Usando embedded code inserisci il codice manualmente.

  5. Per 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 in cui dovresti inserire le Recommendations e quali tipologie utilizzare, per seguire le nostre Best Practices.

Homepage #

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

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Inserisci gli embedcode nel template/blocco della tua homepage.

Pagina categoria #

  1. In my.clerk.io, crea uno Slider con la logica Bestsellers In Category.

  2. Nel menu a discesa 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 Sliders con le seguenti logiche:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. Nel menu a discesa Insert into website > Choose your platform seleziona Mystore per ciascuno e copia gli embedcode.

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

Step aggiunta al carrello #

  1. In my.clerk.io, crea uno Slider con la logica Best Cross-Sell Products.

  2. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante per il corretto funzionamento dell’embedcode.

  3. Clicca su Save in alto alla pagina.

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

    1. Crea gli Sliders che vuoi mostrare su Powerstep.

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

Pagina carrello #

  1. In my.clerk.io, crea uno Slider con la logica Best Cross-Sell Products.

  2. Nel menu a discesa 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 uno Slider con la logica Visitor Recommendations.

  2. Aggiungi il seguente codice verso la 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 partire.

Codice slider #

Questo template renderizzerà uno slider standard con comuni informazioni prodotto che puoi personalizzare secondo necessità.

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.