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 cuando usas una Clerk.js setup en DanDomain Classic.

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

Configuración del Slider #

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

Si sigues los pasos en my.clerk.io > Settings > Setup Guides, se crearán automáticamente los Elements para nuestras Mejores Prácticas.

Crear Design #

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

Un design puede reutilizarse en cualquier número de elementos de Recommendations que crees.

Design Editor #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Product Slider
3. Selecciona una plantilla, asígnale un nombre, luego haz clic en Create design.
4. Ajusta el design según sea necesario.

Code Design #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Selecciona Other designs > Blank > Code.
3. Asígnale un nombre y haz clic en Create design.
4. Construye tu design usando Liquid code.

Si deseas un design inicial, revisa la Slider template más abajo.

Crear Element #

Este contiene todas las configuraciones para mostrar Recommendations y hacer que se pueda insertar 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 deseas usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, 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 Design selecciona el design 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.

Agregar al sitio web #

Para agregar Clerk Recommendations a 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 manualmente el código en tu sitio web.
3. Elige la opción que sea más fácil para ti.
4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona DanDomain Classic en estos casos. Esto prefijará el embedcode con los shortcodes correctos de DanDomain Classic.

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

Sigue los pasos a continuación en el backend de DanDomain Classic para insertar tus sliders.

Páginas #

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

Página principal #

1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. En DanDomain Classic, ve a Design > Egne Sider.
3. Bajo Forside, encuentra la página que muestra tu página principal (a menudo el nombre de tu tema + “Forside”).
4. Haz clic en Kilde para ver el HTML.
5. Inserta el embed code donde quieras el slider, luego haz clic en Gem.

<span class="clerk" data-template="@SLIDER_ID"></span>

Página de Categoría #

1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
2. En el menú desplegable Insert into website > Choose your platform, selecciona DanDomain Classic y copia el embedcode.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Vareliste, encuentra la página de categorías (a menudo el nombre de tu tema + “Produktliste”).
5. Haz clic en Kilde.
6. Inserta el embed code donde quieras el slider, luego haz clic en Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-category="CATEGORY_ID">
</span>

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 menú desplegable Insert into website > Choose your platform, selecciona DanDomain Classic para cada uno y copia los embedcodes.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Produktkort, encuentra la página de productos (a menudo el nombre de tu tema + “Produktkort”).
5. Haz clic en Kilde.
6. Inserta el embed code donde quieras el slider, luego haz clic en Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-products="[PRODUCT_ID]">
</span>

Paso Añadir a la Cesta #

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 la aplicación de Clerk.io DanDomain Classic, activa Powerstep.
5. Añade los IDs de los elementos que quieres mostrar, separados por comas.
6. Haz clic en Save.

Página del Carrito #

1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
2. En el menú desplegable Insert into website > Choose your platform, selecciona DanDomain Classic y copia el embedcode.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Kurv, encuentra la página de carrito (a menudo “Kurv” o “Lille Kurv”).
5. Haz clic en Kilde.
6. Inserta el embed code donde quieras el slider, luego haz clic en Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-products="[PRODUCT_ID]">
</span>

Exit Intent #

1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
2. En la aplicación de Clerk.io DanDomain Classic, busca Exit Intent.
3. Marca Enabled y haz clic en Gem.

Página del Blog #

1. Copia el embed code en la página de contenido donde quieras que se muestre.
2. Sustituye INSER_PAGE_HERE por el ID de la página para la que quieras mostrar productos.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-page="INSER_PAGE_HERE">
</span>

Plantillas iniciales #

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

Slider Code #

Esta plantilla renderizará un slider estándar con información común del producto que puedes adaptar según tus necesidades.