Shopware 6

Recommendations

Automatiza y personaliza productos en cualquier página de 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 comenzar cuando usas una configuración de Clerk.js en Shopware 6.

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

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.

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

Crear Design #

Por defecto, las Recommendations se muestran como un slider. Esto permite a los clientes ver más productos con menos clics. Puedes configurarlo visualmente usando el Editor de Design, o usar designs por código.

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

Editor de Design #

  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 para empezar.
  4. Asígnale un nombre y haz clic en Create design.
  5. Realiza los cambios que desees en el design.

Design por 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 design por código desde cero usando código Liquid.

Si deseas un design inicial, revisa la plantilla Slider más abajo.

Crear Element #

Esto contiene todas las configuraciones utilizadas para mostrar las Recommendations y hacerlas insertables 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. 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”.
  4. En Element type, selecciona la lógica de producto que quieras usar desde el menú desplegable. Puedes ver una vista general de todas las lógicas de productos aquí.
  5. En Design selecciona el design que creaste desde 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.

Añadir al Sitio Web #

Para agregar Recommendations de Clerk 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 resulte más fácil de usar.
  4. Para algunas Logics, verás el menú desplegable Choose your platform. En estos casos, selecciona Shopware 6. Esto rellenará automáticamente el embedcode con los shortcodes correctos para 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 Clerk de Shopware 6 para habilitar elementos en 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 quieras insertar.
  3. Abre la pestaña Insert into website.
  4. Elige una de las siguientes opciones:
    • Usar injection inserta el código usando un selector CSS.
    • Usar embedded code inserta el código manualmente, por ejemplo, a través de Content > Shopping Experiences añadiendo un bloque HTML sin formato al layout y pegando el embed code.

Algunos embed codes requieren variables como los IDs de producto o de categoría. En estos casos, los datos se rellenarán en el embed code, pero verifica que coincidan con tus variables de Shopware 6.

Páginas #

A continuación encontrarás las páginas específicas donde debes insertar Recommendations y qué tipos 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 embedcodes en la plantilla/bloque de tu 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. En el menú 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 utiliza la configuración del plugin para habilitarlo.

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 menú desplegable Insert into website > Choose your platform para cada uno, selecciona Shopware 6 y copia los embedcodes.
  3. Inserta los embedcodes en tu plantilla de página de producto o utiliza la configuración del plugin para habilitarlos.

Paso Añadir 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”. 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 add-to-basket Powerstep usando el plugin de Shopware 6:
  5. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  6. Bajo Powerstep Settings, habilita y elige Página o Popup, selecciona contenido y luego Save.

Página de Carrito #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. En el menú 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 carrito o utiliza la configuración del plugin para habilitarlo.

Exit Intent #

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

Plantillas Iniciales #

Si deseas usar designs por código, estas plantillas pueden ayudarte a comenzar.

Código de Slider #

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

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