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 te permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo empezar al utilizar una configuración de Clerk.js 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 detalles de sincronización o iniciar una sincronización en my.clerk.io > Data > Configuration.

Antes de editar archivos de tema, haz una copia del tema activo. En BigCommerce, ve a Storefront > My Themes, abre el menú del tema y selecciona Hacer una copia. Aplica el tema copiado antes de seleccionar Advanced > Edit Theme Files. Esto te da una versión segura para hacer pruebas y evita que cambios incompletos del template afecten la tienda en vivo.

BigCommerce requiere la cuenta de Store Owner para algunas configuraciones. Si Edit Theme Files o la configuración de seguimiento no están disponibles, solicita al Store Owner que realice el cambio o conceda el permiso necesario.

Configuración del slider #

Recommendations se crean con Elements que hacen referencia a 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 el Design #

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

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

Editor de Design #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Product Slider
De la lista de plantillas de design, escoge la que desees como punto de partida.
Ponle un nombre y haz clic en Create design.
Realiza los cambios que quieras 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 usando Liquid code.

Si deseas un design de partida, consulta la plantilla Slider más abajo.

Crear Element #

Este contiene todas las configuraciones usadas 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 vayas a utilizar. Por ejemplo: “Home Page / Visitor Recommendations”.
En Element type, selecciona la lógica de producto que desees utilizar del menú desplegable. Puedes ver un resumen de todas las lógicas de productos aquí.
En Design selecciona el design que creaste del menú desplegable 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 agregas el embedded code en los archivos de plantilla del tema correspondientes.

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 manualmente en tu sitio web.
Elige la opción que te resulte más fácil de usar.
Para algunas Lógicas verás el menú desplegable Choose your platform. Selecciona BigCommerce en estos casos. Esto rellenará el código embebido con los shortcodes correctos de BigCommerce.

Páginas #

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

Página principal (Homepage) #

En BigCommerce ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > layout > pages > home.html.
Inserta el código embebido 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, usualmente bajo templates > components (por ejemplo, product-view.html o pages > product-page-with-sidenav.html).
Inserta el código embebido donde quieras que aparezca (recomendado en la parte inferior, después de la descripción del producto). El ejemplo siguiente utiliza 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 código embebido 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.

Página del carrito #

En BigCommerce ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > pages > cart.html.
Inserta el código embebido donde quieras que aparezca (recomendado en la parte inferior, justo antes del cierre </div>). El ejemplo siguiente utiliza todos los ID de los productos del 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 deseas mostrar recomendaciones contextuales en las páginas de contenido CMS:

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

Reemplaza INSERT_PAGE_ID por el ID de la página.

Paso de Añadir al carrito (Add-To-Basket) #

Puedes mostrar recomendaciones inmediatamente después de que un producto se añada al carrito. Elige una de las opciones a continuación.

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 en la parte inferior, después de la descripción del producto) y muestra el Element ID que elijas 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 popup, estilos y un conjunto de spans de recomendaciones Powerstep en tu template de 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>Agregaste <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="Agregaste {{ product.title }} a tu carrito.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Continuar al Checkout</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ú desplegable Insert into website > Choose your platform, selecciona BigCommerce y copia el código embebido.
En BigCommerce ve a Storefront > My Themes > Advanced > Edit Theme Files.
Abre templates > pages > cart.html.
Inserta el código embebido donde quieras que aparezca (recomendado en la parte inferior, justo antes del cierre </div>). El ejemplo siguiente utiliza todos los ID de los productos del 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 muestra el Element ID que elijas en data-template.

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

Plantillas iniciales #

Si quieres utilizar code designs, estas plantillas pueden ayudarte a empezar.

Código Slider #

Esta plantilla mostrará 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 código embebido debe insertarse en la parte inferior del archivo de la página de producto del tema. 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 el Design #

Editor de Design #

Code Design #

Crear Element #

Añadir al sitio web #

Páginas #

Página principal (Homepage) #

Página de producto #

Página de categoría #

Página del carrito #

Página del blog #

Paso de Añadir al carrito (Add-To-Basket) #

Popup integrado #

Full Powerstep #

Página del carrito #

Exit Intent #

Plantillas iniciales #

Código Slider #

HTML #

CSS #

Código Add-To-Basket #

HTML #