Mystore

Recommendations

Automatiza y personaliza productos en cualquier página en Mystore

Automatiza y personaliza productos en cualquier página de Mystore. 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 de Clerk.js en Mystore.

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

Configuración de Slider #

Recommendations se crean con Sliders que hacen referencia a un diseño. A continuación, la guía básica para configurar un Slider.

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Sliders recomendados según nuestras mejores prácticas.

Crear diseño #

Recommendations se muestra como un slider 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 ser reutilizado para cualquier cantidad de sliders 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, elige la que quieras usar para comenzar.

  4. Asígnale un nombre y haz clic en Create design.

  5. Realiza los cambios que desees en el diseño.

Diseño de 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 de código desde cero usando Liquid code.

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

Crear contenido #

Esto contiene toda la configuración utilizada para mostrar las Recommendations y hacerlas insertables en tu sitio web.

Sigue estos pasos para cada banner de Recommendations que quieras crear.

  1. Ve a Recommendations > Sliders.

  2. Haz clic en New Content.

  3. Asígnale un nombre descriptivo. Recomendamos nombrarlo basándose en la página y la lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.

  4. En Content type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver todas las lógicas de producto aquí.

  5. En Design selecciona el diseño que creaste del 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 #

Para añadir Clerk Recommendations a tu sitio web, tienes dos opciones: Inyección y Código incrustado.

  1. Abre la pestaña Insert into website.

  2. Aquí tienes dos opciones:

    • Usar inyección te permite insertar el código usando un selector CSS.

    • Usar código incrustado te permite insertar el código manualmente en tu sitio web.

  3. Elige la opción que sea más fácil para ti.

  4. Para algunas Lógicas verás el menú desplegable Choose your platform. Selecciona Mystore en estos casos. Esto rellenará previamente el embedcode con los shortcodes correctos de Mystore.

Para agregar detalles de sincronización o comenzar una sincronización, ve a my.clerk.io > Data > Configuration.

Configuración en my.clerk.io #

  1. Ve a Recommendations > Sliders.

  2. Selecciona el slider que deseas insertar.

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes opciones:

  5. Para código incrustado en Mystore, las ubicaciones típicas son:

    • Página principal: inserta el embed code en la plantilla/bloque de tu página principal.

    • Página de producto: configura data-products con el ID del producto actual.

    • Página de categoría: configura data-category con el ID de la categoría actual.

    • Página del carrito: configura data-products con los IDs de los productos en el carrito.

Páginas #

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

Página principal #

  1. En my.clerk.io, crea 3 Sliders con las siguientes lógicas:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Inserta los embedcodes en la plantilla/bloque de tu página principal.

Página de categoría #

  1. En my.clerk.io, crea un Slider con la lógica Bestsellers In Category.

  2. En el menú desplegable Insert into website > Choose your platform, selecciona Mystore y copia el embedcode.

  3. Inserta el embedcode en la plantilla de tu página de categoría. Configura data-category con el ID de la categoría actual.

Página de producto #

  1. En my.clerk.io, crea 2 Sliders con las siguientes lógicas:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. En el menú desplegable Insert into website > Choose your platform, selecciona Mystore para cada uno y copia los embedcodes.

  3. Inserta los embedcodes en la plantilla de tu página de producto. Configura data-products con el ID del producto actual.

Paso de añadir al carrito #

  1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.

  2. Asígnale el nombre “Add-To-Basket / Others Also Bought”. Esto es importante para que el embedcode funcione correctamente.

  3. Haz clic en Save en la parte superior de la página.

  4. Para activar el Powerstep de añadir al carrito:

    1. Crea los Sliders que desees mostrar en Powerstep.

    2. Inserta el embed code de Powerstep en tu popup/página y actívalo cuando se añada un producto al carrito.

Página del carrito #

  1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.

  2. En el menú desplegable Insert into website > Choose your platform, selecciona Mystore y copia el embedcode.

  3. Inserta el embedcode en la plantilla de tu página de carrito. Configura data-products con los IDs de los productos en el carrito.

Salida por intención #

  1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.

  2. Agrega lo siguiente cerca del final de tu layout/plantilla, antes de </body>:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Plantillas iniciales #

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

Código para Slider #

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


.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;
}

@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.