Vamos a ver en este post los diferentes tipos de diseños de header o encabezamientos web que nos ofrece Warehouse, la mejor plantilla para Prestashop.
*** NO vamos a ver como personalizar colores (esto lo veremos en otro post)***. Solo nos vamos a centrar en los tipos de estructuras de header diferentes de que dispone la plantilla Warehouse
Los diferentes tipos de header los podremos seleccionar desde el Theme Editor (Editor de temas) que en la plantilla Warehouse se denomina “Iqit Theme Editor”
QUIERO LA PLANTILLA WAREHOUSE
ÍNDICE DEL POST
1.- Cómo modificar el header de la plantilla Warehouse para Prestashop
Para cambiar el tipo de header de la plantilla Warehouse debemos acceder al editor de temas o Theme Editor de la plantilla.
En la plantilla Warehouse podemos acceder al “Theme Editor” o Editor de temas de dos maneras diferentes:
A.- Editor de temas en vivo (Iquit Theme Editor – Live): Con el editor de temas en Vivo podremos visualizar los distintos tipos de header en tiempo real.
Para acceder al Iquit Theme Editor – Live iremos a: “MEJORAS > Diseño > IqitThemeEditor – Live”
En la interface que nos aparece haremos clic en: “Header > Aspecto”
Editor de temas (Live): desde aquí podremos cambiar el tipo de cabecera de Prestashop y ver como queda en tiempo real
B.- Editor de temas backoffice (Iquit Theme Editor – Backoffice): Con el editor de temas tipo backoffice tendremos que ir haciendo visualizaciones de la web para ir viendo los diferentes tipos de header disponibles con la plantilla Warehouse.
Para acceder al Iquit Theme Editor – BackOffice iremos a: “MEJORAS > Diseño > IqitThemeEditor – Backoffice”
Luego en el menú lateral iremos a: “Header > Aspecto”
Editor de temas (backoffice): Desde aquí podremos seleccionar los diferentes tipos de header de Warehouse
2.- Tipos de header del tema Warehouse para Prestashop
El tema Warehouse para Prestashop ofrece 2 familias diferentes de headers o cabeceras para la tienda online:
A.- Headers horizontales: dentro de este tipo hay cuatro diseños diferentes de header para la web: style1, style 2, style 3 y style 4.
Todos estos tipos de header tienen en común que tienen un diseño horizontal situado en la parte superior de la web y que ocupan todo el ancho de la misma.
Headers con diseño horizontal
B.- Headers Verticales: dentro de este tipo de headers la plantilla Warehouse nos ofrece dos diseños diferentes: style 6 y style 7
Este tipo de headers tienen un formato de menú vertical situado como una barra lateral o sidebar, por lo que no ocupa todo el ancho de la parte superior de la web.
Header tipo vertical
A mí personalmente no me gustan mucho los header tipo vertical, ya que reducen el acho disponible para la web al ser ocupada una parte por la barra lateral del menú.
Además la visualización de un mega menú complejo es mucho más sencilla desde un menú horizontal que uno de tipo vertical.
Hace un tiempo había muchas webs y tiendas online que utilizaban una barra lateral para el header y menú del mismo, pero es algo que hoy en día se usa solo en contadas ocasiones.
QUIERO LA PLANTILLA WAREHOUSE
3.-Tipos de Headers o encabezamientos horizontales de la plantilla Warehouse
Vamos ahora a ver los 4 tipos diferentes de headers en formato horizontal que ofrece la plantilla Prestashop Warehouse.
3.1.- Diseño header plantilla Warehouse STYLE 1
Este es el diseño de header que ofrece la plantilla Warehouse por defecto. Está compuesto por 3 bloques horizontales.
Bloques que forman el header horizontal
En el bloque superior parte izquierda aparecen una serie de enlaces de interés que se gestionan a través del módulo: IQITLINKSMANAGER – block links
En la parte derecha del bloque superior aparece el selector de idiomas, el icono para el acceso a la lista de deseos (wishlist) y el icono del comparador de productos.
En el bloque central aparece el logo, la barra de búsqueda, el carrito y el inicio de sesión.
En el bloque inferior aparece el menú horizontal de la tienda
Diseño de header STYLE 1 prestashop Warehouse
3.2.- Diseño header tema Warehouse STYLE 2
El diseño de header STYLE 2 es exactamente igual que el STYLE1 con la única diferencia que en la parte derecha del bloque central aparece el icono del carrito e inicio de sesión uno junto al otro en vez de uno encima de otro.
Además en el header STYLE 2 el texto de inicio de sesión es sustituido por un icono.
Diseño de header Style 2
3.3.- Diseño header theme Warehouse STYLE 3
Este diseño de header de la plantilla Warehouse es una modificación del header STYLE 2
En este header desaparece la barra de búsqueda de productos y es sustituida por un icono que aparece en el lateral derecho en forma de “lupa”.
Si haces clic en el icono de búsqueda aparecerá una barra de búsqueda grande a través de una capa emergente.
El resto de elementos son iguales al diseño de header STYLE 2
Diseño header style 3 Warehouse
En la siguiente imagen puedes ver como aparece la barra de búsqueda de productos cuando se hace clic en el icono en forma de lupa.
Barra de búsqueda que se muestra al hacer clic en el icono en forma de lupa
3.4.- Diseño header plantilla Warehouse STYLE 4
Este tipo de diseño de header es muy similar al diseño tipo STYLE 3, con la importante diferencia de que en este caso la barra de menú sube desde el bloque inferior del header al bloque central y se sitúa entre el logo y el icono de la lupa.
Este es el único diseño de header en el cual solo existen 2 bloques horizontales. En todos los anteriores diseños de header habían 3 bloques horizontales que formaban el header (superior, central e inferior)
Diseño header STYLE 4
QUIERO LA PLANTILLA WAREHOUSE
4.- Tipos de Headers verticales de la plantilla Warehouse Prestashop
La plantilla Warehouse Prestashop dispone de dos diseños web con menú lateral. Como decía, yo no soy muy partidario de este este tipo de diseños pero para algunos casos podrían ser interesantes.
4.1.- Diseño header plantilla Warehouse STYLE 6
Este tipo de header dispone de tres bloques diferenciados.
i.- Bloque superior: El superior recoge el selector de idiomas, lista de deseos y enlace del comprador. Si está activado el módulo IQITLINKSMANAGER, su contenido aparecerá encima del selector de idiomas y resto de enlaces mencionados.
ii.- Bloque central: en este bloque aparece el logo y tres iconos: lupa (buscador de productos), icono inicio de sesión e icono del carrito.
iii.- Bloque inferior: en el bloque inferior se muestra el menú de la tienda online.
Header Warehouse Style 6
4.2.- Diseño header plantilla Warehouse STYLE 7
Este tipo de header se diferencia del anterior en su bloque central. En este caso aparece la barra de búsqueda de productos en vez del icono de lupa, y el carrito e icono de inicio de sesión aparecen uno encima de otro en vez de uno al lado del otro.
Diseño de menú vertical Style 7 Prestashop warehouse
Si te decides por utilizar alguno de los dos headers con formato vertical. Es decir, o el diseño STYLE6 o el diseño STYLE7, y ves que el selector de idioma no aparece bien colocado como te muestro en la siguiente imagen:
Selector de idioma mal colocado, cambiar modulos del hook displaynav2
Tendrás que ir a: “MEJORAS > Diseño > Posiciones de los módulos”, desenganchar los siguientes módulos del “displayNav2”
- Bloque selector de idioma
- Bloque de moneda
- IqitWishlist
- IqitCompare
Y engancharlos en el “displayNav1”
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola Joaquín me gustaría saber si es posible poner un teléfono a la derecha del header es decir donde sale el carrito y el area de usuario sin tener que tocar el código. (no en la top bar)
Gracias
Hola Victor.
No es posible, Warehouse no dispone de esa opción. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre Prestashop, Warehouse, Curso claves para crear una tienda online de éxito, SEO Ecommerce, Analytics tiendas online, Blog Prestashop, Woocommerce, WordPress, SEO General etc. etc.
Hola, se Puede modificar el Top Menu, me gustaria poner un telefono en la parte superior y/o un mail quiero ver como se ve
Saludos muy bueno tu material
Claudio /Chile
Hola Claudio.
Prueba con el módulo iqtiLinkManager de Warehouse. Ya que estamos, me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre Plantilla Warehouse, sobre Pretashop, SEO Tiendas online, SEO General, Analytics para ecommerce, Blog Prestashop, etc. etc.****
Hola Joaquin, me gustaria buscar la manera de cambiar el icono del carrito, para qur aparezca un carro de compras en vez de una bolsa. Me podriais dar una mano ?
Buenas,
la plantilla no tiene opciones para cambiar el diseño del carrito
Hola, si se puede pero tienes que modificar el codigo que renderiza el icono, cambiandole la clase por la que prefieras.
Buenas tardes. Muchas gracias por tu atención y por la información que has publicado hasta ahora. La pregunta que tengo es relativa al header. Necesito hacerlo transparente (la portada) y que debajo del menú aparezca una imagen. He visto que se puede hacer poniendo el margen en negativo pero estoy convencido que hay alguna manera más bonita de hacerlo.
Necesito que esta imagen solo aparezca en la portada por lo cual no puedo configurarlo en Header wrapper, sinó en el Page Builder.
Muchas gracias,
Buenas.
No he encontrado otra opción.
En otras plantillas que utilizo habitualmente, como la plantilal Divi de WordPress, lo que suelo hacer es quitar el header por defecto y incluir una barra de menú con el Divi builder (constructor de Divi). Pero en este caso el módulo menú de Elementor es muy pobre, además del problema de quitar el header en la página de inicio con Prestashop que no es una opción directa como en el caso de WordPress
Buenas noches Joaquin, habla Andrés López de Colombia y te compre el tema de warehouse hace ya unos meses y quería pedirte el favor de que me guies como debo poner las imagenes de 840 x 600 ya que no encuentro por donde hacerlo.
Agradesco si me puedes Ayudar.
Hola Andrés.
1.- Primero comentarte, que yo no vendo la plantilla Warehouse. Tengo varios artículos sobre la plantilla Warehouse, tengo un curso online y tengo enlaces a la página de compra, pero yo no la vendo. La plantilla se vende desde ThemeForest. Aquí tienes el soporte oficial de la plantilla: Soporte Warehouse
2.- Imagino que te refieres a las imágenes de fichas de producto. Si es así, prueba en: «PERSONALIZAR > Diseño > Ajustes de imágenes» bloque «Ajustes de imágenes».
Buenas Joaquín,
¿Sabes si existe la posibilidad de poder colocar el teléfono o texto en la barra superior junto al idioma o los logos de redes sociales?
Un saludo y gracias de antemano
Buenas,
Prueba con el módulo IqitLinksManager, modifica el bloque situado en el «displayNav1» que es esa zona del header y añade un enlace personalizado (add custom link)
Buenas,tengo un problema con la plantilla a ver si me podeis ayudar. En la descripcion corta del producto,le doy un formato pero en la lista de productos, esa misma descripcion corta me aparece pero sin ningun formato y sin hacer los saltos de linea que si me salen en la ficha del producto,¿sabriais por que sucede esto?muchas gracias
Buenas Juan.
Seguramente, en la lista de productos existe una configuración CSS específica. Este tipo de consulta hazla en el soporte de Warehouse, a ver si te pueden decir cómo podrías mantener ese formato: https://iqitcommerce.ticksy.com/
Hola Joaquin, como no veo ningún post relacionado con mi pregunto la dejo en este, espero puedas verlo. Como puedo hacer para personalizar el footer de la plantilla, añadir, textos, logo o imágenes de las tarjetas de crédito. Muchas gracias de antemano y Feliz Navidad a todos.
Hola Manu.
La plantilla no tiene un constructor para el Footer, por lo que no vas a poder realizar cualquier tipo de diseño.
El hook, es el displayFooter, y como podrás observar el módulo principal colocado ahí, es el módulo: «IqitLinksManager». Con este módulo podrás crear varias columnas e ir añadiendo textos o enlaces.
Hola Joaquin, ¿seria posible tener cubierto por la/las imagenes en el slider (o home) tanto la parte del megamenu como la del propio slider, al estilo de esto : https://www.houseofcb.com/, donde megamenu y slider aparecen cubiertos por una imagen?
Saludos.
Buenas,
Que yo sepa no es posible.
Buenos días Joaquín,
Muy interesante tu artículo. Queremos instalar esta plantilla en nuestra web pero tenemos ciertas dudas con el header. ¿No habría ninguna opción de que el menú horizontal fuese desplegable? De manera que la estructura fuese:
(Menú desplegable con 3 -) + Logo + Buscador y login
(Como por ejemplo las tiendas online de El Ganso o Purificación García)
Si la plantilla no lo ofreciese, ¿conoces algún módulo que lo haga?
Muchas gracias,
Hola José.
La plantilla dispone de menú horizontal y menú vertical desplegable. El menú vertical se puede colocar en la barra de menú del header (se mostrará un botón tipo hamburguer desplegable) o en barra lateral.
En caso de querer usar el menú vertical, se añadirían los elementos desde el módulo IquitMegaMenu y el menú horizontal se dejaría vació de elementos.
Después desde el themeEditor tenemos las opciones de diseño independientes para el menú vertical y horizontal.
Buenos días Joaquín,
¿Sabes si existe alguna manera de eliminar el icono de la casa del principio del menú?
He mirado por todas partes y no doy con la tecla. Te agradecería mucho que nos indicaras donde está esa opción en el header style 2.
Muchas gracias,
Un saludo
Hola Anabel,
La casa es un item de menú que está añadido al módulo de menú de warehouse. Lo que pasa es que es un item añadido con icono y sin texto.
Revisa este post sobre cómo se gestiona el menú en Warehouse
¡Muchísimas gracias!
Ya he conseguido modificarlo. Gracias por la aclaración
Hola Anabel,
Tambien quiero quitar la casa que aparece podrias decirme cómo lo hiciste
Gracias
Buenas tardes Joaquin
¿sabrías como de decirme para cambiarle el nombre a la plantilla Warehouse por el nombre de mi tienda?
He subido el archivo importando el tema a mi backoffice y he modificado el nombre desde ftp, dándome un error. He vuelto a poner de nombre de nuevo «warehouse» y ha vuelto a funcionar.
He copiado la carpeta Warehouse de mi ftp y la he subido con otro nombre y nada de nada, sigue llamándose Warehouse. ¿como le puedo cambiar el nombre? Gracias de antemano.
Buenas,
No sé como puedes cambiar el nombre de la plantilla,
seguramente cuando le cambias el nombre existirán referencias en el interior de los archivos al nombre antiguo que hacen que no te funcionen.
Consúltale a los desarrolladores a ver si te pueden ayudar
Hola una pregunta,
El soporte de la plantilla wharehouse tiene soporte en español?
Y otra duda, el precio que es anual o una vez que la compras ya no tienes que oagar mas?
Perdonar mi ignorancia
Buenas Manuel.
1.- El soporte es en inglés. Pero vamos, con el traductor de google te sobra para poder comunicarte. Yo lo hago siempre así y no he tenido ningún problema.
2.- El importe se paga una sola vez. Y tienes derecho a actualizaciones de por vida. Es decir, solo se paga una vez.