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 in qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare una Clerk.js setup in Shopware 6.

Per la nostra guida completa alle Best Practices, leggi questo articolo su quali Recommendations utilizzare.

Impostazione Slider #

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

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

Crea un Design #

Le Recommendations vengono mostrate di default come uno slider. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi utilizzare Design Editor per configurarlo visivamente, oppure utilizzare 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 con cui iniziare.
  4. Dà 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. Dà un nome e clicca su Create design.
  4. Crea un design in codice da zero usando Liquid code.

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

Crea un Element #

Questo contiene 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 > Elements.
  2. Clicca su New Element.
  3. Dà un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Es., “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica di prodotto che vuoi dal menu a tendina. Puoi vedere una panoramica di tutte le product logics qui.
  5. In Design seleziona dal menu a tendina il design che hai creato e scegli il numero di prodotti da mostrare.
  6. Clicca su Save in alto nello schermo.

Aggiungi al sito web #

Per aggiungere le Clerk Recommendations sul 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 utilizzando un selettore CSS.
    • Usare embedded code ti permette di inserire manualmente il codice nel tuo sito web.
  3. Scegli l’opzione che preferisci.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questo caso seleziona Shopware 6. Questo precompilerà l’embedcode con i corretti shortcodes di Shopware 6.

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

Impostazione Plugin #

Usa il plugin Clerk per Shopware 6 per abilitare gli elementi sulle 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

Impostazione su 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:
    • Usando injection inserisce il codice con un selettore CSS.
    • Usando embedded code inserisce il codice manualmente, es. tramite Content > Shopping Experiences aggiungendo un blocco Raw HTML al layout e incollando l’embed code.

Alcuni embed code necessitano di variabili come prodotto o categoria ID. In questi casi verranno compilati nell’embed code, ma controlla che corrispondano alle tue variabili di Shopware 6.

Pagine #

Qui sotto trovi le pagine specifiche dove dovresti inserire le Recommendations, e quali tipi usare, per seguire le nostre Best Practices.

Homepage #

  1. Su 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. Su 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 pagina categoria o usa le impostazioni del plugin per abilitarlo.

Pagina Prodotto #

  1. Su 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 ognuno e copia gli embedcode.
  3. Inserisci gli embedcode nel template della pagina prodotto o utilizza le impostazioni del plugin per abilitarli.

Step Aggiunta al Carrello #

  1. Su my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Dà il nome “Add-To-Basket / Others Also Bought”. È importante per il corretto funzionamento dell’embedcode.
  3. Clicca su Save in cima alla pagina.
  4. Per attivare l’add-to-basket Powerstep con 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. Su 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.

Uscita per Intento di Abbandono #

  1. Su 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 inserisci il nome del contenuto. Salva.

Template di partenza #

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

Slider Code #

Questo template visualizzerà uno slider standard con varie informazioni sul prodotto, che puoi adattare alle tue necessità.

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.