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 totalmente automatizados en cualquier página. Este artículo explica cómo empezar a utilizar una configuración Clerk.js en BigCommerce.

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

Si aún no has configurado la sincronización de datos, puedes agregar detalles o iniciar la sincronización en my.clerk.io > Data > Configuration.

Configuración del Slider #

Recommendations se crean con Elements que hacen referencia a un Diseño. A continuación tienes 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 Diseño #

Por defecto, Recommendations se muestran en formato slider. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Editor de Diseños para configurarlo visualmente, o utilizar code designs.

Un diseño puede ser reutilizado en cualquier cantidad de elements de Recommendations que crees.

Editor de Diseño #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Product Slider
De la lista de plantillas, elige la que desees usar como punto de partida.
Asígnale un nombre y haz clic en Create design.
Realiza los cambios que desees en el diseño.

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 utilizando Liquid code.

Si tienes interés en un diseño inicial, revisa la plantilla Slider más abajo.

Crear Element #

Contiene todos los ajustes necesarios para mostrar las Recommendations y permite insertarlas 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 llamarlo según la página y la lógica que elijas. Por ejemplo, “Home Page / Visitor Recommendations”.
En Element type, selecciona la lógica de producto que deseas usar desde el menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
En Design selecciona el diseño creado y elige la cantidad de productos a mostrar.
Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

Puedes insertar Recommendations en tu tema utilizando injection o embedded code. En BigCommerce, normalmente se añade el embedded code en los archivos de plantillas correspondientes.

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

Páginas #

A continuación, te mostramos las páginas específicas donde deberías insertar Recommendations, y qué tipos usar, 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 en 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 de abajo 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.

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 de abajo usa 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.

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, antes de cerrar </div>). El ejemplo de abajo 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.

Página del 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 con el ID de la página.

Paso de añadir al carrito #

Puedes mostrar recomendaciones inmediatamente después de que un producto haya sido 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 el 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 #

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

<!-- Contenedor (oculto por defecto) -->
<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.

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 desees que aparezca (recomendado al final, antes de cerrar </div>). El ejemplo de abajo 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 tu Element ID elegido en data-template.

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

Plantillas de inicio #

Si deseas utilizar code designs, estas plantillas te ayudarán a comenzar.

Slider Code #

Esta plantilla renderiza un slider estándar con diversa información de 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%;
    }
}

Código Add-To-Basket #

Este embedcode debe ser insertado al final del archivo de la plantilla 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 Diseño #

Editor de Diseño #

Code Design #

Crear 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 del blog #

Paso de añadir al carrito #

Popup integrado #

Powerstep completo #

Página del carrito #

Exit Intent #

Plantillas de inicio #

Slider Code #

HTML #

CSS #

Código Add-To-Basket #

HTML #