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 diversi tipi di logiche prodotto, rendendo possibile visualizzare prodotti completamente automatizzati su qualsiasi pagina.

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

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

Seguire i passaggi in my.clerk.io > Settings > Setup Guides crea automaticamente gli Elements per le nostre Best Practices.

Crea design #

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

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

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

Design editor #

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

  2. Scegli Product Slider

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

  4. Dagli un nome e clicca su Create design.

  5. Apporta tutte 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 il Liquid code.

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

Crea Element #

Questo contiene tutte le impostazioni usate 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. Clicca su New Element.

  3. Dagli un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che si vuole usare. Ad es., “Home Page / Visitor Recommendations”.

  4. In Element type, seleziona la logica prodotto che vuoi 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 Save in alto alla schermata.

Aggiungi al sito #

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

  1. Apri la scheda Insert into website.

  2. Qui hai due possibilità:

    • Utilizzando injection puoi inserire il codice usando un selettore CSS.

    • Utilizzando il codice incorporato puoi inserire manualmente il codice nel tuo sito.

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

  4. Per alcune Logics vedrai il menu a tendina Choose your platform. Seleziona Shoporama in questi casi. Questo precompilerà il codice da incorporare con i giusti shortcodes di Shoporama.

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

Configurazione my.clerk.io #

  1. Vai su Recommendations > Elements.

  2. Seleziona l’Element che vuoi inserire.

  3. Apri la scheda Insert into website.

  4. Scegli una delle seguenti opzioni:

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

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

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

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

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

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

    • Homepage: inserisci nel template/CMS block della tua homepage secondo necessità.

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

Pagine #

Di seguito sono riportate le pagine specifiche in cui inserire 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 i codici di incorporamento nel template/CMS block 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 Shoporama, e copia l’embedcode.

  3. Vai nei file tema di Shoporama e trova il file che genera le pagine categoria. Solitamente è Settings > … > Temaer > category.html.

  4. Inserisci l’embedcode appena sotto il titolo e la 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 Insert into website > Choose your platform, seleziona Shoporama per ciascuno e copia gli embedcode.

  3. Nei file tema di Shoporama, trova il file che genera le pagine prodotto. Solitamente è Settings > … > Temaer > product.html.

  4. Inserisci gli embedcode appena sotto la descrizione del 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 Insert into website > Choose your platform, seleziona Shoporama e copia l’embedcode.

  3. Vai nei file tema di Shoporama e trova il file che genera le pagine carrello. Solitamente è Settings > … > Temaer > basket.html.

  4. Inserisci l’embedcode appena sotto gli articoli del carrello e il pulsante di checkout. Imposta data-products su [<{strip}><{foreach from=$basket item=basket_item name=basket_loop}><{$basket_item.product_id}><{if !$smarty.foreach.basket_loop.last}>,<{/if}><{/foreach}><{/strip}>].

Exit intent #

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

  2. Aggiungi quanto segue verso la fine di global.html, prima di </body>:

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

Slider code #

Questo template renderizzerà uno slider standard con informazioni prodotto comuni 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.