Shopify

Recommendations

Recomendaciones

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar a usar una configuración de Clerk.js en Shopify.

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

Configuración de Contenido #

Las recomendaciones se crean con bloques de Contenido que hacen referencia a un Diseño. A continuación se muestra la guía básica para configurar un bloque de Contenido.

Seguir los pasos en my.clerk.io > Configuración > Guías de Configuración creará automáticamente los bloques de Contenido para nuestras Mejores Prácticas.

Crear Diseño #

Las recomendaciones se muestran como un control deslizante por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.

Un diseño puede reutilizarse para cualquier número de Contenido de Recomendaciones que crees.

Editor de Diseño #

  1. Ve a Recomendaciones > Diseños y haz clic en Nuevo Diseño.
  2. Elige Control deslizante de Productos
  3. De la lista de plantillas de diseño, elige la que deseas usar.
  4. Dale un nombre y haz clic en Crear diseño.
  5. Realiza los cambios que desees en el diseño.

Diseño de Código #

  1. Ve a Recomendaciones > Diseños y haz clic en Nuevo Diseño.
  2. Elige Otros diseños > En blanco > Código.
  3. Dale un nombre y haz clic en Crear diseño.
  4. Crea un diseño de código desde cero usando código Liquid.

Si deseas un diseño inicial, consulta la plantilla de Control deslizante más abajo.

Crear Contenido #

Esto contiene todas las configuraciones utilizadas para mostrar las Recomendaciones y hacerlas embebibles en tu sitio web. Sigue estos pasos para cada banner de Recomendaciones que desees crear.

  1. Ve a Recomendaciones > Contenido.
  2. Haz clic en Nuevo Contenido.
  3. Dale un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que deseas usar. Por ejemplo, “Página de Inicio / Recomendaciones para Visitantes”.
  4. En Tipo de contenido, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de productos aquí.
  5. En Diseño selecciona el diseño que creaste del menú desplegable y elige la cantidad de productos que deseas mostrar.
  6. Haz clic en Guardar en la parte superior de la pantalla.

Agregar al Sitio Web #

  1. Abre la pestaña Insertar en el sitio web.
  2. Aquí tienes dos 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.
  3. Elige la opción que sea más fácil para ti.
  4. Para algunas Lógicas verás el menú desplegable Elige tu plataforma. Selecciona Shopify en estos casos. Esto prellenará el código de inserción con los códigos cortos de Shopify correctos.

Aquí tienes un ejemplo completo de código de inserción de Recomendaciones, con un código corto de Shopify para insertar el ID del producto:

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

Páginas #

Insertar Ejemplo de Código
A continuación se muestran las páginas específicas donde debes insertar Recomendaciones, y qué tipos debes usar, para seguir nuestras Mejores Prácticas. Shopify tiene más de 100 temas, por lo que las ubicaciones de los archivos pueden no ser siempre precisas.

Los fragmentos deben insertarse en los archivos HTML del tema, que normalmente se encuentran en Administración de Shopify > Tienda en Línea > Temas. Alternativamente, puedes inyectar resultados si conoces los selectores CSS para los elementos en los que deseas insertar resultados.

Página de Inicio #

  1. En my.clerk.io, crea 3 bloques de Contenido con las siguientes lógicas:
    • Recomendaciones para Visitantes
    • Más Vendidos
    • Productos Destacados
  2. En Shopify, ve a Tienda en Línea > Temas > Personalizar
  3. Haz clic en Agregar Sección > Liquid Personalizado.
  4. Inserta los códigos de inserción en el cuadro de Liquid Personalizado.
  5. Haz clic en Guardar.

Si deseas mostrar todos los banners uno encima del otro, inserta todos los códigos de inserción en el mismo cuadro. En caso de que desees dividirlos a través de la Página de Inicio, simplemente sigue el proceso anterior varias veces.

