Bigcommerce

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in BigCommerce.

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 un Clerk.js setup in BigCommerce.

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

Se non hai ancora configurato la sincronizzazione dei dati, puoi aggiungere i dettagli di 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 di base per configurare un Element.

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

Crea Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente, o utilizzare code designs.

Un design può essere riutilizzato per qualunque Elements di Recommendations crei.

Design Editor #

Vai a Recommendations > Designs e clicca su New Design.
Scegli Product Slider
Dalla lista dei template di design, scegli quello con cui iniziare.
Dai un nome e clicca su Create design.
Apporta tutte le modifiche desiderate al design.

Code Design #

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

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

Crea Element #

Contiene tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili sul tuo sito. Segui questi passaggi per ogni banner di Recommendations che desideri creare.

Vai a Recommendations > Elements.
Clicca su New Element.
Dai un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Es.: “Home Page / Visitor Recommendations”.
In Element type, seleziona la logica di prodotto che vuoi utilizzare dal menu a tendina. Puoi vedere una panoramica di tutte le product logics qui.
In Design seleziona il design creato dal menu a tendina e scegli il numero di prodotti da mostrare.
Clicca su Save in alto allo schermo.

Aggiungi al Sito Web #

Puoi inserire Recommendations nel tuo tema utilizzando injection o embedded code. Su BigCommerce, normalmente inserisci l’embedded code nei file template pertinenti del tema.

Apri la scheda Insert into website.
Qui hai due opzioni:
- Utilizzando injection puoi inserire il codice usando un selettore CSS.
- Utilizzando embedded code puoi inserire manualmente il codice sul sito.
Scegli l’opzione che preferisci.
Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona BigCommerce. Questo precompilerà l’embedcode con i corretti shortcodes per BigCommerce.

Pagine #

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

Homepage #

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > layout > pages > home.html.
Inserisci l’embed code dove vuoi che appaia (consigliato all’interno di <div class="main full">).

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

Clicca su Save & apply file.

Pagina Prodotto #

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

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

Clicca su Save & apply file.

Pagina Categoria #

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > category.html.
Inserisci l’embed code dove desideri che appaia (consigliato poco sotto la descrizione della categoria). L’esempio qui sotto usa l’ID categoria dalla pagina.

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

Clicca su Save & apply file.

Pagina Carrello #

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > cart.html.
Inserisci l’embed code dove desideri che appaia (consigliato in fondo, appena prima della chiusura </div>). L’esempio qui 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 su Save & apply file.

Pagina Blog #

Se vuoi mostrare Recommendations contestuali sulle pagine di contenuto 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 Aggiungi al Carrello #

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

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > components > cart > preview.html.
Inserisci il seguente codice dove desideri che appaia il Powerstep (consigliato in fondo, dopo la descrizione prodotto), e rendi 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 su Save & apply file.

Powerstep Completo #

Aggiungi il container popup, gli stili e una serie di span di raccomandazioni Powerstep nel template della pagina prodotto. Gli span verranno caricati quando viene cliccato il 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 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 carrello.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Continua al Checkout</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Continua gli acquisti</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 su Save & apply file.

Pagina Carrello #

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

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

Exit Intent #

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

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

Template di Partenza #

Se vuoi usare code designs, questi template ti aiuteranno a iniziare.

Slider Code #

Questo template visualizza uno slider standard con varie informazioni sul prodotto, che puoi personalizzare secondo le 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 va 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 a piacere.

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 Element #

Aggiungi al Sito Web #

Pagine #

Homepage #

Pagina Prodotto #

Pagina Categoria #

Pagina Carrello #

Pagina Blog #

Step Aggiungi al Carrello #

Popup Integrato #

Powerstep Completo #

Pagina Carrello #

Exit Intent #

Template di Partenza #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #