Shopware 6

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Shopware 6.

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare un Clerk.js setup in Shopware 6.

Per consultare 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. Qui sotto trovi la guida di base per configurare uno Slider.

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

Creare un Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno click. Puoi configurarlo visivamente usando il Design Editor, oppure utilizzare i code designs.

Un design può essere riutilizzato per un qualsiasi numero di slider 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 con cui vuoi iniziare.
  4. Dagli un nome e clicca su Create design.
  5. Modifica il design secondo le tue preferenze.

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 partire da un design iniziale, consulta il Slider template più in basso.

Creare un Contenuto #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che desideri 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 vuoi usare. Es.: “Home Page / Visitor Recommendations”.
  4. In Content type, seleziona la logica di prodotto desiderata dal menu a tendina. Puoi vedere una panoramica di tutte le product logics 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 nella pagina.

Aggiungere al Sito Web #

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

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection permette di inserire il codice usando un selettore CSS.
    • Usare embedded code permette di inserire il codice manualmente nel tuo sito web.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona Shopware 6. L’embedcode verrà riempito con il codice corretto di Shopware 6.

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

Configurazione del Plugin #

Usa il plugin Clerk per Shopware 6 per abilitare gli slider nelle pagine chiave:

  1. Vai su Settings > System > Plugins e apri Clerk.io > Config.
  2. Seleziona il Sales Channel corretto.
  3. Abilita per tipo di pagina e salva:
    • Product Page Settings
    • Category Settings
    • Cart Settings

Configurazione my.clerk.io #

  1. Vai su Recommendations > Sliders.
  2. Seleziona il contenuto che vuoi inserire.
  3. Apri la scheda Insert into website.
  4. Scegli una delle seguenti:
    • Usare injection inserisce il codice usando un selettore CSS.
    • Usare embedded code inserisce il codice manualmente, ad esempio tramite Content > Shopping Experiences aggiungendo un blocco HTML grezzo al layout e incollando l’embedcode.

Alcuni embedcode richiedono variabili come ID di prodotto o categoria. In questi casi verranno inserite già nell’embedcode, ma verifica che corrispondano alle variabili di Shopware 6.

Pagine #

Di seguito sono riportate le pagine specifiche in cui inserire le 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 embedcode nel template/blocco della home page.

Pagina 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 Shopware 6 e copia l’embedcode.
  3. Inserisci l’embedcode nel template della pagina categoria o usa le impostazioni del plugin per abilitarlo.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Sliders con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menu Insert into website > Choose your platform seleziona Shopware 6 per ciascuno e copia gli embedcode.
  3. Inserisci gli embedcode nel template della pagina prodotto o usa le impostazioni del plugin per abilitarli.

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 affinché l’embedcode funzioni correttamente.
  3. Clicca su Save in alto nella pagina.
  4. Per attivare l’add-to-basket Powerstep usando il plugin Shopware 6:
  5. Vai su Settings > System > Plugins e apri Clerk.io > Config.
  6. Sotto Powerstep Settings, abilita e scegli Page o Popup, seleziona il contenuto, poi Save.

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 Shopware 6 e copia l’embedcode.
  3. Inserisci l’embedcode nel template della pagina carrello o usa le impostazioni del plugin per abilitarlo.

Exit Intent #

  1. In my.clerk.io, crea uno Slider con la logica Visitor Recommendations.
  2. Abilita tramite il plugin:
  3. Vai su Settings > System > Plugins e apri Clerk.io > Config.
  4. Sotto Exit Intent Settings imposta Status su Enabled e indica il nome del contenuto. Salva.

Template di Partenza #

Se vuoi usare i code designs, questi template ti possono aiutare a iniziare.

Slider Code #

Questo template visualizza uno slider standard con varie informazioni prodotto, che puoi personalizzare secondo le 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;

    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.