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

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

Configuración del Slider #

Recommendations se crea con Elements que hacen referencia a un Design. A continuación se muestra 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 según 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 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 elementos 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 cuál quieres empezar.
  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 código Liquid.

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

Crear Contenido #

Aquí están todos los ajustes utilizados para mostrar las Recommendations y hacerlas embebibles 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 Content.
  3. Asígnale un nombre descriptivo. Recomendamos nombrarlo según la página y lógica que desees utilizar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de productos aquí.
  5. En Design selecciona el diseño que creaste desde el menú desplegable y elige la cantidad de productos que quieres 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:
    • Usando inyección te permite insertar el código usando un selector CSS.
    • Usando código incrustado permite insertar el código manualmente en tu web.
  3. Elige la opción que te resulte más sencilla.
  4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona Shopware 6 en estos casos. Esto rellenará automáticamente 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 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. Habilita según el 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 contenido que desees insertar.
  3. Abre la pestaña Insert into website.
  4. Elige una de las siguientes opciones:
    • Usando inyección se inserta el código usando un selector CSS.
    • Usando código incrustado se inserta el código manualmente, por ejemplo, a través de Content > Shopping Experiences agregando un bloque HTML sin procesar al diseño y pegando el código de inserción.

Algunos códigos de inserción requieren variables como el ID de producto o de categoría. En estos casos, se rellenarán en el embed code, pero verifica que coincidan con tus variables de Shopware 6.

Páginas #

A continuación, las páginas específicas en las que debes insertar Recommendations, y qué tipos debes usar, 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 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 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 usa 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 usa 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. En Powerstep Settings, habilita, elige Página o Popup, selecciona el contenido y luego Save.

Página del 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 del carrito o usa la configuración del plugin para habilitarlo.

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Habilítalo vía el plugin:
  3. Ve a Settings > System > Plugins y abre Clerk.io > Config.
  4. En Exit Intent Settings configura Status como Enabled y pon el nombre del contenido. Guarda.

Plantillas Iniciales #

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

Código para Slider #

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