Bigcommerce

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in BigCommerce.

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

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

Se non hai ancora configurato la sincronizzazione dei dati, puoi aggiungere i dettagli della sincronizzazione o avviare una sincronizzazione in my.clerk.io > Data > Configuration.

Configurazione dello Slider #

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

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

Crea Design #

Le Recommendations vengono mostrate come uno slider di default. Questo permette ai clienti di vedere più prodotti con meno click. 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 #

Vai su Recommendations > Designs e clicca New Design.
Scegli Product Slider
Dall’elenco di template per il design, scegli quello con cui vuoi iniziare.
Assegnagli un nome e clicca Create design.
Apporta tutte le modifiche desiderate al design.

Code Design #

Vai su Recommendations > Designs e clicca New Design.
Scegli Other designs > Blank > Code.
Assegnagli un nome e clicca Create design.
Crea un code design da zero usando Liquid code.

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

Crea Contenuto #

Qui troverai tutte le impostazioni per mostrare le Recommendations e renderle incorporabili nel tuo sito web. Segui questi passaggi per ciascun banner Recommendations che vuoi creare.

Vai su Recommendations > Elements.
Clicca New Content.
Assegnagli un nome descrittivo. Si consiglia di chiamarlo in base alla pagina e alla logica che desideri usare. Es: “Home Page / Visitor Recommendations”.
In Content type, seleziona la logic di prodotto che desideri usare dal menu a tendina. Puoi visualizzare tutte le logiche di prodotto qui.
In Design seleziona il design che hai creato dal menu a tendina e scegli quanti prodotti vuoi mostrare.
Clicca Save in cima alla schermata.

Aggiungi al Sito Web #

Puoi inserire le Recommendations nel tema tramite injection o embedded code. Su BigCommerce, normalmente aggiungi il codice incorporato ai relativi file template del tema.

Apri la scheda Insert into website.
Qui hai due opzioni:
- Usando injection puoi inserire il codice tramite un selettore CSS.
- Usando embedded code puoi inserire manualmente il codice nel tuo sito.
Scegli l’opzione più semplice da usare per te.
Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona BigCommerce. Questo compilerà automaticamente l’embedcode con i corretti shortcode BigCommerce.

Pagine #

Di seguito le pagine specifiche dove dovresti inserire le Recommendations e quali tipologie utilizzare per seguire le nostre Best Practices.

Homepage #

Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > layout > pages > home.html.
Inserisci il codice embed dove desideri visualizzarlo (consigliato all’interno di <div class="main full">).

<span class="clerk" data-template="@YOUR_SLIDER_ID"></span>

Clicca Save & apply file.

Pagina Prodotto #

Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri il file che genera le pagine prodotto, spesso sotto templates > components (ad es. product-view.html o pages > product-page-with-sidenav.html).
Inserisci il codice embed dove desideri (consigliato in fondo, dopo la descrizione prodotto). L’esempio sotto utilizza l’ID prodotto della pagina.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ { product.id } }}]">
</span>

Clicca Save & apply file.

Pagina Categoria #

Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > category.html.
Inserisci il codice embed dove desideri (consigliato appena sotto la descrizione categoria). L’esempio sotto utilizza l’ID categoria dalla pagina.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-category="{{ { category.id } }}">
</span>

Clicca Save & apply file.

Pagina Carrello #

Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > cart.html.
Inserisci il codice embed dove desideri (consigliato in fondo, subito prima della chiusura </div>). L’esempio sotto utilizza tutti gli ID prodotto nel carrello.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>

Clicca Save & apply file.

Pagina Blog #

Se desideri mostrare recommendations contestuali sulle pagine di contenuto del CMS:

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-page="INSERT_PAGE_ID">
</span>

Sostituisci INSERT_PAGE_ID con l’ID della pagina.

Step Add-To-Basket #

