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 producto, lo que te permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo empezar a usar una configuración de Clerk.js en Shopware 6.

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

Configuración del Slider #

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

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

Crear Diseño #

Las Recommendations se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Editor de Diseños para configurarlo visualmente o usar code designs.

Un diseño se puede reutilizar para cualquier cantidad de sliders de Recommendations que crees.

Editor de Diseños #

  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 como base.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza los cambios que desees en el diseño.

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

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

Crear Contenido #

Aquí están todas las configuraciones para mostrar las Recommendations y hacerlas incrustables en tu sitio web. Sigue estos pasos para cada banner de Recommendations que deseas crear.

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

Agregar al sitio web #

Para agregar Clerk Recommendations en 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 desplegable Choose your platform. Selecciona Shopware 6 en esos casos. Así se rellenará automáticamente el embedcode con los shortcodes correctos de Shopware 6.

Para agregar 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 sliders 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 > Sliders.
  2. Selecciona el contenido que desees insertar.
  3. Abre la pestaña Insert into website.
  4. Elige una de las siguientes opciones:
    • Usar inyección inserta el código usando un selector CSS.
    • Usar código incrustado inserta el código manualmente, por ejemplo mediante Content > Shopping Experiences añadiendo un bloque Raw HTML al layout y pegando el embed code.

Algunos códigos embed requieren variables como el ID del producto o la categoría. En estos casos se rellenarán automáticamente en el código, pero revisa que coincidan con las variables de tu Shopware 6.

Páginas #

A continuación, se muestran las páginas específicas donde deberías insertar Recommendations y qué tipos utilizar para seguir nuestras Mejores Prácticas.

Página de inicio #

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

Página de categoría #

  1. En my.clerk.io, crea un Slider con la lógica 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 la plantilla de tu página de categoría o usa las configuraciones del plugin para habilitarlo.

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

Paso de Añadir al carrito #

  1. En my.clerk.io, crea un Slider con la lógica 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 usando el plugin de Shopware 6:
  5. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  6. Bajo Powerstep Settings, actívalo y elige Página o Popup, selecciona el contenido y luego Save.

Página del carrito #

  1. En my.clerk.io, crea un Slider con la lógica 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 del carrito o usa la configuración del plugin para habilitarlo.

Exit Intent #

  1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.
  2. Actívalo mediante el plugin:
  3. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  4. Bajo Exit Intent Settings establece Status en Enabled e ingresa el nombre del contenido. Guarda.

Plantillas de inicio #

Si quieres usar code designs, estas plantillas pueden ayudarte a empezar.

Código de slider #

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