Shoporama

Recommendations

Automatiza y personaliza productos en cualquier página de Shoporama

Automatiza y personaliza productos en cualquier página de Shoporama. Clerk.io ofrece más de 23 tipos diferentes de lógicas de producto, lo que hace posible mostrar productos completamente automatizados en cualquier página.

Este artículo explica cómo empezar a utilizar una configuración de Clerk.js en Shoporama.

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

Configuración del Slider #

Las Recommendations se crean con Sliders que hacen referencia a un Diseño. A continuación, se muestra 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 diseño #

Las Recommendations se muestran como un slider 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 por código.

Un diseño puede reutilizarse para cualquier cantidad de sliders de Recommendations que crees.

Editor de diseño #

  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 quieres utilizar como base.

  4. Asígnale un nombre y haz clic en Create design.

  5. Realiza los cambios que desees en el diseño.

Diseño por código #

  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 diseño por código desde cero usando código Liquid.

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

Crear contenido #

Esto contiene todos los ajustes usados para mostrar las Recommendations y hacer que se puedan incrustar en tu sitio web.

Sigue estos pasos para cada banner de Recommendations que quieras 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 deseas usar. Por ejemplo, “Home Page / Visitor Recommendations”.

  4. En Content type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.

  5. En Design selecciona el diseño que creaste del menú desplegable y elige la cantidad de productos que deseas mostrar.

  6. Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

Para añadir Clerk Recommendations en tu sitio web, tienes dos opciones: Inyección y Código embebido.

  1. Abre la pestaña Insert into website.

  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 te resulte más fácil de usar.

  4. Para algunas Lógicas, verás el menú desplegable Choose your platform. Selecciona Shoporama en estos casos. Esto rellenará automáticamente el embedcode con los shortcodes correctos de Shoporama.

Para añadir detalles de sincronización o iniciar una sincronización, ve a my.clerk.io > Data > Configuration.

Configuración de my.clerk.io #

  1. Ve a Recommendations > Sliders.

  2. Selecciona el contenido que deseas insertar.

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes opciones:

  5. Para el código embebido en Shoporama, las ubicaciones y nombres de archivo típicos son:

    • Página de producto: Settings > … > Temaer > product.html — establece data-products en [<{$product->getProductId()}>].

    • Página de categoría: Settings > … > Temaer > category.html — establece data-category en <{$category->getCategoryId()}>.

    • Página de carrito: Settings > … > Temaer > basket.html — establece data-products en [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

    • Página principal: insértalo en la plantilla de inicio o bloque CMS según corresponda.

    • Global (Exit Intent): Settings > … > Temaer > global.html (insertar antes de </body>).

Páginas #

A continuación se indican las páginas específicas en las que deberías insertar Recommendations y los tipos que debes usar para seguir nuestras Mejores Prácticas.

Página principal #

  1. En my.clerk.io, crea 3 Sliders con las siguientes lógicas:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Inserta los embedcodes en la plantilla de inicio o bloque CMS.

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 Shoporama y copia el embedcode.

  3. Ve a los archivos del tema de Shoporama y encuentra el archivo que genera tus páginas de Categoría. Generalmente es Settings > … > Temaer > category.html.

  4. Inserta el embedcode en algún lugar debajo del título y la descripción. Establece data-category en <{$category->getCategoryId()}>.

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 Shoporama para cada uno y copia los embedcodes.

  3. En los archivos del tema de Shoporama, encuentra el archivo que genera tus páginas de producto. Generalmente es Settings > … > Temaer > product.html.

  4. Inserta los embedcodes en algún lugar debajo de la descripción del producto. Establece data-products en [<{$product->getProductId()}>].

Página de 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 Shoporama y copia el embedcode.

  3. Ve a los archivos del tema de Shoporama y encuentra el archivo que genera tus páginas de carrito. Generalmente es Settings > … > Temaer > basket.html.

  4. Inserta el embedcode en algún lugar debajo de los artículos del carrito y el botón de pago. Establece data-products en [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

Exit intent #

  1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.

  2. Añade lo siguiente cerca del final de global.html, antes de </body>:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Plantillas de inicio #

Si deseas utilizar diseños por código, estas plantillas pueden ayudarte a empezar.

Código del slider #

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