Bigcommerce

Recommendations

Automatiza y personaliza productos en cualquier página de BigCommerce.

Clerk.io ofrece más de 23 tipos diferentes de lógicas de producto, lo que te permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar cuando se utiliza una Clerk.js setup en BigCommerce.

Para ver nuestras mejores prácticas completas, lee este artículo sobre qué Recommendations utilizar.

Si aún no has configurado tu sincronización de datos, puedes añadir los detalles de sincronización o iniciar una sincronización en my.clerk.io > Data > Configuration.

Configuración del Slider #

Las Recommendations se crean con Elements que hacen referencia a un Design. A continuación, se muestra la guía básica para configurar un Element.

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Elements para nuestras mejores prácticas.

Crear Design #

Las Recommendations se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente, o usar code designs.

Un design se puede reutilizar para cualquier cantidad de elementos de Recommendations que crees.

Design Editor #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Product Slider
De la lista de plantillas de diseño, selecciona la que desees usar como base.
Ponle un nombre y haz clic en Create design.
Realiza cualquier cambio que desees en el design.

Code Design #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Other designs > Blank > Code.
Ponle un nombre y haz clic en Create design.
Crea un code design desde cero utilizando Liquid code.

Si deseas un design inicial, revisa la Slider template más abajo.

Crear Element #

Esto contiene todas las configuraciones utilizadas para mostrar las Recommendations y hacerlo embebible en tu sitio web. Sigue estos pasos para cada banner de Recommendations que desees crear.

Ve a Recommendations > Elements.
Haz clic en New Element.
Ponle un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que deseas utilizar. Por ejemplo, “Home Page / Visitor Recommendations”.
En Element type, selecciona la lógica de producto que quieres usar del desplegable. Puedes ver una visión general de todas las lógicas de producto aquí.
En Design selecciona el design que creaste desde el desplegable y escoge el número de productos que quieres mostrar.
Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

Puedes insertar Recommendations en tu tema usando injection o embedded code. En BigCommerce, normalmente agregas el embedded code a los archivos de plantilla relevantes del tema.

Abre la pestaña Insert into website.
Aquí tienes dos opciones:
- Usar injection te permite insertar el código utilizando un selector CSS.
- Usar embedded code te permite insertar el código manualmente en tu sitio web.
Elige la opción que te resulte más fácil de usar.
Para algunas Logics verás el desplegable Choose your platform. Selecciona BigCommerce en estos casos. Esto completará automáticamente el embedcode con los shortcodes correctos para BigCommerce.

Páginas #

A continuación se detallan las páginas específicas donde deberías insertar Recommendations y qué tipos deberías usar, para seguir nuestras mejores prácticas.

Homepage #

En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > layout > pages > home.html.
Inserta el embed code donde quieras que aparezca (recomendado dentro de <div class="main full">).

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

Haz clic en Save & apply file.

Product Page #

En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre el archivo que genera tus páginas de producto, normalmente bajo templates > components (por ejemplo, product-view.html o pages > product-page-with-sidenav.html).
Inserta el embed code donde quieras que aparezca (recomendado al final, después de la descripción del producto). El ejemplo siguiente usa el ID del producto de la página.

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

Haz clic en Save & apply file.

Category Page #

En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > pages > category.html.
Inserta el embed code donde quieras que aparezca (recomendado justo debajo de la descripción de la categoría). El ejemplo siguiente utiliza el ID de la categoría de la página.

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

Haz clic en Save & apply file.

Cart Page #

En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > pages > cart.html.
Inserta el embed code donde quieras que aparezca (recomendado al final, justo antes del cierre de </div>). El ejemplo siguiente utiliza todos los IDs de productos en el carrito.

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

Haz clic en Save & apply file.

Blog Page #

Si quieres mostrar recomendaciones contextuales en páginas de contenido CMS:

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

Reemplaza INSERT_PAGE_ID con el ID de la página.

Add-To-Basket Step #

Puedes mostrar recomendaciones inmediatamente después de que un producto sea añadido al carrito. Elige una de las siguientes opciones.

En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > components > cart > preview.html.
Inserta el siguiente código donde quieras que aparezca Powerstep (recomendado al final, después de la descripción del producto), y renderiza el Element ID elegido en 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>

Haz clic en Save & apply file.

Full Powerstep #

Agrega el contenedor del popup, los estilos y un conjunto de spans de recomendaciones Powerstep a tu plantilla de la página de producto. Los spans se cargarán cuando se haga clic en el botón de añadir al carrito.

<!-- 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>You added <b><u>{{ product.title }}</u></b> to your cart.</h2>
    </div>
    <div class="clerk_powerstep_image">
      <img src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}" alt="You added {{ product.title }} to your cart.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Continue to Checkout</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Continue 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>

Haz clic en Save & apply file.

Cart Page #

En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
En el desplegable Insert into website > Choose your platform, selecciona BigCommerce y copia el embedcode.
En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > pages > cart.html.
Inserta el embed code donde quieras que aparezca (recomendado al final, justo antes del cierre de </div>). El ejemplo siguiente utiliza todos los IDs de productos en el carrito.

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

Exit Intent #

En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
En BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > layout > base.html.
Inserta el siguiente código justo antes de la etiqueta de cierre </body> y coloca el Element ID elegido en data-template.

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

Plantillas Iniciales #

Si deseas utilizar code designs, estas plantillas pueden ayudarte a comenzar.

Slider Code #

Esta plantilla mostrará un slider estándar con diversa información del producto, que puedes adaptar según tus necesidades.

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 #

Este embedcode debe insertarse al final del archivo de tema de la página de producto. Mostrará un popup con un slider de productos cuando un cliente agregue un producto a su carrito. Puede ser personalizado según sea necesario.

HTML #

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.

Recommendations

Configuración del Slider #

Crear Design #

Design Editor #

Code Design #

Crear Element #

Añadir al sitio web #

Páginas #

Homepage #

Product Page #

Category Page #

Cart Page #

Blog Page #

Add-To-Basket Step #

Built-in Popup #

Full Powerstep #

Cart Page #

Exit Intent #

Plantillas Iniciales #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #