ideal.shop

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina.
Recommendations

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, permettendoti di mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare dopo aver completato la configurazione ideal.shop.

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

Configurazione Slider #

Le Recommendations vengono create con Elementi che fanno riferimento a un Design. Di seguito trovi la guida base per configurare un Elemento.

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

Crea Design #

Di default le Recommendations sono mostrate come uno slider. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi usare il Design Editor per configurarlo visivamente, oppure utilizzare 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 da cui vuoi partire.
  4. Dagli un nome e clicca su Create design.
  5. Apporta le modifiche che desideri 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 vuoi un design di partenza, consulta il template Slider più in basso.

Crea Elemento #

Questo contiene tutte le impostazioni usate per mostrare le Recommendations e renderlo integrabile sul tuo sito. Segui questi passaggi per ogni banner Recommendations che desideri creare.

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

Aggiungi al Sito #

  1. Apri la scheda Insert into website.
  2. Hai due opzioni:
    • Usare injection consente di inserire il codice utilizzando un selettore CSS.
    • Usare embedded code ti permette di inserire manualmente il codice nel tuo sito.
  3. Scegli l’opzione più facile per te.
  4. Per l’embedded code, aggiungi qualsiasi logica frontend necessaria, per inserire ad esempio un ID prodotto o categoria. Questo dipende dalla logica scelta.

Qui un esempio completo di codice di embed Recommendations, con un ID prodotto d’esempio:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Injection IDs #

Quando utilizzi injection, alcune logiche di raccomandazione richiedono un ID prodotto o categoria dalla pagina corrente. Gli ID devono corrispondere a quelli importati nel tuo feed.

Prodotto e Categoria #

L’attributo data-page-id su body sembra contenere l’ID prodotto corrente nelle pagine prodotto e l’ID categoria nelle pagine categoria. Controlla entrambi i tipi di pagina sul tuo webshop prima di usare queste impostazioni.

PaginaSelettore CSS IDAttributo ID
Pagina prodottobodydata-page-id
Pagina categoriabodydata-page-id

Nelle impostazioni di Insert into website > Using injection dell’Elemento, usa questi valori per i campi ID prodotto o categoria rilevanti. Configura separatamente il selettore di posizionamento per scegliere dove visualizzare le recommendations.

Pagine #

Di seguito sono indicate le pagine specifiche dove dovresti inserire le Recommendations e quali tipologie utilizzare, per seguire le nostre Best Practices.

Homepage #

  1. Su my.clerk.io, crea 3 Elementi con le seguenti logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci gli embedcode nel template/blocco della tua homepage.

Pagina Categoria #

  1. Su my.clerk.io, crea un Elemento con la logica Bestsellers In Category.
  2. Copia l’embedcode e inseriscilo nel template della pagina categoria.
  3. Imposta data-category sull’ID categoria corrente.

Pagina Prodotto #

  1. Su my.clerk.io, crea 2 Elementi con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Copia gli embedcode e inseriscili nel template della pagina prodotto.
  3. Imposta data-products sull’ID prodotto corrente.

Pagina Carrello #

  1. Su my.clerk.io, crea un Elemento con la logica Best Cross-Sell Products.
  2. Copia l’embedcode e inseriscilo nel template della pagina carrello.
  3. Imposta data-products sugli ID prodotto nel carrello.

Exit Intent #

  1. Su my.clerk.io, crea un Elemento con la logica Visitor Recommendations.
  2. Copia l’embedcode e inseriscilo subito prima del tag di chiusura </body> nel file template principale.
  3. Aggiungi data-exit-intent="true" all’embedcode.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Template di partenza #

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

Codice Slider #

Questo template renderizza uno slider standard con varie informazioni 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-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%;
    }
}

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