Lightspeed

Recommendations

Automatiza y personaliza productos en cualquier página de Lightspeed.

Crear diseño #

Recommendations se muestran como un slider por defecto. Puedes utilizar el Editor de diseños para configurarlo visualmente, o utilizar diseños por código.

Editor de diseños #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Product Slider
Elige una plantilla para empezar, asígnale un nombre y haz clic en Create design.
Ajusta el diseño según sea necesario.

Diseño por código #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Other designs > Blank > With code.
Asígnale un nombre y haz clic en Create design.
Crea un diseño por código desde cero utilizando código Liquid.

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

Crear contenido #

Esto contiene todos los ajustes utilizados para mostrar el slider de Recommendations y hacerlo insertable.

Ve a Recommendations > Slider.
Haz clic en New Slider.
Ponle un nombre descriptivo, por ejemplo, “Inicio / Visitante”.
En Slider type, elige la lógica de producto a utilizar.
En Design, selecciona el diseño creado y elige el número de productos.
Haz clic en Save.

Añadir al sitio web #

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

Para acceder a los archivos del tema en Lightspeed, haz clic en “Design” en el menú de la izquierda, luego en “Code bewerken” en el menú desplegable Geavanceerd.

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

Configuración del plugin #

No disponible para Lightspeed. Utiliza la siguiente configuración de my.clerk.io.

Configuración de my.clerk.io #

Ve a Recommendations > Slider.
Selecciona el slider que deseas insertar.
Abre la pestaña Insert into website.
Elige una de las siguientes opciones:
- Usar inyección te permite insertar el código usando un selector CSS.
- Usar código embebido te permite insertar el código manualmente en tu sitio web.
Para el código embebido en Lightspeed, las ubicaciones típicas son:
- Página de inicio: snippets/homepage.rain.
- Página de producto: product.rain y configura data-products a [{{product.id}}].
- Página de categoría: collection.rain y configura data-category en {{ collection.category_id }}.
- Página de marca: en collection.rain, envuelve la lógica de marcas en un {% if collection.category_id %} ... {% else %} ... {% endif %} para diferenciar.
- Página del carrito: fixed.rain con un IF alrededor del código embebido: {% if 'cart' in template %} … {% endif %} y configura data-products en:
```
data-products="[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]"
```

Powerstep #

Primero, crea tu diseño y slider de Recommendations en my.clerk.io que deseas añadir al powerstep.
Busca el archivo snippet del powerstep en la sección Snippets de los archivos de tu tema, popup-buy.rain en este ejemplo. Pega aquí el código embebido generado desde tu Slider:

<div style="display: none;" id="clerk_powerstep">
  <div class="clerk_powerstep_wrap">
    <span class="clerk-powerstep-recommendations"
      data-template="@power-step-others-also-bought"
      data-products="[{{product.id}}]">
    </span>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    var buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.productCartButton';
    document.querySelector(buyBtn).addEventListener('click', function(){
      Clerk('content', '.clerk-powerstep-recommendations');
      document.getElementById('clerk_powerstep').style.display = 'block';
    });
  });
</script>

Algunos códigos embebidos requieren variables como los IDs de producto o categoría. En estos casos, se rellenarán en el código embebido, pero asegúrate de verificar que sean las variables correctas a referenciar dentro de tu portal Lightspeed.

Página del carrito #

En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.
En el menú desplegable Insert into website > Choose your platform, selecciona Lightspeed y copia el embedcode.
Inserta el embedcode en tu plantilla de la página del carrito (por ejemplo, fixed.rain con un IF alrededor del código embebido: {% if 'cart' in template %} … {% endif %}). Configura data-products con los IDs de productos del carrito.

Exit Intent #

En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.
Exit Intent se añade a tu archivo principal del tema, probablemente custom.rain.
Coloca el código embebido del Slider generado en my.clerk.io justo antes de la etiqueta de cierre . Si tienes Live Search implementado, el código de Exit Intent debe colocarse justo después.
Agrega data-exit-intent="true" al embedcode.

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Plantillas iniciales #

Si deseas utilizar diseños por código, estas plantillas pueden servirte de punto de partida.

Código del Slider #

Esta plantilla renderizará un slider estándar con información común del 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;
}


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