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, permettendoti di mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare una configurazione Clerk.js in Shopware 6.

Per tutte le nostre Best Practices, leggi questo articolo su quali Recommendations utilizzare.

Configurazione Slider #

Le Recommendations vengono create con Elements che fanno riferimento a un Design. Qui sotto trovi la guida di base per configurare un Element.

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

Crea Design #

Le Recommendations sono mostrate come slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno click. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure usare i design tramite codice.

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 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 design da zero usando Liquid code.

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

Crea Contenuto #

Qui trovi tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili sul tuo sito. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Content.
  3. Dagli un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che intendi usare. Ad esempio, “Home Page / Visitor Recommendations”.
  4. In Content 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 creato dal menu a tendina e scegli il numero di prodotti da mostrare.
  6. Clicca su Save in alto nella schermata.

Aggiungi 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 usando un selettore CSS.
    • Usando embedded code puoi inserire il codice manualmente nel tuo sito web.
  3. Scegli l’opzione che ti è più semplice da usare.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona Shopware 6. Questo pre-compilerà 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 #

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

  1. Vai su Settings > System > Plugins e apri Clerk.io > Config.
  2. Seleziona il corretto Sales Channel.
  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 il contenuto 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 il codice manualmente, 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 auto-compilati nel codice da incorporare, ma verifica che corrispondano alle tue variabili di Shopware 6.

Pagine #

Qui sotto trovi le pagine specifiche dove inserire le Recommendations, e quali tipi usare, 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 gli embedcode nel template/blocco 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 Shopware 6 e copia l’embedcode.
  3. Inserisci l’embedcode nel template della tua 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 e copia gli embedcode.
  3. Inserisci gli embedcode nel template della pagina prodotto o usa le impostazioni del plugin per abilitarli.

Passaggio Aggiungi 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é l’embedcode funzioni correttamente.
  3. Clicca su Save in alto nella 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 Pagina o Popup, seleziona il contenuto, poi Save.

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 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 logica Visitor Recommendations.
  2. Abilita tramite 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 desideri usare i design tramite codice, questi template possono aiutarti a iniziare.

Slider Code #

Questo template visualizzerà uno slider standard con varie informazioni prodotto, che puoi personalizzare in base 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.