Shopify

Recommendations

Recommendations

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que te permite mostrar productos completamente automáticos en cualquier página. Este artículo explica cómo empezar cuando usas una configuración Clerk.js en Shopify.

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

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.

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

Crear un Design #

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

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

Design Editor #

  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 para empezar.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza cualquier cambio que desees en el design.

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 code design desde cero utilizando Liquid code.

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

Crear un Element #

Esto contiene todas las configuraciones necesarias para mostrar las Recommendations y permitir que se incrusten en tu web. Sigue estos pasos por cada banner de Recommendations que quieras crear.

  1. Ve a Recommendations > Elements.
  2. Haz clic en New Element.
  3. Asigna un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que desees usar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que deseas usar del desplegable. Puedes ver una visión general de todas las product logics aquí.
  5. En Design selecciona el design creado en el menú desplegable y elige el número de productos a mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

  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 permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que te sea más fácil de utilizar.
  4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona Shopify en estos casos. Esto rellenará automáticamente el embedcode con los shortcodes correctos de Shopify.

Rutas típicas de archivos de tema (pueden variar según el tema):

  • Página principal: Online Store > Themes > Customize > Add Section > Custom Liquid.
  • Página de producto: Sections > main-product.liquid.
  • Página de colección: Sections > main-collection-product-grid.liquid.
  • Página de carrito: Sections > main-cart-footer.liquid.
  • Global (Exit Intent): Layout > theme.liquid (insertar antes de </body>).

Aquí tienes un ejemplo completo de embed code de Recommendations, con un shortcode de Shopify para insertar el ID de producto:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products="[{{ product.id }}]">
</span>

Páginas #

A continuación se indican las páginas específicas donde deberías insertar Recommendations y qué tipos usar, para seguir nuestras Mejores Prácticas. Shopify tiene más de 100 temas, por lo que la localización de archivos puede variar.

Los snippets deben insertarse en los archivos HTML del theme, que normalmente se encuentran en Shopify Admin > Online Store > Themes. Alternativamente, puedes inyectar los resultados si conoces los selectores CSS de los elementos donde quieres insertar resultados.

Homepage #

  1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. En Shopify, ve a Online Store > Themes > Customize
  3. Haz clic en Add Section > Custom Liquid.
  4. Inserta los embedcodes en la caja de Custom Liquid.
  5. Haz clic en Save.

Si quieres mostrar todos los banners uno debajo de otro, inserta todos los embedcodes en la misma caja. Si prefieres separarlos a lo largo de la Home Page, simplemente sigue el proceso anterior varias veces.

Category Page #

  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 Shopify y copia el embedcode.
  3. Ve a los archivos del theme de Shopify y encuentra el archivo que genera tus páginas de Collection. Normalmente es Sections > main-collection-product-grid.liquid.
  4. Inserta el embedcode en algún lugar debajo del título y la descripción. Según tu tema, la ubicación exacta variará.

Full Category Page #

Si quieres que Clerk.io renderice la cuadrícula de productos completa en las páginas de colección (en lugar de solo un slider), usa un snippet basado en categoría y reemplaza el bucle de productos por defecto en tu plantilla de colección.

  1. En my.clerk.io, crea un nuevo Recommendations Element para páginas de categoría.
  2. En Shopify, abre tu plantilla de colección (a menudo Sections > main-collection-product-grid.liquid).
  3. Comenta o elimina el bucle nativo de la cuadrícula de productos.
  4. Inserta este snippet donde debería renderizarse la cuadrícula de productos:
<div id="clerk-category-filters"></div>
<span
  id="clerk-category-products"
  class="clerk"
  data-template="@YOUR_ELEMENT_ID"
  data-category="{{ collection.id }}"
  data-facets-target="#clerk-category-filters"
  data-facets-attributes='["price","categories","vendor"]'
  data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
  data-facets-in-url="true">
</span>
  1. Guarda y prueba una página de colección con parámetros en la URL para confirmar que facetas y paginación funcionan como esperas.

Consulta el artículo a nivel de plataforma para una orientación más profunda de API/lógica: Category page guide.

Product Page #

  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 selecciona Shopify para cada uno y copia los embedcodes.
  3. En los archivos del theme de Shopify, encuentra el archivo que genera tus páginas de producto. Normalmente es Sections > main-product.liquid.
  4. Inserta los embedcodes en algún lugar debajo de la descripción del producto. Según tu tema, la ubicación exacta variará.

Add-To-Basket Step #

  1. En my.clerk.io, crea un Element 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. En los archivos del theme de Shopify, encuentra el archivo que genera tus páginas de producto. Normalmente es Sections > main-product.liquid.
  5. Inserta el embedcode Add-To-Basket al final del archivo y haz clic en Save. Puedes encontrar el embedcode en la sección Starting Templates.

El popup de Add-To-Basket se mostrará ahora cuando un cliente añada un producto a su carrito desde la página de producto.

Si no se muestra, probablemente tu botón de añadir al carrito tenga una clase o ID diferente. Inspecciona tu botón y reemplaza .product-form__cart-submit en el embedcode con la clase o id de tu botón.

