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 usare 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 della sync o avviare una sync 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. Questo ti offre una versione sicura su cui testare e impedisce che modifiche incomplete al template danneggino il negozio live.

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 effettuare la modifica o concedere i permessi necessari.

Slider Setup #

Le Recommendations sono 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 gli Elements per le nostre Best Practices verranno creati automaticamente.

Create Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo permette ai clienti di visualizzare più prodotti con meno click. Puoi usare il Design Editor per configurarlo visivamente, oppure utilizzare i code designs.

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

Design Editor #

Vai su Recommendations > Designs e clicca New Design.
Scegli Product Slider
Seleziona dalla lista di template quello con cui vuoi iniziare.
Dai un nome e clicca Create design.
Modifica il design come preferisci.

Code Design #

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

Se vuoi un design di partenza, consulta il template Slider più sotto.

Create Element #

Questo contiene tutte le impostazioni utilizzate per visualizzare le Recommendations e renderle integrabili sul tuo sito. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

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

Add to Website #

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

Apri la scheda Insert into website.
Hai due opzioni:
- Usare injection ti permette di inserire il codice usando un selettore CSS.
- Usare codice incorporato ti consente di inserire manualmente il codice nel sito.
Scegli l’opzione più semplice per te.
Per alcune Logics vedrai il menu a tendina Choose your platform. In tal caso, seleziona BigCommerce. Questo compilerà automaticamente l’embedcode con gli shortcode corretti di BigCommerce.

Pages #

Di seguito trovi le pagine specifiche 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 il codice embed dove vuoi che venga visualizzato (consigliato all’interno di <div class="main full">).

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

Clicca 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 venga visualizzato (consigliato in fondo, dopo la descrizione prodotto). L’esempio sotto utilizza l’ID del prodotto dalla pagina.

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

Clicca 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 vuoi che venga visualizzato (consigliato appena sotto la descrizione categoria). L’esempio sotto utilizza l’ID della categoria dalla pagina.

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

Clicca 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 vuoi che venga visualizzato (consigliato in fondo, appena prima della chiusura </div>). L’esempio sotto usa 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>

Clicca 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 Recommendations subito dopo che un prodotto viene aggiunto al carrello. Scegli una delle opzioni qui sotto.

In BigCommerce vai su Storefront > My Themes > Advanced > Edit Theme Files.
Apri templates > components > cart > preview.html.
Inserisci il seguente codice dove vuoi che appaia il Powerstep (consigliato in fondo, dopo la descrizione del prodotto) e mostra 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 popup, gli stili e una serie di span di raccomandazione Powerstep al template della pagina prodotto. Gli span verranno caricati quando si clicca 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 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 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.

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 vuoi che venga visualizzato (consigliato in fondo, appena prima della chiusura </div>). L’esempio sotto usa 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 </body>, mostrando il tuo Element ID scelto in data-template.

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

Starting Templates #

Se vuoi usare code designs, questi template possono aiutarti a iniziare.

Slider Code #

Questo template renderizzerà uno slider standard con varie informazioni prodotto che puoi adattare secondo 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%;
    }
}

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 secondo necessità.

HTML #

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

Recommendations

Slider Setup #

Create Design #

Design Editor #

Code Design #

Create Element #

Add to Website #

Pages #

Homepage #

Product Page #

Category Page #

Cart Page #

Blog Page #

Add-To-Basket Step #

Built-in Popup #

Full Powerstep #

Cart Page #

Exit Intent #

Starting Templates #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #