Con el Diseño Ipanema podés ir más allá del diseño visual: desde las Configuraciones avanzadas ajustás el comportamiento de tu tienda para mejorar la experiencia de compra de tus clientes.
En este tutorial te explicamos qué hace cada opción y cómo configurarla.
¡Vamos a los pasos!
1. Ingresar al administrador de tu Tiendanube.
2. Acceder a "Tienda online > Diseño" y hacer clic en "Editar diseño".
3. Hacer clic en el ícono del engranaje en el menú superior (al lado de "Editar diseño") para acceder a los ajustes globales.
4. En el menú lateral vas a ver la sección "Configuraciones avanzadas". Desde ahí podés configurar:
- Pestaña del navegador
- Pop-up promocional
- Tarjeta de producto
- Formulario de producto
- Carrito de compras
- CSS personalizado
A continuación te explicamos el funcionamiento de cada sección:
Pestaña del navegador
Favicon para el carrito
Favicon: permite cargar un ícono personalizado que se mostrará en la pestaña del navegador cuando tu cliente tenga productos agregados al carrito.
Mensaje para pestaña inactiva
Mostrar mensaje al cambiar de pestaña: cuando esta opción está activada, muestra un mensaje dinámico en el título de la pestaña del navegador cada vez que el cliente pasa a otra pestaña.
- Mensaje 1: primer texto que se muestra en el título de la pestaña cuando tu cliente cambia de ventana (ej.: "No te pierdas esta oferta...").
- Mensaje 2: segundo texto que se alterna con el Mensaje 1, creando un efecto de animación en el título de la pestaña (ej.: "¡Volvé pronto!").
Pop-up promocional
Pop-up
Mostrar un pop-up promocional: activá para mostrar un pop-up promocional a los visitantes de la tienda. Al activar, también se habilita la opción "Mostrar un formulario de newsletter dentro del pop-up", que incluye un campo de suscripción en el pop-up.
Imagen
Cargá la imagen que se mostrará en el pop-up.
Usar otra imagen para celulares: activá esta opción para cargar una imagen específica para la versión móvil.
Link: ingresá la URL a la que será dirigido tu cliente al hacer clic en la imagen del pop-up.
Helpjuice Warning Callout Title
Los formatos admitidos para imágenes son JPEG, PNG, GIF o WebP y no deben superar los 20 MB.
Título
Definí el texto principal del pop-up.
Estilo del título: define el estilo visual del título (Título 1, Título 2, Título 3, Título 4).
Tamaño para celulares: activá para configurar un tamaño de título diferente en la versión móvil.
Descripción
Campo de texto libre para presentar un mensaje complementario al título. Tiene opciones de formato como negrita, cursiva, subrayado, color del texto, listas y enlaces.
Estilo: "Párrafo pequeño", "Párrafo" o "Párrafo grande".
Botón
Texto del botón: define el texto que se muestra en el botón de acción del pop-up.
Link del botón: ingresá la URL a la que será dirigido el cliente al hacer clic en el botón.
Disposición
Posición de la imagen: define en qué lado del pop-up se muestra la imagen. Elegí entre "Izquierda" o "Derecha".
Alineación: define el alineamiento de los textos (título, descripción y botón) dentro del pop-up: a la izquierda, al centro o a la derecha.
Tarjeta de producto
La tarjeta de producto aplica específicamente para la información que se muestra en los listados de productos (sección "Categoría"), resultados de búsqueda y grillas de productos de la página de inicio.
Disposición
Posición de las etiquetas promocionales: Elegí la ubicación de las cucardas de tus promociones: "Debajo de la imagen" o "Sobre la imagen". Ubicación de las etiquetas: al seleccionar "Sobre la imagen", definí "Arriba" o "Abajo".
Mostrar información de cuotas: cuando está activado, muestra en la tarjeta la información de cuotas disponibles para el producto.
Permitir compra rápida: cuando está activado, muestra un botón de compra directa en la tarjeta.
Mostrar variaciones de color: cuando está activado, muestra las variaciones de color disponibles directamente en la tarjeta.
Fotos del producto
Formato de la foto: Dentro del desplegable podés elegir entre diferentes formatos de imagen: "Original", "Cuadrado (1:1)", "Horizontal (4:3)" o "Vertical (3:4)".
Mostrar la segunda foto al posar el mouse: cuando está activado, muestra la segunda imagen del producto al posicionar el cursor sobre el producto en la versión de escritorio.
Mostrar las fotos en un carrusel para cada producto: cuando está activado, permite que el cliente navegue por las imágenes del producto directamente en la tarjeta dentro de los listados (sin tener que ingresar al producto).
Stock
Advertencia de últimas unidades: cuando está activado, muestra una alerta en la tarjeta cuando el producto tiene poco stock.
Formulario de producto
El formulario de producto aplica específicamente para la información que se muestra en la página de cada producto (detalle del producto).
Variantes
Formato: "Desplegable" (menú dropdown) o "Botones" (opciones visibles lado a lado).
Mostrar la foto de variante de color como botón: cuando está activado, reemplaza el botón estándar por la imagen correspondiente a la variante de color.
Guía de talles: ingresá el link a la página con la tabla o guía de talles de los productos.
Precio
Mostrar monto ahorrado en productos con precio promocional: cuando está activado, muestra al cliente el monto exacto que está ahorrando respecto al precio original.
Helpjuice Warning Callout Title
Esta opción no aplica si el precio con descuento por medio de pago ya está visible.
Mostrar el precio con descuento por medio de pago: cuando está activado, muestra el precio final del producto considerando el descuento aplicado por el método de pago.
Mostrar información de cuotas: cuando está activado, muestra la información de cuotas disponibles para el producto.
Información
Mostrar cantidad de productos vendidos: cuando está activado, muestra el total de unidades ya vendidas.
- A partir de: define la cantidad mínima de ventas para que la información se muestre.
Mostrar código SKU: cuando está activado, muestra el código SKU del producto.
Stock
Mostrar stock disponible: cuando está activado, muestra al cliente la cantidad exacta de unidades disponibles en stock.
Mostrar mensaje de últimas unidades en stock: cuando está activado, muestra un aviso de poco stock.
- Límite de unidades: define el límite de stock para que comience a mostrarse el mensaje de últimas unidades.
- Color de texto del mensaje de stock: define el color del texto del mensaje de últimas unidades.
- Mensaje de últimas unidades: campo donde personalizás el texto que se muestra (ej.: "¡Última unidad!", "Quedan pocas").
Formas de entrega
Mostrar calculador de envío: cuando está activado, muestra la sección de cálculo de envío directamente en la página del producto para que tus clientes ingresen su código postal y puedan ver las opciones de entrega disponibles.
Carrito de compras
Monto mínimo de compra
Monto mínimo de compra: define un monto mínimo que tu cliente necesita alcanzar para finalizar la compra. Si no querés aplicar esta restricción, dejá el campo en blanco.
Carrito de compra rápida
Permitir que tus clientes agreguen productos al carrito sin necesidad de ir a otra página: cuando está activado, habilita el carrito de compra rápida y las siguientes configuraciones a personalizar.
- Acción al agregar un producto al carrito: "Mostrar notificación" o "Abrir carrito".
- Mostrar productos recomendados al agregar un producto al carrito: cuando está activado, muestra sugerencias de productos relacionados en el momento de la adición al carrito.
Ejemplo de cómo se ve el botón de compra rápida en la tienda:
Cupones de descuento
Permitir que tus clientes apliquen un cupón de descuento en el carrito: cuando está activado se muestra un campo dentro del carrito de compras para agregar un cupón de descuento.
Helpjuice Warning Callout Title
Esta configuración es solo para el carrito de la tienda, no aplica al checkout.
Ejemplo de cómo se ve el campo “Cupón de descuento” en el carrito de la tienda:
Formas de entrega
Mostrar calculador de envío: cuando está activado, muestra el calculador de envíos dentro del carrito de compras de la tienda.
CSS personalizado
Configuraciones para diseñadores web
Código CSS personalizado: campo destinado a códigos de CSS propios, que permite personalizar visualmente tu tienda más allá de las opciones estándar.
Helpjuice Info Callout Title
Con este campo podés ajustar estilos globales (como tipografías, colores, tamaños y espaciados) o crear personalizaciones puntuales. Recomendado para usuarios con conocimientos técnicos en desarrollo web.
5. Hacé clic en "Guardar y publicar" para que impacten los cambios.
¡Listo!
Ya sabés cómo usar las configuraciones avanzadas del Diseño Ipanema para personalizar tu tienda.
Para configurar las opciones globales de identidad de marca, consultá el tutorial: