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 a usar 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 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.

Si sigues los pasos en my.clerk.io > Settings > Setup Guides, se crearán automáticamente los Elements para nuestras Mejores Prácticas.

Crear Design #

Las Recommendations se muestran como slider por defecto. 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 Elements 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, elige la que quieras usar como base.
Asígnale un nombre y haz clic en Create design.
Haz 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 deseas un design de inicio, revisa la plantilla Slider más abajo.

Crear Contenido #

Esto contiene todos los ajustes que se usan 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 Content.
Asígnale un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.
En Content type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
En Design selecciona el design que creaste y elige la cantidad de productos que deseas mostrar.
Haz clic en Save en la parte superior de la pantalla.

Agregar 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 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 sea más sencilla de usar.
Para algunas lógicas verás el menú desplegable Choose your platform. Selecciona BigCommerce en estos casos. Esto rellenará previamente el embedcode con los shortcodes correctos de BigCommerce.

Páginas #

A continuación, se muestran 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, a menudo en templates > components (por ejemplo, product-view.html o pages > product-page-with-sidenav.html).
Inserta el embed code donde quieras que aparezca (recomendado abajo, después de la descripción de producto). El ejemplo siguiente usa el ID de 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 usa el ID de 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 fondo, justo antes del cierre </div>). El ejemplo siguiente usa todos los IDs de producto 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.

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

Paso de Agregar al Carrito #

Puedes mostrar recomendaciones inmediatamente después de que se agregue 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 el Powerstep (recomendado al final, después de la descripción del producto), y asigna 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 a tu plantilla de página de producto. Los spans se cargarán cuando se haga clic en el botón de agregar 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 agregado <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 agregado {{ product.title }} a tu carrito.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Continuar a la compra</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.

Cart Page #

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 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 fondo, justo antes del cierre </div>). El ejemplo siguiente utiliza todos los IDs de producto 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 del cierre de la etiqueta </body> y asigna tu Element ID en data-template.

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

Plantillas Iniciales #

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

Código Slider #

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

Código Add-To-Basket #

Este embedcode debe insertarse en la parte inferior 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 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 Design #

Editor de Design #

Code Design #

Crear Contenido #

Agregar al Sitio Web #

Páginas #

Homepage #

Product Page #

Category Page #

Cart Page #

Blog Page #

Paso de Agregar al Carrito #

Popup Integrado #

Powerstep Completo #

Cart Page #

Exit Intent #

Plantillas Iniciales #

Código Slider #

HTML #

CSS #

Código Add-To-Basket #

HTML #