Cart Page #

  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 Shopify y copia el embedcode.
  3. Ve a los archivos del theme de Shopify y encuentra el archivo que genera tus páginas de cart. Normalmente es Sections > main-cart-footer.liquid.
  4. Inserta el embedcode en algún lugar debajo de los artículos del carrito y el botón de checkout, por ejemplo justo antes de la etiqueta {% schema %}.
<span
  class="clerk"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Ve a los archivos del theme de Shopify y encuentra el archivo principal del theme. Normalmente es Layout > theme.liquid.
  3. Inserta el embedcode justo antes de la etiqueta de cierre </body>.
  4. Añade el atributo data-exit-intent="true" al embedcode. Aquí tienes un ejemplo de cómo debería verse:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Después de agregar esto, el popup de Exit Intent se mostrará cuando un cliente mueva el mouse sobre la barra de direcciones de su navegador.

Blog Page #

  1. En my.clerk.io, crea un Element con la lógica Products Related To A Page.
  2. En Shopify, ve a Online Store > Blog posts.
  3. Haz clic en el post al que quieres agregar recommendations.
  4. Haz clic en el botón <> en la esquina superior derecha del cuadro de texto para ver el HTML del post.
  5. Inserta el embedcode en la parte del post donde sea natural mostrar las recomendaciones y reemplaza INSERT_PAGE_ID_HERE con el ID del post. Puedes encontrar este ID en la URL del post.

Starting Templates #

Si quieres usar code designs, estas plantillas pueden servirte para empezar.

Slider Code #

Esta plantilla mostrará un slider estándar con varias informaciones 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-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</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-add-to-cart, .clerk-add-to-cart: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%;
    }
}

Add-To-Basket Code #

Este embedcode debe insertarse al final del archivo de la página de producto en el theme. Mostrará un popup con un slider de productos cuando un cliente añada algo al carrito. Puedes personalizarlo como desees.

HTML #

<script>
    document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.product-form__submit';
    const prodPage = (document.querySelector('[data-section-id="product-template"] > div')) ? '[data-section-id="product-template"] > div' : '.product-section > section';
    const clerkPowerstep = document.getElementById('clerk_powerstep');

    document.querySelector(buyBtn).addEventListener('click', open_powerstep);
    
    function open_powerstep() {   
        Clerk('content', '.clerk-powerstep-recommendations');

        clerkPowerstep.style.display = 'block';
        clerkPowerstep.style.padding = '5px 15px';
        clerkPowerstep.classList.toggle('animate_top');

        setTimeout(function(){
            
            document.querySelector(prodPage).addEventListener('click', close_powerstep);
            document.getElementsByTagName('header')[0].addEventListener( 'click', close_powerstep );
            
        }, 500);
    }

    });

    function close_powerstep() {
        var clerkPowerstep = document.getElementById('clerk_powerstep');
        //window.location.reload();
        clerkPowerstep.style.display = 'none';    
    }
</script>
<div style="display: none;" id="clerk_powerstep">
    <span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
    <div class="clerk_powerstep_wrap">
        <div class="clerk_powerstep_header">
        <h2>You added <b><u>{{ product.title }}</u></b> to your cart.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="You added <b><u>{{ product.title }}</u></b> to your cart.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continue to Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continue Shopping</button>
        </div>
        <br>
        <span class="clerk-powerstep-recommendations" 
            data-template="@add-to-basket-others-also-bought" 
            data-products="[{{product.id}}]">
        </span>
    </div>
</div>

<style>
    @keyframes top {
        from {
        top: -100%;
        }
        to {
        top: 50%;
        }
    }

    .animate_top {
        animation: top 100 ease-in-out;
        top: 50% !important;
    }
    #clerk_powerstep {
        width: clamp(45ch, 50%, 100ch) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0px !important;
        border: 3px solid #888 !important;
        border-radius: 2px !important;
        position: fixed;
        top: -100%;
        z-index: 999;
        display: none;
        background-color: white;
        box-shadow: 0px 8px 40px 0px rgba(0,0,60,0.15);
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
    }

    #clerk_powerstep h2 {
        text-align: center;
    }

    .clerk_powerstep_image {
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .clerk_powerstep_image img {
        object-fit: contain;
        max-height: 240px;
        height: 25vh;
        margin: auto;
    }

    .clerk-popup-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
        font-family: Arial;
        font-size: 32px;
        line-height: 1;
        color: gray;
        z-index: 2;
        padding: 3px;
    }
    .clerk_powerstep_header {
        position: relative;
    }

    .clerk_powerstep_wrap {
        position: relative;
        overflow-y: scroll;
        overflow-y: overlay;
        max-height: 80vh;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .clerk_powerstep_wrap::-webkit-scrollbar {
      display: none;
    }
    .clerk_powerstep_actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .clerk_powerstep_actions button {
        margin: 0 0 10px 0;
    }

    @media only screen and (max-width: 800px){
        .clerk_powerstep_actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
</style>

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