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 te permite mostrar productos completamente automatizados en cualquier página.

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

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

Configuración de 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.

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

Crear diseño #

Las Recommendations se muestran como un slider por defecto. Esto permite que los clientes vean más productos con menos clics.

Puedes utilizar el Editor de Design para configurarlo visualmente, o usar code designs.

Un Design se puede reutilizar en cualquier cantidad de elementos 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 deseas usar como base.

  4. Ponle un nombre y haz clic en Create design.

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

Diseño de código #

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

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

Crear Element #

Este contiene todas las configuraciones utilizadas para mostrar las Recommendations, y hacerlo embebible 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 según la página y la lógica que quieras usar. Ejemplo: “Home Page / Visitor Recommendations”.

  4. En Element type, selecciona la lógica de producto que quieres utilizar en el desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.

  5. En Design selecciona el diseño que creaste en el 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: Injection y Embedded code.

  1. Abre la pestaña Insert into website.

  2. Aquí tienes dos opciones:

    • Usar injection te permite insertar el código utilizando 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 sencilla de usar.

  4. Para algunas Logics verás el desplegable Choose your platform. Selecciona Shoporama en estos casos. Esto llenará 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 > Elements.

  2. Selecciona el elemento que deseas insertar.

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes:

    • Usar injection inserta el código utilizando un selector CSS.

    • Usar embedded code inserta el código manualmente.

  5. Para embedded code en Shoporama, las ubicaciones y nombres de archivos típicos son:

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

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

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

    • Página de inicio: inserta en la plantilla de tu página de inicio o bloque CMS, según corresponda.

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

Páginas #

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

Página de inicio #

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

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Inserta los embedcodes en la plantilla/bloque CMS de tu página de inicio.

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

  3. Ve a los archivos de tema de Shoporama y encuentra el archivo que genera tus páginas de categoría. Suele ser Settings > … > Temaer > category.html.

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

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 selecciónalo en Shoporama para cada una y copia los embedcodes.

  3. En los archivos de tema de Shoporama, busca el archivo que genera tus páginas de producto. Suele ser Settings > … > Temaer > product.html.

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

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

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

  4. Inserta el embedcode debajo de los artículos del carrito y el botón de checkout. Pon data-products en [<{strip}><{foreach from=$basket item=basket_item name=basket_loop}><{$basket_item.product_id}><{if !$smarty.foreach.basket_loop.last}>,<{/if}><{/foreach}><{/strip}>].

Exit intent #

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

  2. Agrega lo siguiente al final de global.html, antes de </body>:

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

Plantillas de inicio #

Si quieres usar code designs, estas plantillas pueden ayudarte a comenzar.

Código de slider #

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