En ocasiones, como marca, necesitas configurar banners con imágenes que se muestren de acuerdo a alguna condición en específico.
Ejemplo
De acuerdo a un atributo extendido, el día de la semana, categoría (Última compra realizada), género del cliente, código postal, etc.
Esto podrás lograrlo creando una fila que mostrará el banner dinámico según la información que necesites.
Paso 1: Carga las imágenes en el administrador de archivos
Deberás cargar una imagen en el administrador de archivos por cada condición. Por ejemplo, si quieres mostrar un banner por cada día de la semana, debes cargar una imagen por cada día.
Asegurarte de que la imagen tenga formato Nombre_de_la_imagen.jpg (todas deben tener la misma extensión/formato). El nombre de la imagen dependerá de la condición aplicada.
Para ver cómo subir archivos aquí: Administrador de Archivos
⚠️ Importante: crea una carpeta aparte para cargar las imágenes para el banner. Así mantienes el orden en tus archivos.
Paso 2: Crea una fila y agrega un bloque de imagen
Agrega una fila y coloca en ella un bloque de imagen (debes seleccionarlo desde Contenido > Imagen):
Paso 3: Agrega una imagen
Una vez en el administrador de archivos carga una imagen en el bloque:
La única condición es que se cargue una imagen con el mismo tamaño que ocupará este banner dinámico (cuando se cargan las imágenes dinámicas tomarán el tamaño de la imagen estática que hayas puesto en principio).
Paso 4: Activa la opción de imagen dinámica
Selecciona la imagen cargada anteriormente y activa la opción de Imagen dinámica:
Paso 5: Modifica el link de la imagen dinámica
Agrega en el campo “URL dinámica”, el link de cualquier imagen cargada en el editor. La url de la imagen dinámica debe ser tomada de la url de alguna de estas imágenes.
Se puede tomar haciendo click en la vista previa de la imagen:
Copiar la url del navegador:
Luego, pega ese link en el campo “URL dinámica” de la imagen:
👉 Con esta configuración del banner tendrás la base para añadir cualquier condición detallada en este artículo
Paso 6: Personaliza el banner por cada condición
Banner según el día de la semana
Banner según el día de la semana
¿Cómo funciona esta fila?
El bloque de imagen dinámica buscará la imagen que corresponda según el día al momento del envío.
¿Qué debes tener en cuenta antes de crear esta fila?
Debes preparar las imágenes de cada día de la semana indicando en su nombre el día en inglés, por ejemplo, la imagen del día viernes debe llamarse “Friday.jpg”.
Recuerda que las tres imágenes deben tener la misma extensión/formato, es decir, ".jpg".
Configuración de la condición en el link dinámico
Si recuerdas en el paso 5 copiaste la URL de una imagen del administrador de archivos y la pegaste en el campo "URL dinámica" en el editor. ¡Es momento de incluir en ese link la condición para que se muestre el banner del día!
Para ello debes reemplazar el nombre de la imagen por el campo {{today}}.jpg.
Por ejemplo, copiaste el siguiente link:
https://templates.woowup.com/private-images/NG0xLOSoQ/Nombre_de_la_imagen.jpg
Ahora debes identificar el nombre de la imagen. En este caso, el campo Nombre_de_la_imagen.jpg y reemplazarlo por {{today}}.jpg.
El link quedaría de la siguiente maneta
https://templates.woowup.com/private-images/NG0xLOSoQ/{{today}}.jpg
Configuración de la condición en la fila dinámica
No te preocupes, ¡ya casi tienes listo tu banner dinámico! solo debes aplicar la condición en la fila, seleccionando la fila que contiene la imagen > Contenido dinámico > Añade condición:
En el campo Nombre y Descripción debes incluir la información que desees para luego poder identificar la fila.
En el campo Antes va el siguiente código:
<!-- {% set date = now | date("l") %} {% set formated_date = date_format(date, "m/d/Y") %} {% set today = date_format(date, "l") %} -->En el campo Después va el siguiente código:
<!-- -->
Quedaría de la siguiente manera:
Recuerda hacer click en "Añadir" y listo, estás listo para ir al paso siguiente, guardar la fila y hacer las pruebas correspondientes.
⚠️ En las pruebas que hagas solo se mostrará la imagen correspondiente al día que se hace el test. Por ejemplo, si hoy es viernes y realizas la prueba, solo vas a recibir la imagen correspondiente al día viernes.
Banner según género del cliente
Banner según género del cliente
¿Cómo funciona esta fila?
El bloque de imagen dinámica buscará la imagen que corresponda según el género del cliente, es decir, si el cliente es mujer mostrará una imagen y en caso de que sea hombre, va a mostrar otra (imágenes que determinas tu previamente). Y si el campo de género está vacío, se mostrará una imagen específica que también determinas tu.
¿Qué debes tener en cuenta antes de crear esta fila?
Debes preparar las imágenes de cada género indicando el nombre en ingles, es decir, para el género "Mujer" debe llamarse “female.jpg” y para "Hombre" sería "male.jpg". Para los clientes con el campo vacío o diferente a mujer u hombre subir una imagen con el nombre "unisex.jpg".
Es importante que en el nombre de las imágenes se respete el nombre tal cual lo especificamos, es decir, no incluir mayúsculas o caracteres especiales. Por ejemplo “female.jpg” y “Female.jpg” puede parecer lo mismo pero el código se rompe si se incluye una mayúscula.
Recuerda que las tres imágenes deben tener la misma extensión/formato, es decir, ".jpg".
Configuración de la condición en el link dinámico
Si recuerdas en el paso 5 copiaste la URL de una imagen del administrador de archivos y la pegaste en el campo "URL dinámica" en el editor. ¡Es momento de incluir en ese link la condición para que se muestre el banner según el género del cliente!
Para ello debes reemplazar el nombre de la imagen por el campo {{banner}}.jpg (dependiendo del formato en el que hayas subido las imágenes).
Por ejemplo, copiaste el siguiente link:
https://templates.woowup.com/private-images/NG0xLOSoQ/Nombre_de_la_imagen.jpg
Ahora debes identificar el nombre de la imagen. En este caso, el campo Nombre_de_la_imagen.jpg y reemplazarlo por {{banner}}.jpg.
El link quedaría de la siguiente manera:
https://templates.woowup.com/private-images/NG0xLOSoQ/{{banner}}.jpg
Configuración de la condición en la fila dinámica
No te preocupes, ¡ya casi tienes listo tu banner dinámico! solo debes aplicar la condición en la fila, seleccionando la fila que contiene la imagen > Contenido dinámico > Añade condición:
En el campo Nombre y Descripción debes incluir la información que desees para luego poder identificar la fila.
En el campo Antes va el siguiente código:
<!--
{% set banner = null %}
{% if customer.gender == 'Femenino' %}
{% set banner = 'female.jpg' %}
{% elseif customer.gender == 'Masculino' %}
{% set banner = 'male.jpg' %}
{% else %}
{% set banner = 'unisex.jpg' %}
{% endif %}
-->
En el campo Después va el siguiente código:
<!-- -->
Quedaría de la siguiente manera:
Recuerda hacer click en "Añadir" y listo, estás listo para ir al paso siguiente.
Banner según una etiqueta/Tag
Banner según una etiqueta/Tag
¿Cómo funciona esta fila?
El bloque de imagen dinámica mostrará la imagen que corresponda según la etiqueta que tenga asignada el cliente.
¿Qué debes tener en cuenta antes de crear esta fila?
La imagen que decidas utilizar debe tener la extensión/formato ".jpg".
Las tags/etiquetas en WoowUp no son dinámicas, esto quiere decir que un perfil con la tag “ecommerce” siempre verá el mismo banner hasta que la tag sea borrada de la plataforma (una tag no se puede eliminar para un perfil individual).
Configuración de la condición en la fila dinámica
¡Ya casi tienes listo tu banner dinámico! Sólo debes aplicar la condición en la fila, seleccionando la fila que contiene la imagen > Contenido dinámico> Añadir condición:
En el campo Nombre y Descripción debes incluir la información que desees para luego poder identificar la fila.
En el campo Antes va el siguiente código:
<!-- {% if customer.hasTag('newsletter') %} -->En el campo Después va el siguiente código:
<!-- {% endif %} -->Quedaría de la siguiente manera:
A tener en cuenta
❗La función hasTag() es sensible a todo carácter (mayúsculas, acentos, espacios en blanco, etc.) Por lo tanto debes asegurate que has copiado el nombre del tag exactamente igual.
‼️El nombre de la tag debe estar siempre entre comillas dobles("") o simples(''), de lo contrario el código no funcionará.
Recuerda hacer click en "Añadir" y listo, estás listo para ir al paso siguiente.
Paso 7: Guarda la fila y realiza pruebas
Una vez guardada la fila (¿Cómo guardar filas customizables?), recomendamos hacer las pruebas correspondientes ¡y listo, ya puedes crear tus propios banners dinámicos!