Shoporama

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Shoporama

Automatizza e personalizza i prodotti su qualsiasi pagina in Shoporama. Clerk.io offre più di 23 tipi diversi 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 Shoporama.

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

Configurazione dello slider #

Le Recommendations vengono create con gli Elements che fanno riferimento a un Design. Di seguito trovi la guida di base per configurare un Element.

Seguendo i passaggi su my.clerk.io > Impostazioni > Guide di configurazione verranno automaticamente creati gli Elements secondo le nostre Best Practices.

Crea un design #

Le Recommendations vengono mostrate di default come uno slider. Questo permette ai clienti di vedere più prodotti con meno click.

Puoi usare il Design Editor per configurarlo visualmente, oppure utilizzare i code designs.

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

Editor del design #

  1. Vai su Recommendations > Designs e clicca su Nuovo Design.

  2. Scegli Product Slider

  3. Dalla lista dei template di design, scegli quello con cui vuoi iniziare.

  4. Dagli un nome e clicca su Crea design.

  5. Apporta tutte le modifiche che desideri al design.

Code design #

  1. Vai su Recommendations > Designs e clicca su Nuovo Design.

  2. Scegli Altri design > Vuoto > Codice.

  3. Dagli un nome e clicca su Crea design.

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

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

Crea Element #

Questo contiene tutte le impostazioni utilizzate per visualizzare le Recommendations, e renderle integrabili nel tuo sito web.

Segui questi passaggi per ciascun banner Recommendations che desideri creare.

  1. Vai su Recommendations > Elements.

  2. Clicca su Nuovo Element.

  3. Assegna un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che desideri utilizzare. Es., “Home Page / Visitor Recommendations”.

  4. In Tipo di elemento, seleziona la logica di prodotto che desideri utilizzare dal menu a tendina. Puoi vedere una panoramica di tutte le logiche prodotto 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 Salva in cima alla schermata.

Aggiungi al sito #

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

  1. Apri la scheda Inserisci nel sito web.

  2. Qui hai due opzioni:

    • Utilizzare injection ti permette di inserire il codice usando un selettore CSS.

    • Utilizzare embedded code ti permette di inserire manualmente il codice nel tuo sito.

  3. Scegli l’opzione più semplice per te.

  4. Per alcune Logiche vedrai il menu a tendina Scegli la tua piattaforma. In questi casi seleziona Shoporama. Questo precompilerà il codice di incorporamento con i corretti shortcode Shoporama.

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

Configurazione my.clerk.io #

  1. Vai su Recommendations > Elements.

  2. Seleziona l’elemento che desideri inserire.

  3. Apri la scheda Inserisci nel sito web.

  4. Scegli una delle seguenti opzioni:

    • L’uso di injection inserisce il codice tramite un selettore CSS.

    • L’uso di embedded code inserisce il codice manualmente.

  5. Per l’embedded code su Shoporama, le posizioni e i nomi file tipici sono:

    • Pagina prodotto: Impostazioni > … > Temi > product.html — imposta data-products su [<{$product->getProductId()}>].

    • Pagina categoria: Impostazioni > … > Temi > category.html — imposta data-category su <{$category->getCategoryId()}>.

    • Pagina carrello: Impostazioni > … > Temi > basket.html — imposta data-products su [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

    • Homepage: inserisci nel tuo template homepage/blocco CMS come appropriato.

    • Globale (Exit Intent): Impostazioni > … > Temi > global.html (inserisci prima di </body>).

Pagine #

Di seguito le pagine specifiche su cui inserire le Recommendations, e quali tipologie usare, per rispettare le nostre Best Practices.

Homepage #

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

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Inserisci i codici embed nel tuo template homepage/blocco CMS.

Pagina categoria #

  1. In my.clerk.io, crea un Element con la logica Bestsellers In Category.

  2. Nel menu a tendina Inserisci nel sito web > Scegli la tua piattaforma, seleziona Shoporama e copia il codice embed.

  3. Vai nei file tema di Shoporama e trova il file che genera le pagine categoria. Di solito è Impostazioni > … > Temi > category.html.

  4. Inserisci il codice embed sotto al titolo e alla descrizione. Imposta data-category su <{$category->getCategoryId()}>.

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 Inserisci nel sito web > Scegli la tua piattaforma, seleziona Shoporama per ciascuno di essi e copia i codici embed.

  3. Nei file tema di Shoporama, trova il file che genera le pagine prodotto. Di solito è Impostazioni > … > Temi > product.html.

  4. Inserisci i codici embed sotto la descrizione prodotto. Imposta data-products su [<{$product->getProductId()}>].

Pagina carrello #

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

  2. Nel menu a tendina Inserisci nel sito web > Scegli la tua piattaforma, seleziona Shoporama e copia il codice embed.

  3. Vai nei file tema di Shoporama e trova il file che genera le pagine carrello. Di solito è Impostazioni > … > Temi > basket.html.

  4. Inserisci il codice embed sotto agli articoli del carrello e al pulsante checkout. Imposta data-products su [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

Exit intent #

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

  2. Aggiungi il seguente codice vicino alla fine di global.html, prima di </body>:

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

Template di partenza #

Se desideri utilizzare code designs, questi templates possono aiutarti a iniziare.

Slider code #

Questo template renderizzerà 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">In offerta</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">Esaurito</div>
                        </a>
                    {% else %}
                        <a class="clerk-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Vedi prodotto</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.