Puoi mostrare recommendations immediatamente dopo che un prodotto viene aggiunto al carrello. Scegli una delle opzioni seguenti.

Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > components > cart > preview.html.
Inserisci il seguente codice dove desideri visualizzare il Powerstep (consigliato in fondo, dopo la descrizione prodotto), e inserisci il tuo Element ID scelto in data-template.

<span id="clerk-powerstep"
  class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>
<script>
  Clerk('content','#clerk-powerstep');
</script>

Clicca Save & apply file.

Full Powerstep #

Aggiungi il container del popup, gli stili e un set di Powerstep recommendation span al template della pagina prodotto. Gli span verranno caricati quando il cliente clicca sul pulsante aggiungi al carrello.

<!-- Container (nascosto di default) -->
<div style="display: none;" id="clerk_powerstep">
  <span class="clerk-popup-close" onclick="close_powerstep()">&#x2715</span>
  <div class="clerk_powerstep_wrap">
    <div class="clerk_powerstep_header">
      <h2>Hai aggiunto <b><u>{{ product.title }}</u></b> al tuo carrello.</h2>
    </div>
    <div class="clerk_powerstep_image">
      <img src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}" alt="Hai aggiunto {{ product.title }} al tuo carrello.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Procedi al Checkout</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Continua lo Shopping</button>
    </div>
    <br>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-others-also-bought" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-visitor-complementary" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-popular" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-popular-on-sale" data-products="[{{product.id}}]"></span>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '#form-action-addToCart';
    const prodPage = (document.querySelector('[itemtype="http://schema.org/Product"] > div')) ? '[itemtype="http://schema.org/Product"] > div' : 'main';
    const clerkPowerstep = document.getElementById('clerk_powerstep');

    document.querySelector(buyBtn).addEventListener('click', open_powerstep);

    function open_powerstep() {
      Clerk('content', '.clerk-powerstep-recommendations');
      clerkPowerstep.style.display = 'block';
      clerkPowerstep.style.padding = '5px 15px';
      clerkPowerstep.classList.toggle('animate_top');
      setTimeout(function(){
        document.querySelector(prodPage).addEventListener('click', close_powerstep);
        document.getElementsByTagName('header')[0].addEventListener('click', close_powerstep);
      }, 500);
    }
  });

  function close_powerstep() {
    var clerkPowerstep = document.getElementById('clerk_powerstep');
    clerkPowerstep.style.display = 'none';
  }
</script>

Clicca Save & apply file.

Pagina Carrello #

Su my.clerk.io, crea un Element con la logic Best Cross-Sell Products.
Nel menu a tendina Insert into website > Choose your platform, seleziona BigCommerce, e copia l’embedcode.
Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > cart.html.
Inserisci il codice embed dove desideri (consigliato in fondo, subito prima della chiusura </div>). L’esempio sotto utilizza tutti gli ID prodotto nel carrello.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>

Exit Intent #

Su my.clerk.io, crea un Element con la logic Visitor Recommendations.
Su BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > layout > base.html.
Inserisci il seguente codice subito prima della chiusura del tag </body>, e inserisci il tuo Element ID scelto in data-template.

<span class="clerk"
  data-template="@{{content.id}}"
  data-exit-intent="true">
</span>

Template di Partenza #

Se desideri utilizzare design tramite codice, questi template ti aiuteranno ad iniziare.

Slider Code #

Questo template renderà uno slider standard con varie informazioni di 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%;
    }
}

Add-To-Basket Code #

Questo embedcode deve essere inserito in fondo al file tema della pagina prodotto. Mostrerà un popup con uno slider di prodotti quando un cliente aggiunge un prodotto al carrello. Può essere personalizzato secondo necessità.

HTML #

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.

Recommendations

Configurazione dello Slider #

Crea Design #

Design Editor #

Code Design #

Crea Contenuto #

Aggiungi al Sito Web #

Pagine #

Homepage #

Pagina Prodotto #

Pagina Categoria #

Pagina Carrello #

Pagina Blog #

Step Add-To-Basket #

Popup Integrato #

Full Powerstep #

Pagina Carrello #

Exit Intent #

Template di Partenza #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #