Bigcommerce

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in BigCommerce.

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare un Clerk.js setup in 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 di sincronizzazione o avviare una sincronizzazione in my.clerk.io > Data > Configuration.

Prima di modificare i file del tema, crea una copia del tema attivo. In BigCommerce, vai su Storefront > My Themes, apri il menu del tema e scegli Make a copy. Applica il tema copiato prima di selezionare Advanced > Edit Theme Files. In questo modo avrai una versione sicura da testare e impedirai che modifiche non finite influenzino lo store attivo.

BigCommerce richiede l’account Store Owner per alcune impostazioni. Se Edit Theme Files o le impostazioni di tracking non sono disponibili, chiedi allo Store Owner di apportare la modifica o di concedere il permesso richiesto.

Configurazione Slider #

Le Recommendations vengono create con gli 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 per le nostre Best Practices.

Crea Design #

Le Recommendations vengono mostrate come uno slider in modo predefinito. Questo consente ai clienti di vedere più prodotti con meno click. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure usare i code designs.

Un design può essere riutilizzato per un numero qualsiasi di elementi Recommendations che crei.

Design Editor #

Vai su Recommendations > Designs e clicca su New Design.
Scegli Product Slider
Dall’elenco dei template di design, scegli quello da cui vuoi partire.
Dagli un nome e clicca su Create design.
Apporta tutte le modifiche che desideri al design.

Code Design #

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

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

Crea Element #

Contiene tutte le impostazioni usate per visualizzare le Recommendations e renderle incorporabili nel tuo sito. Segui questi passaggi per ogni banner Recommendations che desideri creare.

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

Aggiungi al sito #

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

Apri la scheda Insert into website.
Qui hai due opzioni:
- Usare injection ti permette di inserire il codice usando un CSS selector.
- Usare embedded code ti permette di inserire manualmente il codice nel tuo sito.
Scegli l’opzione più semplice per te.
Per alcune Logics vedrai il menu Choose your platform. In questi casi, seleziona BigCommerce. Questo precompilerà l’embedcode con i corretti shortcodes di BigCommerce.

Pagine #

Di seguito sono elencate le pagine specifiche in cui inserire le Recommendations, e quali tipi usare, 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 il codice embed dove vuoi che appaia (consigliato dentro <div class="main full">).

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

Clicca su Save & apply file.

Product Page #

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 il codice embed dove vuoi che appaia (consigliato in fondo, dopo la descrizione 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.

Category Page #

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > category.html.
Inserisci il codice embed dove desideri che compaia (consigliato subito sotto la descrizione di 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.

Cart Page #

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > pages > cart.html.
Inserisci il codice embed dove desideri che compaia (consigliato in fondo, subito prima del </div> di chiusura). L’esempio qui sotto usa 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.

Blog Page #

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.

Add-To-Basket Step #

Puoi mostrare le recommendations immediatamente 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 inserisci l’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.

Full Powerstep #

Aggiungi il contenitore popup, gli stili e una serie di recommendation spans per Powerstep nel template della pagina prodotto. Gli spans verranno caricati quando il cliente clicca sul pulsante aggiungi al carrello.

<!-- Container (hidden by 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';">Procedi al Checkout</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Continua a fare 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.

Cart Page #

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 il codice embed dove desideri che compaia (consigliato in fondo, subito prima del </div> di chiusura). L’esempio qui sotto usa 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 #

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 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 usare code designs, questi template possono aiutarti a iniziare.

Slider Code #

Questo template mostra uno slider standard con diverse 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">In Offerta</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">Non disponibile</div>
                        </a>
                    {% else %}
                        <a class="clerk-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Vedi prodotto</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 il 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 Slider #

Crea Design #

Design Editor #

Code Design #

Crea Element #

Aggiungi al sito #

Pagine #

Homepage #

Product Page #

Category Page #

Cart Page #

Blog Page #

Add-To-Basket Step #

Popup Integrato #

Full Powerstep #

Cart Page #

Exit Intent #

Template di partenza #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #