El Diseño Ipanema te ofrece flexibilidad total para estructurar el diseño de tu tienda Tiendanube.
Además de las configuraciones globales de colores y fuentes, podés agregar, reordenar y personalizar secciones y bloques de contenido en las principales páginas de tu tienda: Página de inicio, Producto, Categoría, Resultados de búsqueda y la página de Error 404.
¿Qué secciones podés agregar en cada página?
En la siguiente tabla encontrás un resumen de las secciones y bloques disponibles, y qué podés configurar según la página en la que estés:
Ver tabla de secciones
Sección |
¿Cuándo usar? |
¿Qué configurar? |
Páginas de Categoría, Búsqueda y Listados | ||
| Lista de productos | Es la grilla principal de productos que se muestra en las categorías y en los resultados de búsqueda, donde los clientes navegan y comparan los productos. | Configuración de la sección: No usa bloques sueltos. Los filtros, el ordenamiento y la visualización de la grilla se ajustan directamente en las opciones de la sección. |
| Título de página | Para dar contexto sobre las listas de productos (mostrando el nombre de la categoría, el término buscado o el título de una campaña). | Título: Un bloque enfocado en el texto y el alineamiento del encabezado de página (útil cuando el diseño necesita un título superior destacado). |
Página de Producto | ||
| Información del producto | Es el área principal de compra de la tienda: muestra la galería de fotos, precio, variaciones, botón de comprar y las opciones de envío. | Multimedia e Información fija: Configura la visualización de imágenes y miniaturas. El área de compra (título, precio y formularios) tiene una estructura fija definida por el tema y no permite agregar bloques de texto libre. |
| Descripción del producto | Para detallar especificaciones, cuidados, guía de talles y la historia del producto. Permite crear contenido visual completo con pestañas y archivos multimedia. | Descripción, Título, Texto, Imagen, Botón, Video y Acordeón: La Descripción es el bloque principal (con visualización opcional en formato acordeón). Podés agregar los demás bloques para crear módulos extra de contenido. |
| Productos relacionados | Para estrategias de venta cruzada ("También te puede gustar") con el objetivo de aumentar el ticket promedio del pedido. | Configuración de la sección: No usa bloques. Las reglas de qué productos deben aparecer se definen directamente en las opciones de la sección. |
Página de inicio | ||
| Banners | Para mostrar bloques promocionales (como campañas, colecciones e historias de temporada) en formato de grilla o carrusel. | Banner: Cada bloque es una promoción. Definís imágenes para computadora/celular, link, superposición de color y posicionamiento. Dentro de él, podés agregar bloques de Título, Texto, Botón, Imagen y Grupo. |
| Banner rotativo (Slideshow) | Para destacar grandes campañas, promociones y colecciones de forma impactante ocupando el ancho total de la pantalla. | Slide: Cada slide configura imágenes (desktop y celular) y links. Podés posicionar los bloques de Título, Texto, Botón o Grupo sobre la imagen para crear llamados a la acción (CTAs). |
| Carrusel | Para alternar varias historias visuales en una sola franja (ideal para difundir múltiples ofertas sin necesitar un banner en pantalla completa). | Slide (Carrusel): Sigue la misma lógica del banner rotativo. Agregás la imagen, el link y completás con bloques de Título, Texto, Botón o Grupo dentro del slide. |
| Banner principal (Hero) | Para mostrar una imagen en ancho total en la página de inicio, ideal para comunicar de inmediato el concepto de una nueva campaña. | Título, Texto, Botón y Grupo: Define los textos y las acciones. La función Grupo sirve para agrupar estos bloques y mantener la organización del diseño. |
| Productos destacados (Grilla) | Para mostrar una selección de productos de forma estratégica (más vendidos, novedades, envíos el mismo día) elegidos manualmente o por el algoritmo. | Configuración de la sección: No usa bloques individuales. El origen de los productos y la estructura visual se configuran de forma automatizada por la sección. |
| Producto destacado | Para atraer la atención del cliente hacia un producto único y específico en la página de inicio (un superlanzamiento, un campeón de ventas o un kit exclusivo). | Configuración de la sección: La elección del producto y su disposición en la página se configuran directamente en las opciones de la sección. |
| Preguntas frecuentes (FAQ) | Para reducir consultas de soporte al resolver rápidamente las dudas más comunes sobre envíos, devoluciones y pagos directamente en la página. | Pregunta: Cada bloque representa una duda. Completás el título (pregunta), el contenido (respuesta) y elegís si debe aparecer abierta o cerrada por defecto. |
| Ícono con texto | Para destacar los beneficios y diferenciales de la tienda (como envío gratis, compra segura y devoluciones), transmitiendo confianza de forma fácil de leer. | Ítem de ícono con texto: Cada bloque genera una fila de beneficio con un ícono (o imagen propia), título, descripción y link opcional. |
| Imagen con texto | Para crear diseños con visual editorial (como lookbooks, historia de marca o introducción de una categoría) posicionando foto y texto lado a lado. | Imagen, Título, Texto, Botón, Grupo (y extras): Permite combinar los bloques de contenido esenciales y, si es necesario, incorporar otros elementos de la biblioteca del tema. |
| Feed de Instagram | Para generar prueba social y captar la atención de los visitantes usando el contenido visual de tu red social. | Título y Posts de Instagram: El título funciona como encabezado de la sección. Las fotos se integran automáticamente desde tu conexión con Instagram (no existe un bloque suelto de "lista de imágenes"). |
| Newsletter | Para capturar e-mails de visitantes y convertirlos en clientes ofreciéndoles descuentos, lanzamientos y acciones segmentadas. | Formulario de Newsletter: Genera automáticamente el campo de e-mail y el botón de envío. Construís el atractivo visual a su alrededor usando bloques de Imagen, Título, Texto y Grupo (pudiendo incluir avisos con letra pequeña). |
| Pop-up promocional | Para retener visitantes que están intentando salir de la tienda o darles la bienvenida en su primer acceso con un cupón de descuento. | Configuración de la sección: No usa bloques. El gatillo de aparición (tiempo), textos y comportamientos del pop-up se definen de forma global en las opciones de la sección. |
| Editorial de texto | Para mostrar contenidos continuos y extensos, como la página "Quiénes somos", explicaciones detalladas de políticas o textos en formato de artículo. | Título, Texto, Botón e Imagen: Usá esta combinación de bloques principales para estructurar contenidos de forma más libre, con imágenes insertadas en el medio del texto. |
| Ofertas con cronómetro | Para acelerar la decisión de compra usando gatillos de escasez y urgencia (ventas relámpago o "termina pronto"). | Cronómetro, Productos, Grupo, Imagen, Texto, Título y Botón: El Cronómetro gestiona el tiempo final, la sección Productos muestra la vidriera de la promoción, y los demás bloques dan estilo a los textos informativos de la oferta. |
| Testimonios | Para mostrar las valoraciones reales y la opinión positiva de otros compradores, ayudando a eliminar las objeciones de compra de nuevos clientes. | Testimonio: Cada bloque consolida la valoración de una persona, donde completás la foto, nombre, puntuación (en estrellas), título y la cita directamente. |
| Video | Para mostrar el producto en uso real, publicar un video de "unboxing" o promover la campaña de marca con una llamada de ventas. | Video, Título, Texto, Botón y Grupo: El bloque de Video incorpora y reproduce el contenido; usá los otros bloques para acompañar el video con subtítulos y botones de acción. |
¿Cómo editar y agregar las secciones?
A continuación, encontrás qué podés agregar en cada tipo de página y el paso a paso completo para personalizar el diseño de cada una.
¡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 botón del menú superior central para elegir la página a editar: Inicio, Producto, Categoría, Página 404 o Búsqueda.
Inicio
4. Dentro de la página "Inicio", hacer clic en "+ Agregar sección" o en el ícono de más (+) para empezar a incluir las secciones y personalizar la página de inicio de tu tienda.
5. Podés personalizar 100% la página de inicio agregando secciones desde cero, eligiendo cuáles estarán disponibles y definiendo el orden en que aparecen. Hacer clic en la opción deseada y luego en el botón "Agregar".
Se agregará la sección que elegiste para que puedas configurarla y personalizarla dentro de "Inicio".
6. Al finalizar, hacer clic en "Guardar y publicar" para aplicar los cambios.
Producto
4. Dentro de la página de "Producto", podés configurar las secciones predeterminadas: Información del producto, Descripción del producto, Productos complementarios y Productos alternativos.
5. Hacer clic en cada una para abrir las configuraciones.
Información del producto
5.1. Hacer clic en "Información del producto" para configurar diseño, colores y CSS personalizado dentro de la información del producto.
Diseño
- Ancho: define el ancho de la sección. Seleccioná Página para alinearlo al contenido principal o Completo para que ocupe toda la pantalla.
- Separación entre elementos: controla el espaciado entre los bloques o elementos internos de la sección, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Color de fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
5.2. También podés configurar los otros elementos, como Multimedia e Información sobre la compra.
Multimedia
Disposición
-
Mostrar miniaturas: cuando está activado, muestra pequeñas miniaturas de las imágenes del producto al lado o debajo de la imagen principal, permitiendo al cliente navegar entre las fotos rápidamente.
- Posición en computadoras: define dónde se muestran las miniaturas en la versión desktop. Elegí entre Izquierda (miniaturas en columna al lado de la imagen principal) o Inferior (miniaturas en fila debajo de la imagen principal).
Información sobre la compra
Diseño
- Separación entre elementos: controla el espaciado entre las miniaturas y la imagen principal, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la galería, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la galería, en píxeles (px).
Descripción del producto
5.1. Hacer clic en "Descripción del producto" para configurar visualización, diseño, colores y CSS personalizado dentro de la descripción del producto.
Visualización
- Mostrar título: cuando está activado, muestra el título de la sección "Descripción" sobre el texto descriptivo del producto, ayudando al cliente a identificar el contenido rápidamente.
- Mostrar redes sociales: cuando está activado, muestra los íconos de compartir en redes sociales junto a la descripción, para que el cliente pueda compartir el producto fácilmente.
Colores
- Color de fondo: define el color de fondo de la sección de descripción. La opción Sin relleno mantiene el fondo transparente, sin aplicar ningún color.
- Color de los textos: define el color de los textos de la descripción. La opción Por defecto mantiene el color definido en la configuración general del tema.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección de descripción más allá de las opciones estándar del editor.
Productos complementarios
5.1. Hacer clic en "Productos complementarios" para configurar diseño, colores y CSS personalizado dentro de los productos complementarios.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Separación entre elementos: controla el espaciado entre los bloques o elementos internos de la sección, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores y CSS personalizado
- Color de fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
5.2. También podés configurar los otros elementos, como definir y formatear el Título y la disposición de los Productos. Para configurarlo, hacer clic en cada elemento.
Productos alternativos
5.1. Hacer clic en "Productos alternativos" para configurar diseño, colores y CSS personalizado dentro de los productos alternativos.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Separación entre elementos: controla el espaciado entre los bloques o elementos internos de la sección, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores y CSS personalizado
- Color de fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
5.2. También podés configurar los otros elementos, como definir y formatear el Título y la disposición de los Productos. Para configurarlo, hacer clic en cada elemento.
6. Para agregar nuevas secciones a la página de Producto, hacer clic en "+ Agregar sección", seleccionar las secciones que querés incluir y hacer clic en "Agregar" para sumarlas a tu tienda.
7. Hacer clic en "Guardar y publicar" para aplicar los cambios.
Helpjuice Info Callout Title
En la página de Producto, podés seleccionar un producto específico de tu tienda para ver cómo quedan los cambios. Hacer clic en el botón "Previsualizar" en el menú superior y seleccionarlo.
Categoría
4. Dentro de la página de "Categoría", podés configurar las secciones predeterminadas: Hero de categoría, Encabezado, Productos, y agregar nuevas secciones.
5. Hacer clic en cada una para abrir las configuraciones.
Hero de categoría
Al hacer clic en "Hero de categoría", podés configurar un banner de destaque en la parte superior de las páginas de categoría, para comunicar campañas, lanzamientos o contextualizar visualmente la colección.
Imagen
- Imagen: permite subir la imagen principal que se mostrará en el Hero de categoría. Funciona como banner de destaque para reforzar la identidad visual y comunicar campañas.
- Usar otra imagen para celulares: activá para subir una imagen específica para la versión móvil, garantizando mejor encuadre y legibilidad en pantallas más pequeñas.
Imagen de categoría
- Imagen de categoría: cuando está activado, permite mostrar una imagen exclusiva para cada categoría de la tienda, en lugar de usar la imagen general del Hero. Las imágenes individuales deben subirse directamente desde la sección "Categorías" del administrador. Para hacerlo, hacer clic en "Cargala desde acá".
Diseño
- Ancho: define el ancho del Hero. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla, generando mayor impacto visual.
- Espaciado superior e inferior: ajusta el espaciado vertical interno del Hero, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno del Hero, en píxeles (px).
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente el Hero de categoría más allá de las opciones estándar del editor.
Encabezado
Al hacer clic en "Encabezado", podés configurar el diseño, colores y CSS personalizado del encabezado de la página de categorías.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
- Color del texto: define el color de los textos de la sección. La opción "Por defecto" mantiene el color definido en la configuración general del tema.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
Productos
Al hacer clic en "Productos", podés configurar la disposición de los productos en la página de cada categoría, el diseño y el CSS personalizado.
Disposición
- Disposición en computadoras: define cuántas columnas de productos se muestran en la versión desktop. Elegí entre 4 columnas, 5 columnas o 6 columnas, según el tamaño deseado de las tarjetas y la cantidad de productos visibles por fila.
- Disposición en celulares: define cuántas columnas de productos se muestran en la versión móvil. Elegí entre 1 columna (tarjetas más grandes, con más destaque) o 2 columnas (más productos visibles por fila).
- Navegación de productos: define cómo tu cliente avanza por la lista de productos. Seleccioná "Lista de páginas" para una navegación paginada (con números de página) o "Carga infinita" para que los nuevos productos se carguen automáticamente mientras tu cliente se desplaza hacia abajo (hace scroll).
En la siguiente imagen de ejemplo podés ver una disposición de 4 columnas en la versión de computadora:
Diseño
- Ancho: define el ancho del listado. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente el listado de productos más allá de las opciones estándar del editor.
6. Para agregar nuevas secciones a la página de Categoría, hacer clic en "+ Agregar sección", seleccionar las secciones que querés incluir y hacer clic en "Agregar" para que se sumen a tu tienda.
7. Hacer clic en "Guardar y publicar" para aplicar los cambios.
Helpjuice Info Callout Title
En la página de Categoría, podés seleccionar una categoría específica de tu tienda para ver cómo quedan los cambios. Hacer clic en el botón "Previsualizar" en el menú superior y seleccionarla.
Página 404
4. Dentro de "Página 404", hacer clic en la sección "Página no encontrada" para configurarla.
5. En esta sección podés configurar el diseño y el CSS personalizado de la página de error.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
6. Para agregar nuevas secciones a la Página de Error 404, hacer clic en "+ Agregar sección", seleccionar las secciones que querés incluir y hacer clic en "Agregar" para que se sumen a tu tienda.
7. Hacer clic en "Guardar y publicar" para aplicar los cambios.
Búsqueda
4. Dentro de la página de "Búsqueda", podés configurar las secciones predeterminadas: Encabezado y Productos, y agregar nuevas secciones.
5. Hacer clic en cada una para abrir las configuraciones.
Encabezado
Al hacer clic en "Encabezado", podés configurar el diseño, colores y CSS personalizado del encabezado de la página de búsquedas.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
- Color del texto: define el color de los textos de la sección. La opción "Por defecto" mantiene el color definido en la configuración general del tema.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
Productos
Al hacer clic en "Productos", podés configurar la disposición de los productos en la página de resultados de búsqueda, el diseño y el CSS personalizado.
Disposición
- Disposición en computadoras: define cuántas columnas de productos se muestran en la versión desktop. Elegí entre 4 columnas, 5 columnas o 6 columnas, según el tamaño deseado de las tarjetas y la cantidad de productos visibles por fila.
- Disposición en celulares: define cuántas columnas de productos se muestran en la versión móvil. Elegí entre 1 columna (tarjetas más grandes, con más destaque) o 2 columnas (más productos visibles por fila).
- Navegación de productos: define cómo tu cliente avanza por la lista de productos. Seleccioná "Lista de páginas" para una navegación paginada (con números de página) o "Carga infinita" para que los nuevos productos se carguen automáticamente mientras tu cliente hace scroll.
En la siguiente imagen de ejemplo podés ver una disposición de 4 columnas en la versión de computadora:
Diseño
- Ancho: define el ancho del listado. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente el listado de productos más allá de las opciones estándar del editor.
6. Para agregar nuevas secciones a la página de Búsqueda, hacer clic en "+ Agregar sección", seleccionar las secciones que querés incluir y hacer clic en "Agregar" para que se sumen a tu tienda.
7. Hacer clic en "Guardar y publicar" para aplicar los cambios.
¡Listo!
Ya sabés cómo estructurar y personalizar todas las páginas de tu tienda usando el editor del Diseño Ipanema.
Helpjuice Info Callout Title
Aprovechá la flexibilidad de los bloques para crear listados atractivos, comunicar campañas de ventas y ofrecer una excelente experiencia de navegación a tus clientes.