Las páginas de Búsqueda y Error 404 son las que ve tu cliente en dos situaciones puntuales. La primera es cuando busca algo que no encuentra en tu tienda. La segunda es cuando accede a un link roto o inexistente. Personalizarlas te sirve, por ejemplo, para que esos resultados sigan mostrando productos relevantes en lugar de una pantalla vacía. También te sirve para guiar a tu cliente de vuelta a la tienda con un mensaje claro en caso de error.
El diseño Ipanema te permite configurar estas páginas con una estructura simple. La página de Búsqueda tiene un encabezado y el listado de productos, y la página de Error 404 tiene su propio diseño de mensaje.
En este tutorial te explicamos cómo configurar ambas páginas y agregar nuevas secciones.
¡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.
¿Cómo configurar la página de 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
Configurá el diseño, los colores y el CSS personalizado del encabezado de la página de búsquedas.
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 resultados de búsqueda, 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 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.
Podés elegir entre todas las secciones del catálogo general de Ipanema para sumarlas a esta página.
Ver todas las secciones disponibles
7. Hacer clic en "Guardar y publicar" para aplicar los cambios.
¿Cómo configurar la página de Error 404?
1. Dentro de "Página 404", hacer clic en la sección "Página no encontrada" para configurarla.
2. 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.
3. 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.
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?
4. Hacer clic en "Guardar y publicar" para aplicar los cambios.
¡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 y Categoría, siguiendo la misma lógica de secciones y bloques.