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 utilizzando una Clerk.js setup su 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 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 trovi la guida di base per configurare un Element.

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

Crea Design #

Le Recommendations vengono visualizzate come uno slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente oppure utilizzare code designs.

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

Design Editor #

Vai su Recommendations > Designs e clicca su New Design.
Scegli Product Slider
Dalla lista di template, scegli quello da cui vuoi iniziare.
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 usando Liquid code.

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

Crea 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.

Vai su Recommendations > Elements.
Clicca su New Element.
Dagli 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 product logic che vuoi utilizzare dal menu a tendina. Puoi vedere una panoramica di tutte le product logics qui.
In Design seleziona dal menu a tendina il design che hai creato e scegli il numero di prodotti da mostrare.
Clicca su Save in alto.

Aggiungi al sito web #

Puoi inserire le Recommendations nel tuo tema tramite injection o embedded code. Su BigCommerce, tipicamente aggiungi l’embedded code nei file template del tema corrispondente.

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

Pagine #

Di seguito trovi le pagine specifiche dove inserire le Recommendations e quali tipi usare, così da 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 desideri 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 tue pagine prodotto, spesso sotto templates > components (ad 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 prodotto). L’esempio sotto utilizza 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 subito sotto la descrizione della categoria). L’esempio sotto utilizza 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, prima della chiusura di </div>). L’esempio sotto usa tutti gli ID prodotto presenti 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.

Passaggio Add-To-Basket #

Puoi mostrare le recommendations subito dopo che un prodotto è stato aggiunto al carrello. Scegli una delle opzioni sotto.

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > components > cart > preview.html.
Inserisci il codice seguente dove vuoi che appaia 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 su Save & apply file.

Powerstep Completo #

Aggiungi il contenitore popup, gli stili e una serie di span per le recommendations di Powerstep al template della pagina prodotto. Gli span si caricheranno quando viene cliccato il 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 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 su Save & apply file.

Pagina Carrello #

In 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.
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, prima della chiusura di </div>). L’esempio sotto usa tutti gli ID prodotto presenti 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 logic Visitor Recommendations.
In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > layout > base.html.
Inserisci il codice seguente appena 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 iniziali #

Se vuoi usare code designs, questi template ti permettono di iniziare rapidamente.

Slider Code #

Questo template mostrerà uno slider standard con varie informazioni sui prodotti, che puoi modificare come preferisci.

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%;
    }
}

Codice Add-To-Basket #

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

Aggiungi al sito web #

Pagine #

Homepage #

Pagina Prodotto #

Pagina Categoria #

Pagina Carrello #

Pagina Blog #

Passaggio Add-To-Basket #

Popup Integrato #

Powerstep Completo #

Pagina Carrello #

Exit Intent #

Template iniziali #

Slider Code #

HTML #

CSS #

Codice Add-To-Basket #

HTML #