Cualquier (webshop)

Recommendations

Automatiza y personaliza productos en cualquier página.
Recommendations

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 utilizas una configuración de Clerk.js.

Para conocer todas nuestras Mejores Prácticas, lee este artículo sobre qué Recommendations usar.

Configuración del Carrusel #

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

Recommendations se muestran como un carrusel por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.

Un diseño puede reutilizarse para cualquier cantidad de elementos de Recommendations que crees.

Editor de Diseño #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Product Slider
  3. De la lista de plantillas de diseño, selecciona la que prefieras para comenzar.
  4. Asígnale un nombre y haz clic en Create design.
  5. Realiza cualquier cambio que desees en el diseño.

Diseño en Código #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Other designs > Blank > Code.
  3. Asígnale un nombre y haz clic en Create design.
  4. Crea un diseño en código desde cero usando Liquid code.

Si deseas un diseño de inicio, revisa la plantilla de carrusel más abajo.

Crear Contenido #

Aquí se configuran todos los ajustes utilizados para mostrar las Recommendations y hacer que sean integrables en tu sitio web. Sigue estos pasos para cada banner de Recommendations que desees crear.

  1. Ve a Recommendations > Elements.
  2. Haz clic en New Content.
  3. Dale un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que deseas usar. Por ejemplo, “Página de Inicio / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que deseas usar desde el menú desplegable. Puedes ver una vista general de todas las lógicas de producto aquí.
  5. En Design selecciona el diseño que creaste en el menú desplegable y elige el número de productos que deseas mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Agregar al Sitio Web #

  1. Abre la pestaña Insert into website.
  2. 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.
  3. Elige la opción que te resulte más fácil de usar.
  4. Para el código embebido, agrega cualquier lógica de frontend necesaria, para insertar por ejemplo un ID de producto o de categoría. Esto depende de la lógica que elijas.

Aquí tienes un ejemplo completo de código embebido de Recommendations, con un ID de producto de muestra:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Páginas #

A continuación se indican las páginas específicas donde debes insertar Recommendations y el tipo que debes usar, para seguir nuestras Mejores Prácticas.

Página de Inicio #

  1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los códigos embed en tu plantilla/bloque de la página de inicio.

Página de Categoría #

  1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
  2. Copia el código embed y pégalo en la plantilla de la página de categoría.
  3. Configura data-category con el ID de la categoría actual.

Página de Producto #

  1. En my.clerk.io, crea 2 Elements con las siguientes lógicas:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Copia los códigos embed y colócalos en la plantilla de página de producto.
  3. Configura data-products con el ID del producto actual.

Página de Carrito #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Copia el código embed y colócalo en la plantilla de la página de carrito.
  3. Configura data-products con los ID de los productos en el carrito.

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Copia el código embed e insértalo justo antes de la etiqueta de cierre </body> en tu archivo de plantilla principal.
  3. Agrega data-exit-intent="true" al código embed.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Plantillas de Inicio #

Si deseas usar diseños en código, estas plantillas pueden ayudarte a comenzar.

Código de Carrusel #

Esta plantilla mostrará un carrusel estándar con diversa información de los productos, 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-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</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-add-to-cart, .clerk-add-to-cart: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%;
    }
}

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