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 tutte le nostre Best Practices, leggi questo articolo su quali Recommendations usare.

Configurazione dello Slider #

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

Seguire i passaggi in my.clerk.io > Settings > Setup Guides creerà automaticamente gli Elements secondo le nostre Best Practices.

Creare un Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. 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 elementi Recommendations che crei.

Design Editor #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Dall’elenco dei template di design, scegli quello da cui vuoi partire.
  4. Dagli un nome e clicca su Create design.
  5. Apporta eventuali modifiche desiderate 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 design tramite codice partendo da zero utilizzando il Liquid code.

Se desideri un design di partenza, guarda il template Slider qui sotto.

Creare un Element #

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

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Dagli un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Es., “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica prodotto che vuoi usare 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 che vuoi mostrare.
  6. Clicca su Save in cima allo schermo.

Aggiunta 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:
    • Usando injection puoi inserire il codice tramite un selettore CSS.
    • Usando embedded code puoi 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. Seleziona Shopware 6 in questi casi. Questo inserirà automaticamente nel codice di embed i shortcodes corretti per Shopware 6.

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

Configurazione Plugin #

Usa il plugin Clerk per Shopware 6 per abilitare gli elements sulle pagine principali:

  1. Vai su Settings > System > Plugins e apri Clerk.io > Config.
  2. Seleziona il Sales Channel corretto.
  3. Abilita per tipologia 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:
    • Usando injection inserisce il codice utilizzando un selettore CSS.
    • Usando embedded code inserisce il codice manualmente, ad es. tramite Content > Shopping Experiences aggiungendo un blocco Raw HTML al layout e incollando il codice di embed.

Alcuni codici di embed richiedono variabili come ID prodotto o categoria. In questi casi saranno popolati nel codice di embed, ma verifica che corrispondano alle tue variabili Shopware 6.

Pagine #

Di seguito le pagine specifiche in cui inserire le Recommendations e quali tipologia usare, secondo le nostre Best Practices.

Homepage #

  1. In my.clerk.io, crea 3 Elements con queste logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci i codici di embed nel template/blocco della tua homepage.

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 Shopware 6 e copia il codice di embed.
  3. Inserisci il codice di embed nel template della pagina categoria o usa le impostazioni del plugin per abilitarlo.

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 Shopware 6 per ciascuno di essi e copia i codici di embed.
  3. Inserisci i codici di embed nel template della pagina prodotto o usa le impostazioni del plugin per abilitarli.

Passaggio Aggiunta al Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante affinché il codice di embed funzioni correttamente.
  3. Clicca su Save in cima alla pagina.
  4. Per attivare 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.

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 Shopware 6 e copia il codice di embed.
  3. Inserisci il codice di embed 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 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 inserisci il nome del contenuto. Salva.

Template di partenza #

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

Codice Slider #

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