Shopify

Recommendations

Recommendations

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 cuando usas una configuración Clerk.js en Shopify.

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

Configuración del Slider #

Recommendations se crean con Elements que hacen referencia a un Design. A continuación, se explica la guía básica para configurar un Element.

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

Crear Design #

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

Un Design puede reutilizarse para cualquier cantidad de elementos de Recommendations que crees.

Editor de Design #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Product Slider
  3. De la lista de plantillas de design, selecciona la que quieras usar como base.
  4. Asígnale un nombre y haz clic en Create design.
  5. Realiza cualquier cambio que desees al design.

Code Design #

  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 code design desde cero usando código Liquid.

Si deseas un design de inicio, revisa la plantilla de slider más abajo.

Crear Element #

Esto incluye todas las configuraciones necesarias para mostrar las Recommendations y permite que sean 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 Element.
  3. Asígnale un nombre descriptivo. Recomendamos nombrarlo en base a la página y la lógica que quieras usar. Por ejemplo: “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que quieras usar desde el desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el design que creaste desde el desplegable y selecciona la cantidad de productos que deseas mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

  1. Abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar injection permite insertar el código utilizando 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 usar.
  4. Para algunas Logics verás el desplegable Choose your platform. Selecciona Shopify en estos casos. Esto rellenará el embedcode con los shortcodes correctos para Shopify.

Rutas habituales de archivos de theme (pueden variar según el theme):

  • Página de inicio: 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 del 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, usando 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 #

Insert Code Example
A continuación, se presentan las páginas específicas donde deberías insertar Recommendations y el tipo que se recomienda usar, para seguir nuestras Mejores Prácticas. Shopify tiene más de 100 themes, por lo que las ubicaciones de los archivos pueden no ser exactas.

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

Página de inicio #

  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 casilla Custom Liquid.
  5. Haz clic en Save.

Si deseas mostrar todos los banners uno debajo del otro, inserta todos los embedcodes en la misma casilla. En caso de que quieras distribuirlos en la Home Page, solo tienes que seguir este proceso varias veces.

Página de categoría #

  1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
  2. En el desplegable Insert into website > Choose your platform, selecciona Shopify y copia el embedcode.
  3. Ve a los archivos del theme en Shopify y localiza el archivo que genera tus páginas de Collection. Por lo general, es Sections > main-collection-product-grid.liquid.
  4. Inserta el embedcode debajo del título y la descripción. Dependiendo del theme, esta ubicación puede variar.

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 desplegable Insert into website > Choose your platform, selecciona Shopify para cada uno y copia los embedcodes.
  3. En los archivos del theme de Shopify, localiza el archivo que genera tus páginas de producto; generalmente es Sections > main-product.liquid.
  4. Inserta los embedcodes debajo de la descripción del producto. Dependiendo del theme, esta ubicación puede variar.

Paso de 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. En los archivos del theme de Shopify, encuentra el archivo que genera tus páginas de producto. Por lo general, es Sections > main-product.liquid.
  5. Inserta el embedcode de 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 aparecerá ahora cuando un cliente añada un producto al carrito desde la página de producto.

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

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 Shopify y copia el embedcode.
  3. Ve a los archivos del theme de Shopify y localiza el archivo que genera tus páginas de carrito. Por lo general, es Sections > main-cart-footer.liquid.
  4. Inserta el embedcode debajo de los elementos del carrito y el botón de checkout, por ejemplo, justo antes de la etiqueta {% schema %}.

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Ve a los archivos del theme en Shopify y localiza el archivo principal del theme. Generalmente 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. Así es como debería verse:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Después de añadir esto, el popup de Exit Intent aparecerá cuando un cliente mueva el ratón sobre la barra de direcciones de su navegador.

Página de blog #

  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 quieras añadir recomendaciones.
  4. Haz clic en el botón <> en la esquina superior derecha del cuadro de texto para mostrar el HTML del post.
  5. Inserta el embedcode en la parte del post donde sea natural mostrar recomendaciones, y reemplaza INSERT_PAGE_ID_HERE con el ID de la página del post. Puedes encontrar este ID en la URL del post.

Plantillas Iniciales #

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

Código de Slider #

Esta plantilla renderizará 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%;
    }
}

Código Add-To-Basket #

Este embedcode debe insertarse al final del archivo de la página de producto del theme. Mostrará un popup con un slider de productos cuando un cliente añada un producto al carrito. Puede personalizarse según tus necesidades.

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.