La página de Categoría es donde tus clientes navegan los productos agrupados por tipo, colección o temporada. Personalizarla te sirve, por ejemplo, para destacar una promoción o un lanzamiento con un banner al inicio de la categoría. También te sirve para aclarar de qué se trata la colección con un título o imagen propia. Y podés ajustar cuántos productos se ven por fila, según el estilo que busques para tu catálogo.
El diseño Ipanema te permite configurar la página de Categoría con un banner (hero) de destaque, un encabezado y el listado de productos.
En este tutorial te explicamos cómo configurar estas secciones y agregar otras nuevas a la página de Categoría.
¡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 y seleccionar la página "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
Configurá 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.
5.1. Hacer clic en "Hero de categoría" para configurar la imagen, el diseño y el CSS personalizado.
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, haciendo 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
Configurá el diseño, los colores y el CSS personalizado del encabezado de la página de categorías.
5.1. Hacer clic en "Encabezado" para configurar el diseño, los colores y el CSS personalizado.
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
Configurá la disposición de los productos en la página de cada categoría, el diseño y el CSS personalizado.
5.1. Hacer clic en "Productos" para configurar la disposición, 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.
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.
Helpjuice Warning Callout Title
Consultá el catálogo completo con el detalle de cada sección y qué podés configurar ingresando a ¿Qué secciones puedo agregar en las páginas de mi tienda con el diseño Ipanema?
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.
¡Listo!
Ya sabés cómo agregar y configurar secciones en la página de inicio de tu tienda usando el editor del diseño Ipanema. También podés personalizar el resto de las páginas de tu tienda, Inicio, Producto, Búsqueda y Error 404, siguiendo la misma lógica de secciones y bloques.