En el momento de escribir este post, la plantilla Warehouse nos ofrece hasta 13 demos que podemos utilizar en nuestro Prestashop 1.7
Pero poco a poco los creadores de la plantilla Warehouse van añadiendo nuevas demos que podemos utilizar para la creación de nuestra tienda online.
Podemos utilizar la plantilla Warehouse para construir una tienda online con un diseño a nuestra medida, pues dispone de herramientas muy potentes como el page builder Elementor para construcción de contenido de home y resto de páginas, y de un potente configurador de temas para los diseños de header y footer. Pero podemos partir de alguno de los diseños profesionales que nos regalan los creadores de la plantilla Warehouse.
En este post vamos a aprender a importar esas demos o diseños de tienda de ejemplo a nuestro Prestashop.
QUIERO LA PLANTILLA WAREOHUSE
ÍNDICE DEL POST
- 1.- Demos o diseños predefinidos que podemos utilizar con nuestra plantilla Warehouse para Prestashop 1.7
- 2.- Acciones previas antes de importar una demo o diseño para la plantilla Warehouse
- 3.- Descargar demos de la plantilla Warehouse
- 4.- Importar diseño general del tema
- 5.- Importar diseño de home page o página de inicio
- 6.- Importar el diseño de página también para otros idiomas que tengamos activos
1.- Demos o diseños predefinidos que podemos utilizar con nuestra plantilla Warehouse para Prestashop 1.7
En el momento de crear este post hay 13 diseños diferentes, pero poco a poco los creadores de la plantilla Warehouse irán añadiendo más demos nuevas.
Desde este enlace puedes ver todas las demos que podemos reutilizar en nuestro Prestashop 1.7:
Si haces clic en alguno de los diseños, verás la demo en vivo de ese diseño.
Demos disponibles para cargar en nuestro Prestashop
2.- Acciones previas antes de importar una demo o diseño para la plantilla Warehouse
Antes de importar una demo de la plantilla Warehouse es recomendable realizar las siguientes acciones sobre tu Prestashop:
i.- Desactivar cache smarty: si tienes activada la caché, desactívala y vacía la caché. Tras hacer la importación y ver el resultado puedes volver a activarla.
Para desactivar la caché ve a: “CONFIGURAR > Parámetros avanzados > Rendimiento” y realiza las siguientes acciones:
a.- Bloque SMARTY: en el bloque smarty, pon el selector “CACHE” en “NO”, y la opción de “Compilación de plantillas” en “Recompilar las plantillas cuando los archivos sean modificados”.
A continuación, haz clic en el botón “Guardar” y después en el botón “Vaciar cache”.
Desactivar caché smarty y vaciar caché
b.- CCC: Un poco más abajo verás un bloque denominado: “CCC (COMBINACIÓN, COMPRESIÓN Y CACHÉ)
Pon en «si» los selectores: “Smart cache” para las hojas de estilo (CSS), “Smart cache” para el código de JavaScript y Optimización de Apache.
A continuación, haz clic en el botón “Guardar”.
Opciones de CCC en SI
Nota importante: Al activar los elementos del bloque CCC es posible que te aparezca un error en la web, y que posteriormente no puedas acceder al panel de administración.
Algunos hostings tienen desactivada por defecto la función ini_set() en la configuración del servidor por motivos de seguridad.
Si este es tu caso, ponte en contacto con tu empresa de hosting para que te activen la función.
3.- Descargar demos de la plantilla Warehouse
Como te comentaba en el apartado 1, puedes ver todas las demos para Warehouse y Prestashop 1.7 haciendo clic en el siguiente enlace
Para descargar los archivos de todas las demos, puedes hacer clic en el siguiente enlace y después, haz clic en «IR AL SITIO WEB»:
DESPÚES HAZ CLIC EN «IR AL SITIO WEB»
Obtendrás una carpeta para cada una de las demos disponibles para importar en tu Prestashop con la plantilla Warehouse.
Debes descomprimir el archivo que te has descargado.
4.- Importar diseño general del tema
A la hora de importar una demo, tendremos principalmente dos elementos diferentes a importar: importar el diseño general e importar el diseño de la página de inicio.
Vamos a ver en este apartado como importar el diseño general de la demo (diseño general del tema), que haremos desde el editor de temas tipo backend.
Para ello iremos en el panel de administración de Prestashop a: “MEJORAS > Diseño > IqitThemeEditor – Backoffice”
Ahora, en el menú lateral seleccionaremos la pestaña: “Import/Export configuration”.
En el apartado “Import Configuration”, haz clic en el botón “Examinar” y selecciona dentro de la carpeta correspondiente al diseño que quieras utilizar (del archivo comprimido que nos descargamos en el apartado 3) el archivo de configuración general de la demo, que tendrá un nombre del estilo a este: “iqitthemeeditor_config.json”.
Después, haz clic en el botón “Import”.
Importar diseño general de demo
Formato del tipo de archivo a importar
5.- Importar diseño de home page o página de inicio
Ya hemos importado la configuración general del tema o plantilla correspondiente a la demo que queremos cargar en nuestro Prestashop. Esto influye principalmente sobre el diseño del header y footer.
Ahora vamos a importar el contenido de la home o página de inicio de la demo.
En principio, lo lógico sería importar la home correspondiente a la misma demo que utilizamos para importar la configuración general del tema. Pero, en realidad podemos importar la home de otra demo diferente.
Para importar la home de una de las demos iremos a: “MEJORAS > Diseño > Iqit Elementor – Page builder”.
A continuación, haremos clic en el botón “Modificar” de la página en la cual queramos cargar el diseño de la demo.
A continuación, haremos clic en el botón “Edit with Elementor – Visual Page builder”.
5.1.- Borrar contenido de la página
Lo primero que haremos será borrar el contenido actual de la página. Para ello haremos clic en el “icono de tres rayas” que aparece en la parte superior izquierda.
Se desplegarán varias opciones. Haremos clic en “Delete all content” y luego en “OK”
Borrar contenido de la página antes de importar nuevo diseño
5.2.- Cargar demo de la página
Ahora haremos clic en el icono formado por nueve pequeños cuadrados, que aparece en la parte superior.
A continuación, haremos clic en el “icono en forma de carpeta” que aparece en la parte inferior de la barra lateral, y en el desplegable seleccionaremos: “Templates Library”
Cargar plantilla o demo en la home con plantilla warehouse prestashop
En la ventana emergente que nos aparece haremos clic en el icono con una flecha hacia arriba, que aparece en la parte superior derecha.
Subir demo para página con plantilla warehouse
Después haz clic en donde dice: “Select template .json file” y se abrirá una ventana para que selecciones un archivo de demo de home.
El tipo de archivo que has de buscar tendrá un nombre como este: “iqitelementor_template.json”
Seleccionar archivo de demo a subir
A continuación, haz clic en el botón: “LOAD”.
Ya está subido el diseño a la biblioteca. Ahora hay que insertarlo en la página.
Te aparecerá una barra horizontal con el diseño que hayas elegido. Pon el ratón sobre el rectángulo y haz clic en el botón: “INSERT”.
Insertar demo cargada en la biblioteca de la plantilla warehouse
Ya tienes insertada una demo en la home.
A continuación, guarda con el botón “SAVE”.
Ve a la home y:
- Refresca navegador: CTRL + F5 para refrescar página y volver a cargar archivos CSS
- Borrar caché del navegador: para que se vuelva a cargar la página
6.- Importar el diseño de página también para otros idiomas que tengamos activos
Para utilizar el diseño o demo que hemos importado para la página de inicio de un idioma, en otros idiomas que tengamos activos en Prestashop haremos lo siguiente:
i.- Seleccionar idioma: en la parte superior de la barra lateral derecha verás un selector con nombre: “Editing”.
Haz clic en el selector y elige el idioma al que quieres añadir la demo.
ii.- Borrar diseño: a continuación, haz clic en el icono de tres rayas horizontales que aparece en la parte superior y selecciona: “Delete all content” y “OK”.
iii.- Importar diseño de otro idioma: ahora haz clic en el icono con forma de dos páginas que aparece a la derecha del selector Editing.
En el desplegable selecciona el idioma en el que estableciste la demo en el apartado anterior, y luego haz clic en “OK”
No olvides hacer clic en el botón “SAVE” para guardar los cambios.
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 Joaquin
Tengo una pregunta:
siguiendo el video «Añadir Pestañas personalizadas a Productos» no consigo dejarlo abierto y como puedo ordenar las pestañas actuales y las nuevas
gracias
Hola Miquel,
Haz tu consulta a través del soporte de la academia online: https://cursotiendaonline.com/
Hay muchos tipos de cuestiones que no se contestan a través de los comentarios del blog, por muchas circunstancias.
tengo una web ya veterana con warehouse, he visto que ha actualizado la plantilla que yo instale.
si vuelvo a instalar la mismo demo actualizara la plantilla con las mejoras? me cargare todo el diseño anterior?
ambas cosas?
Muy buenas Itoiz,
Si actualizas el tema Warehouse, lo que ocurrirá es que se cargarán nuevas funcionalidades y posibles mejoras de seguridad. Pero, tu web debe verse después exactamente igual a como la tienes actualmente.
Revisa también tu versión de Prestashop a ver si es la adecuada para la última versión de Warehouse (lo puedes ver en la página oficial de warehouse).
En cualquier caso, te recomiendo copia de seguridad, por si las moscas
Si quieres más sobre actualizaciones y copias de seguridad, tengo un curso específico sobre esto en mi plataforma: https://cursotiendaonline.com/project/curso-actualizaciones-y-seguridad-prestashop/
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!! para consultas). En la plataforma tienes cursos sobre Prestashop, plantilla warehouse, Curso seguridad y actualizaciones Prestashop, Blog Prestashop, Copywriting, curso claves para crear una tienda online, Analytics ecommerce, SEO General, SEO Tiendas online, Curso Indexación web, Google search console, Curso WordPress, Woocommerce, Curso Divi, Curso Flatsome, etc. etc. (Más de 30 cursos)
Acojonante. Mil gracias! Muy bien explicado! Que no sabía como llevarlo a cabo.
Hola David.
Me alegro que te gustara el post:
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 Prestashop, Warehouse, Curso claves para crear una tienda online de éxito, Curso alta en google e indexación web, SEO General, SEO Ecommerce, Analytics tiendas online, Blog Prestashop, Curso Copywrting, Woocommerce, WordPress, etc. etc.
Estimado, una consulta, no e si le ha pasado, tengo PS 1.7.6 con la plantilla warehouse, y después de iniciar sesión no hay manera de cerrarla de nuevo, dandole al boton cerrar sesíon no lo hace.
tengo activado el protocolo
https://wwwBuenas Carlos.
¿Te refieres a que no puedes cerrar sesión en la administración de Prestashop como administrador?
buenos dias
hace un años contrate a traves de una empresa que contrato a otra una web llave en mano de prestashop
s me han dejado para el final sin tocarla por que tenian clientes mas importantes semanas y meses enteros hasta que ha expirado el contrato de un año a pesar de que han tocado las narices y eran ellos los k no hacian nada
el warehouse esta instalado pero queria cambiar a otro diseño por que si te enseño la web sera las fea que has visto en tu vida
como puedo cargar una demo con otro diseño?
Hola Eusebio,
En este mismo post tienes un vídeo donde se explica como se importan diseños predefinidos en Warehouse. Además, del post en sí donde se explica también con texto.
Hola gracias a todos tus tutoriales compré esta plantilla pero tengo un problema. Quiero usar el cms nosotros para la parte de nosotros PERO NO VIENE CON EL EDITOR O CONSTRUCTOR, sino solo aparece nativa para prestashop. Como puedo hacer para que los cms de prestashop se puedan editar con el constructor de la plantilla warenhouse. Mil gracias estoy loca con esto.
Buenas Alejandra.
Comprueba en «Diseño > Posiciones» que el módulo IiqitElementor está añadido a estos hooks:
displayBlogElementor
displayCMSDisputeInformation
displayProductElementor
displayCategoryElementor
displayBackOfficeHeader
displayHome
Buenos días Joaquin.
Se puede implementar una demo, tal y como la vemos y posteriormente cambiar imágenes, textos, logos, colocación de banner.
He descargado las demo, pero veo que no tienen el contenido (imágenes) que se ve en demostración.
Iniciando warehouse.
Gracias.
Buenas.
No, las demos no cargan las imágenes que tienen licencia de autor.
Pero puedes descargarlas de la demo y luego subirlas a tu web, si quieres ver las imágenes colocadas. Pero, lo ideal es ya sustituirlas por las tuyas
Buenas tardes Joaquín. Muchas gracias por tu información. Quisiera preguntarte ¿cómo es posible usar la plantilla Warehouse de forma gratuita si realmente está en venta en su página? ¿es por un periodo de prueba?…Muchas gracias
Hola Carlos.
1.- Yo no vendo la plantilla. En mi web hay enlaces a la página de ThemeForest donde se vende, pero yo no la vendo: Enlace compra plantilla Warehouse
2.-En mi plataforma de cursos online de diseño web & ecommerce tampoco se ofrece de manera gratuita la plantilla, pues la licencia no lo permite, ni tampoco un periodo de prueba.
Muchas gracias por tu amable explicación.
Gracias por aportar en Español el tutorial de una de las plantillas más usadas por la comunidad, estaría bien que tambien hicieras algo sobre como pode rimportar las imagenes, ya que al hacer la importacion basica como tu dices las imagenes d ela demo no se importan…
Hola Joaquín,
Muy interesante tu blog. Sin duda ha sido decisivo a la hora de comprar esta plantilla.
Te quería preguntar una duda que llevo días intentando solucionar pero no hay manera. Seguro que es más fácil de lo que parece, pero no doy con la tecla.
He importado el diseño Style 9 de la plantilla Warehouse en Prestashop 1.7. En el menú horizontal hay un desplegable que se llama Navigation con tres rayas horizontales a su izquierda. Pues bien, me gustaría quitarlo porque es la única pega que le encuentro a este estilo de plantilla, lo demás lo veo perfecto. Pero no doy con la tecla.
¿Me puedes ayudar con esto?
Muchísimas gracias!!
Hola Anabel,
Las tres rayitas que comentas es solo una opción de personalización de ese item o elemento de menú. No es algo implícito al diseño o estilo 9 de los ejemplos de la plantilla Warehouse (lo que pasa esque este diseño lo ha personalizado así). Es decir, que al crear ese primer item de menú, se le ha añadido ese icono de las tres rayitas.
Mira este post sobre como gestionar el menú en Warehouse detenidamente y verás como puedes sustituir o eliminar ese icono del item de menú.
¡Muchas gracias! Ya he averiguado como era.
El menú vertical estaba activado. Al desactivarlo se ha quitado automáticamente.
El artículo que me enlazas también lo he utilizado para guiarme a la hora de crear el menú. Muchas gracias de nuevo
Gracias a ti.
Un saludo