Mystore

Recommendations

Automatiza y personaliza productos en cualquier página de Mystore

Automatiza y personaliza productos en cualquier página en Mystore. Clerk.io ofrece más de 23 tipos diferentes de lógicas de producto, permitiéndote mostrar productos completamente automatizados en cualquier página.

Este artículo explica cómo empezar a usar una Clerk.js setup en Mystore.

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

Configuración del Slider #

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.

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Elements para nuestras Mejores Prácticas.

Crear design #

Recommendations se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics.

Puedes usar el Design Editor para configurarlo visualmente, o usar code designs.

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

Design editor #

  1. Ve a Recommendations > Designs y haz clic en New Design.

  2. Elige Product Slider

  3. De la lista de plantillas de design, elige la que quieras usar como base.

  4. Ponle un nombre y haz clic en Create design.

  5. Realiza los cambios que desees en el design.

Code design #

  1. Ve a Recommendations > Designs y haz clic en New Design.

  2. Elige Other designs > Blank > Code.

  3. Ponle un nombre y haz clic en Create design.

  4. Crea un code design desde cero usando Liquid code.

Si quieres un design inicial, revisa la Slider template más abajo.

Crear Element #

Esto contiene todas las configuraciones que se usan para mostrar las Recommendations y permite incrustarlas 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 Element.

  3. Ponle un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que deseas usar. Por ej., “Home Page / Visitor Recommendations”.

  4. En Element type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver un resumen de todas las product logics aquí.

  5. En Design selecciona el design que creaste del menú desplegable y elige la cantidad 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 en tu sitio web, tienes dos opciones: Injection y Embedded code.

  1. Abre la pestaña Insert into website.

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

  3. Elige la opción que te sea más sencilla de usar.

  4. Para algunas Logics verás el desplegable Choose your platform. Selecciona Mystore en estos casos. Esto rellenará automáticamente el embedcode con los shortcodes correctos de Mystore.

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

Configuración en my.clerk.io #

  1. Ve a Recommendations > Elements.

  2. Selecciona el element que quieres insertar.

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes opciones:

  5. Para embedded code en Mystore, los lugares típicos son:

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

    • Página de producto: establece data-products al ID del producto actual.

    • Página de categoría: establece data-category al ID de la categoría actual.

    • Página del carrito: establece data-products a los IDs de productos del carrito.

Páginas #

A continuación se presentan las páginas específicas donde debes insertar Recommendations y los tipos que debes utilizar para seguir nuestras Mejores Prácticas.

Página principal #

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

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

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

Página de categoría #

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

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

  3. Inserta el embedcode en tu plantilla de página de categoría. Establece data-category al 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. En el desplegable Insert into website > Choose your platform selecciona Mystore para cada uno y copia los embedcodes.

  3. Inserta los embedcodes en tu plantilla de página de producto. Establece data-products al ID del producto actual.

Paso de agregar al carrito #

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

  2. Asígnale el nombre “Add-To-Basket / Others Also Bought”. 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 add-to-basket Powerstep:

    1. Crea los Elements que quieras mostrar en Powerstep.

    2. Inserta el Powerstep embed code 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 Element con la lógica Best Cross-Sell Products.

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

  3. Inserta el embedcode en tu plantilla de página de carrito. Establece data-products a los IDs de productos del carrito.

Exit intent #

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

  2. Añade 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 quieres usar code designs, estas plantillas pueden ayudarte a comenzar.

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.