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 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 slider #

Le Recommendations vengono create con gli Sliders che fanno riferimento a un Design. Qui sotto trovi la guida di 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.

Creare un design #

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

Puoi utilizzare il Design Editor per configurarlo visivamente, oppure usare i 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 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 usando Liquid code.

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

Creare il contenuto #

Qui si trovano tutte le impostazioni usate per mostrare le Recommendations e renderle integrabili nel tuo sito web.

Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Sliders.

  2. Clicca su New Content.

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

  4. In Content type, seleziona la logica prodotto che vuoi usare dal menu a tendina. Puoi vedere una panoramica di tutte le product logics 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 cima alla schermata.

Aggiungere al sito #

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

  1. Apri la scheda Insert into website.

  2. Qui hai due opzioni:

    • Usando injection ti permette di inserire il codice tramite un selettore CSS.

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

  3. Scegli l’opzione che preferisci.

  4. Per alcune Logics vedrai il menu a tendina Choose your platform. Seleziona Shoporama in questi casi. Questo compilerà in automatico l’embedcode con i giusti shortcodes Shoporama.

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

my.clerk.io setup #

  1. Vai su Recommendations > Sliders.

  2. Seleziona il contenuto che vuoi inserire.

  3. Apri la scheda Insert into website.

  4. Scegli una delle seguenti opzioni:

    • Usando injection inserisce il codice tramite un selettore CSS.

    • Usando embedded code inserisce il codice manualmente.

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

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

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

    • Cart page: 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 homepage/blocco CMS come preferisci.

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

Pagine #

Di seguito sono riportate le pagine specifiche su cui dovresti inserire Recommendations e quali tipi 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 embedcodes nel template della homepage/blocco CMS.

Pagina di categoria #

  1. In my.clerk.io, crea uno Slider 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 ai file tema di Shoporama e trova il file che genera le pagine di Categoria. Questo è più spesso Settings > … > Temaer > category.html.

  4. Inserisci l’embedcode sotto il titolo e la descrizione. Imposta data-category su <{$category->getCategoryId()}>.

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 tendina Insert into website > Choose your platform, seleziona Shoporama per ciascuno e copia gli embedcodes.

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

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

Pagina carrello #

  1. In my.clerk.io, crea uno Slider 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 ai file tema di Shoporama e trova il file che genera le pagine Carrello. Questo è più spesso Settings > … > Temaer > basket.html.

  4. Inserisci l’embedcode sotto gli articoli del carrello e il 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 uno Slider con la logica Visitor Recommendations.

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

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

Templates di partenza #

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

Slider code #

Questo template visualizza uno slider standard con le informazioni prodotto principali che puoi personalizzare a tuo piacimento.

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.