Shopware 6

Recommendations

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

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

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 la guida di base per la configurazione di un Element.

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

Crea Design #

Le Recommendations vengono mostrate di default come uno slider. Questo consente ai clienti di visualizzare più prodotti con meno clic. Puoi utilizzare 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 dei template, scegli quello con cui vuoi iniziare.
  4. Dai un nome e clicca su Create design.
  5. Apporta tutte le modifiche desiderate al design.

Code Design #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Other designs > Blank > Code.
  3. Dai un nome e clicca su Create design.
  4. Crea un code design da zero usando il Liquid code.

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

Crea Element #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations, rendendole integrabili sul tuo sito web. Segui questi passaggi per ciascun banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Dai un nome descrittivo. Consigliamo di nominarlo in base alla pagina e logica che vuoi utilizzare. Es., “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona dal menu a tendina la product logic che vuoi utilizzare. 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 alla pagina.

Aggiungi al Sito Web #

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

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection ti permette di inserire il codice tramite un selettore CSS.
    • Usare embedded code ti permette di inserire il codice manualmente nel sito.
  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. Questo compilerà automaticamente l’embedcode con i corretti shortcodes di Shopware 6.

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

Configurazione Plugin #

Utilizza il plugin Shopware 6 Clerk per abilitare gli elementi sulle 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 > Elements.
  2. Seleziona l’elemento che vuoi inserire.
  3. Apri la scheda Insert into website.
  4. Scegli una delle seguenti opzioni:
    • Usare injection inserisce il codice tramite un selettore CSS.
    • Usare embedded code inserisce manualmente il codice, ad esempio tramite Content > Shopping Experiences aggiungendo un blocco Raw HTML al layout e incollando l’embed code.

Alcuni embed code richiedono variabili come ID prodotto o categoria. In questi casi saranno inserite automaticamente nell’embed code, ma verifica che corrispondano alle tue variabili di Shopware 6.

Pagine #

Di seguito sono elencate le pagine specifiche in cui dovresti inserire le Recommendations e quali tipi utilizzare, per seguire le nostre Best Practices.

Homepage #

  1. In my.clerk.io, crea 3 Elements con le seguenti logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci gli embedcodes all’interno del template/blocco della homepage.

Pagina Categoria #

  1. In my.clerk.io, crea un Element con la logic 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 utilizza le impostazioni del plugin per abilitarlo.

Pagina Prodotto #

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

Fase Aggiunta al Carrello #

  1. In my.clerk.io, crea un Element con la logic 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 alla pagina.
  4. Per abilitare la funzione 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 un Element con la logic 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 un Element con la logic 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 imposta il nome del contenuto. Salva.

Template di Partenza #

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

Slider Code #

Questo template rappresenta 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-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.