Lightspeed

Recommendations

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

Crear diseño #

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

Editor de diseño #

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

Diseño de código #

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

Si deseas un diseño inicial, revisa la plantilla de slider más abajo.

Crear contenido #

Esto contiene todos los ajustes usados para mostrar el slider de Recommendations y hacerlo embebible.

  1. Ve a Recommendations > Element.
  2. Haz clic en New Element.
  3. Asígnale un nombre descriptivo, por ejemplo, “Inicio / Visitante”.
  4. En Element type, selecciona la lógica de producto a utilizar.
  5. En Design, selecciona el diseño creado y elige la cantidad de productos.
  6. Haz clic en Save.

Añadir al sitio web #

Para agregar Clerk Recommendations en tu sitio web, tienes dos opciones: Injection y Embedded code.

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

Para añadir 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 configuración de my.clerk.io a continuación.

Configuración de my.clerk.io #

  1. Ve a Recommendations > Element.

  2. Selecciona el elemento que deseas insertar.

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes 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.

  5. Para embedded code en Lightspeed, las ubicaciones típicas son:

    • Página de inicio: snippets/homepage.rain.
    • Página de producto: product.rain y establece data-products en [{{product.id}}].
    • Página de categoría: collection.rain y establece data-category en {{ collection.category_id }}.
    • Página de marca: en collection.rain, envuelve la lógica de marca 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 establece 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 Recommendations Design y Element en my.clerk.io que desees agregar al powerstep.

  • Busca el archivo de snippet de powerstep en la sección Snippets de tus archivos de tema, popup-buy.rain en este ejemplo. Pega el código embebido generado por tu Element aquí:

<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 ID de producto o de categoría. En estos casos, se rellenarán en el código embebido, pero asegúrate de verificar que sean las variables correctas para referenciar en tu portal de Lightspeed.

Página del carrito #

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

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Exit Intent se agrega al archivo principal de tu tema, probablemente custom.rain.
  3. Coloca el código embebido 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 de esto.
  4. Añade data-exit-intent="true" al embedcode.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Plantillas iniciales #

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

Código de slider #

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


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