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 comenzar a usar una Clerk.js setup en Shopify.

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

Configuración del Slider #

Recommendations se crean con Sliders que hacen referencia a un Design. A continuación te mostramos la guía básica para configurar un Slider.

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

Crear Design #

Por defecto, Recommendations se muestran como un slider. Esto permite que los clientes vean más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente, o usar code designs.

Un design puede reutilizarse en cualquier cantidad de sliders 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 deseas para empezar.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza los cambios que quieras en el diseño.

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 inicial, revisa la plantilla Slider más abajo.

Crear Contenido #

Esto contiene todos los ajustes usados para mostrar las Recommendations y hacerlas embebibles en tu sitio web. Sigue estos pasos para cada banner de Recommendations que desees crear.

  1. Ve a Recommendations > Sliders.
  2. Haz clic en New Content.
  3. Asígnale un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
  5. En Design selecciona el diseño que creaste del menú y elige el número de productos que deseas 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 te permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que te resulte más fácil.
  4. Para algunas Lógicas 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 temas (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 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, con un shortcode de Shopify para insertar el ID del producto:

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

Páginas #

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

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

Página principal #

  1. En my.clerk.io, crea 3 Sliders 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 de 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. Si quieres dividirlos por la página de inicio, simplemente repite el proceso anterior varias veces.

Página de categoría #

  1. En my.clerk.io, crea un Slider 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 tema de Shopify y encuentra el archivo que genera tus páginas de Colección. Normalmente es Sections > main-collection-product-grid.liquid.
  4. Inserta el embedcode en algún lugar debajo del título y la descripción. Dependiendo de tu tema, esta ubicación variará.

Página de producto #

  1. En my.clerk.io, crea 2 Sliders 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 una y copia los embedcodes.
  3. En los archivos del tema 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. Dependiendo de tu tema, esta ubicación variará.

Paso “Agregar al carrito” #

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

El popup Add-To-Basket ahora se mostrará cuando un cliente agregue un producto al carrito desde la página de producto.

Si no es así, probablemente es porque tu botón de agregar al carrito tiene una clase o ID diferente. Inspecciona tu botón y reemplaza .product-form__cart-submit en el embedcode por la clase/ID de tu botón.

Página del carrito #

  1. En my.clerk.io, crea un Slider 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 tema de Shopify y encuentra el archivo que genera tus páginas de Carrito. 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 pago, por ejemplo justo antes de la etiqueta {% schema %}.

Exit Intent #

  1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.
  2. Ve a los archivos del tema de Shopify y encuentra el archivo principal del tema. 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. Este es 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 aparecerá cuando un cliente mueva el mouse sobre la barra de direcciones de su navegador.

Página del Blog #

  1. En my.clerk.io, crea un Slider 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 recuadro de texto para ver el HTML del post.
  5. Inserta el embedcode en una parte del post donde sea natural mostrar recomendaciones, y reemplaza INSERT_PAGE_ID_HERE por 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.

Slider Code #

Esta plantilla renderiza un slider estándar con diversa información de producto, que puedes adaptar 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-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 del tema. Mostrará un popup con un slider de productos cuando un cliente agregue un producto al carrito. Puede personalizarse según sea necesario.

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.