Página de Categoría #

  1. En my.clerk.io, crea un bloque de Contenido con la lógica Más Vendidos en Categoría.
  2. En el menú desplegable Insertar en el sitio web > Elige tu plataforma, selecciona Shopify, y copia el código de inserción.
  3. Ve a los archivos del tema de Shopify y encuentra el archivo que genera tus páginas de Colección. Esto suele ser Secciones > main-collection-product-grid.liquid.
  4. Inserta el código de inserción 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 bloques de Contenido con las siguientes lógicas:
    • Mejores Productos Alternativos
    • Mejores Productos Cruzados
  2. En el menú desplegable Insertar en el sitio web > Elige tu plataforma, selecciona Shopify para cada uno de ellos y copia los códigos de inserción.
  3. En los archivos del tema de Shopify, encuentra el archivo que genera tus páginas de producto. Esto suele ser Secciones > main-product.liquid.
  4. Inserta los códigos de inserción en algún lugar debajo de la descripción del producto. Dependiendo de tu tema, esta ubicación variará.

Paso de Agregar al Carrito #

  1. En my.clerk.io, crea un bloque de Contenido con la lógica Mejores Productos Cruzados.
  2. Dale el nombre “Agregar al Carrito / Otros También Compraron”. Esto es importante para que el código de inserción funcione correctamente.
  3. Haz clic en Guardar 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. Esto suele ser Secciones > main-product.liquid.
  5. Inserta el código de inserción de Agregar al Carrito en la parte inferior del archivo y haz clic en Guardar. Puedes encontrar el código de inserción en la sección de Plantillas Iniciales.

El popup de Agregar al Carrito ahora se mostrará cuando un cliente agregue un producto a su carrito desde la página del producto.

Si no se muestra, es probable que tu botón de agregar al carrito tenga una clase o ID diferente. Inspecciona tu botón y reemplaza .product-form__cart-submit en el código de inserción con la clase/id de tu botón.

Página del Carrito #

  1. En my.clerk.io, crea un bloque de Contenido con la lógica Mejores Productos Cruzados.
  2. En el menú desplegable Insertar en el sitio web > Elige tu plataforma, selecciona Shopify, y copia el código de inserción.
  3. Ve a los archivos del tema de Shopify y encuentra el archivo que genera tus páginas de Carrito. Esto suele ser Secciones > main-cart-footer.liquid.
  4. Inserta el código de inserción 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 %}.

Intención de Salida #

  1. En my.clerk.io, crea un bloque de Contenido con la lógica Recomendaciones para Visitantes.
  2. Ve a los archivos del tema de Shopify y encuentra el archivo principal del tema. Esto suele ser Diseño > theme.liquid.
  3. Inserta el código de inserción justo antes de la etiqueta de cierre </body>.
  4. Agrega el atributo data-exit-intent="true" al código de inserción. 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 Intención de Salida se mostrará cuando un cliente pase el mouse sobre la barra de direcciones de su navegador.

Página del Blog #

  1. En my.clerk.io, crea un bloque de Contenido con la lógica Productos Relacionados con una Página.
  2. En Shopify, ve a Tienda en Línea > Publicaciones del Blog.
  3. Haz clic en la publicación a la que deseas agregar recomendaciones.
  4. Haz clic en el botón <> en la esquina superior derecha del cuadro de texto para ver el HTML de la publicación.
  5. Inserta el código de inserción en una parte de la publicación donde sea natural mostrar recomendaciones, y reemplaza INSERT_PAGE_ID_HERE con el ID de la página de la publicación. Puedes encontrar este ID en la URL de la publicación.

Plantillas Iniciales #

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

Código del Control Deslizante #

Esta plantilla renderizará un control deslizante estándar con varias informaciones de productos, 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">En Oferta</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">Agotado</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">Agregar al Carrito</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 de Agregar al Carrito #

Este código de inserción debe insertarse en la parte inferior del archivo de tema de la página de producto. Mostrará un popup con un control deslizante de productos cuando un cliente agregue un producto a su 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>Agregaste <b><u>{{ product.title }}</u></b> a tu carrito.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="Agregaste <b><u>{{ product.title }}</u></b> a tu carrito.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continuar a la Compra</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continuar Comprando</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 y 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.