Shopware 6

Recommendations

Automatiza y personaliza productos en cualquier página en Shopware 6.

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 a utilizar una configuración de Clerk.js en Shopware 6.

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 tienes 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 un Design #

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

Un design puede reutilizarse en cualquier número de Elements 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 con la que quieras empezar.
  4. Ponle un nombre y haz clic en Create design.
  5. Haz los cambios que quieras al diseño.

Código de Diseño #

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

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

Crear un Element #

Esto contiene todas las configuraciones usadas para mostrar Recommendations, y permite incrustarlo en tu sitio web. Sigue estos pasos para cada banner de Recommendations que quieras 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 quieras usar. Ej., “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que quieres usar desde el desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
  5. En Design selecciona el diseño que creaste en el desplegable y elige el número de productos que quieres mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

Para añadir Recommendations de Clerk en tu sitio web tienes dos opciones: Inyección y código embebido.

  1. Abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar la inyección te permite insertar el código usando un selector de CSS.
    • Usar código embebido te permite insertar el código en tu web manualmente.
  3. Elige la opción que te sea más fácil de usar.
  4. Para algunas Logics verás el desplegable Choose your platform. Selecciona Shopware 6 en esos casos. Esto rellenará el embedcode con los shortcodes correctos de Shopware 6.

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

Configuración del Plugin #

Utiliza el plugin de Clerk para Shopware 6 para activar los elements en las páginas clave:

  1. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  2. Selecciona el Sales Channel correcto.
  3. Activa por tipo de página y guarda:
    • Product Page Settings
    • Category Settings
    • Cart Settings

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:
    • Usar la inyección inserta el código usando un selector de CSS.
    • Usar código embebido inserta el código manualmente, por ejemplo via Content > Shopping Experiences añadiendo un bloque HTML puro al layout y pegando el embed code.

Algunos embed codes requieren variables como ID de producto o categoría. En estos casos se rellenarán automáticamente en el embed code, pero comprueba que coincidan con tus variables de Shopware 6.

Páginas #

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

Página de inicio #

  1. En my.clerk.io, crea 3 Elements con las siguientes logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los embedcodes en tu plantilla o bloque de página de inicio.

Página de categoría #

  1. En my.clerk.io, crea un Element con la logic Bestsellers In Category.
  2. En el desplegable Insert into website > Choose your platform, selecciona Shopware 6 y copia el embedcode.
  3. Inserta el embedcode en tu plantilla de página de categoría o usa los ajustes del plugin para habilitarlo.

Página de producto #

  1. En my.clerk.io, crea 2 Elements con las siguientes logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. En el desplegable Insert into website > Choose your platform selecciona Shopware 6 para cada uno y copia los embedcodes.
  3. Inserta los embedcodes en tu plantilla de página de producto o usa los ajustes del plugin para habilitarlos.

Paso de Añadir al carrito #

  1. En my.clerk.io, crea un Element con la logic Best Cross-Sell Products.
  2. Ponle 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 add-to-basket utilizando el plugin Shopware 6:
  5. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  6. Bajo Powerstep Settings, activa y elige Página o Popup, selecciona el contenido, luego Save.

Página del carrito #

  1. En my.clerk.io, crea un Element con la logic Best Cross-Sell Products.
  2. En el desplegable Insert into website > Choose your platform, selecciona Shopware 6, y copia el embedcode.
  3. Inserta el embedcode en la plantilla de tu página de carrito o usa los ajustes del plugin para habilitarlo.

Exit Intent #

  1. En my.clerk.io, crea un Element con la logic Visitor Recommendations.
  2. Actívalo a través del plugin:
  3. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  4. Bajo Exit Intent Settings pon Status en Enabled y asigna el nombre de contenido. Guarda.

Plantillas de Inicio #

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

Código del Slider #

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

    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.