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 productos, lo que hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar al usar 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 agregar detalles de sincronización o iniciar una sincronización en my.clerk.io > Data > Configuration.

Antes de editar los archivos del tema, haz una copia del tema activo. En BigCommerce, ve a Storefront > My Themes, abre el menú del tema y elige Make a copy. Aplica el tema copiado antes de seleccionar Advanced > Edit Theme Files. Esto te proporciona una versión segura para probar y evita que los cambios de plantilla sin terminar afecten la tienda en vivo.

BigCommerce requiere la cuenta de Store Owner para algunos ajustes. Si Edit Theme Files o los ajustes de seguimiento no están disponibles, pide al Store Owner que realice el cambio o te otorgue el permiso necesario.

Configuración del Slider #

Recommendations se crean con Elements que referencian un Design. A continuación se encuentra 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 un Design #

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

Un design puede reutilizarse para cualquier cantidad de Elements 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 design, elige la que quieras para empezar.
Asígnale 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.
Asígnale un nombre y haz clic en Create design.
Crea un code design desde cero usando Liquid code.

Si quieres un design para comenzar, consulta la Slider template más abajo.

Crear un Element #

Esto contiene todos los ajustes usados para mostrar las Recommendations y permite incrustarlo en tu sitio web. Sigue estos pasos para cada banner de Recommendations que quieras crear.

Ve a Recommendations > Elements.
Haz clic en New Element.
Asígnale un nombre descriptivo. Recomendamos nombrarlo en función de la página y la lógica que quieras usar. Ej., “Home Page / Visitor Recommendations”.
En Element type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver una descripción general de todas las product logics here.
En Design selecciona el design que creaste y elige el número de productos que deseas 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 añades el código incrustado a los archivos de plantilla del tema correspondiente.

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

Páginas #

A continuación se muestran las páginas específicas donde debes insertar Recommendations, y los tipos que deberías utilizar, para seguir nuestras Mejores Prácticas.

Página de Inicio #

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.

Página de Producto #

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 (ej. 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 siguiente ejemplo usa la ID del producto desde la página.

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

Haz clic en Save & apply file.

Página de Categoría #

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 a continuación usa la ID de categoría desde la página.

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

Haz clic en Save & apply file.

Página del Carrito #

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 </div> de cierre). El siguiente ejemplo usa todas las ID 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.

Página de Blog #

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 por la ID de la página.

Paso Add-To-Basket #

Puedes mostrar recomendaciones inmediatamente después de que se añade un producto 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 coloca tu 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.

Powerstep Completo #

Agrega el contenedor del popup, estilos y un conjunto de spans de recomendaciones Powerstep en tu plantilla de 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>Has añadido <b><u>{{ product.title }}</u></b> a tu carrito.</h2>
    </div>
    <div class="clerk_powerstep_image">
      <img src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}" alt="Has añadido {{ product.title }} a tu carrito.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Continuar con el Pago</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Seguir Comprando</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.

Página del Carrito #

En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
En el menú 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 </div> de cierre). El siguiente ejemplo usa todas las ID 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 tu Element ID elegido en data-template.

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

Plantillas Iniciales #

Si deseas usar code designs, estas plantillas pueden ayudarte a empezar.

Slider Code #

Esta plantilla renderea un slider estándar con diversa información del producto, que puedes adaptar a 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 plantilla de la página de producto. Mostrará un popup con un slider de productos cuando un cliente añada un producto a su carrito. Puede personalizarse 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 un Design #

Design Editor #

Code Design #

Crear un Element #

Añadir al sitio web #

Páginas #

Página de Inicio #

Página de Producto #

Página de Categoría #

Página del Carrito #

Página de Blog #

Paso Add-To-Basket #

Popup Integrado #

Powerstep Completo #

Página del Carrito #

Exit Intent #

Plantillas Iniciales #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #