Opt In Image
DESCARGA GRATIS
1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de spam

 

En este post vamos a aprender a gestionar el menú de la plantilla Prestashop Warehouse y a crear un menú para nuestra tienda Prestashop.

La parte de diseño la veremos más adelante. Ahora nos vamos a centrar en la parte más estructural.

Con la plantilla Warehouse para Prestashop podremos crear un auténtico mega menú con categorías, páginas cms, logos fabricantes, logos proveedores, imágenes de productos, texto personalizado, imágenes subidas, enlaces personalizados y mucho más.

PLANTILLA WAREHOUSE

PAGE BUILDER WAREHOUSE

 

 

 

 

1.- Módulo IqitMegaMenu plantilla Warehouse para crear un menú normal o mega menú.

 

Para crear un menú con la plantilla Warehouse para Prestashop debemos configurar el módulo  IqitMegaMenu.

Para ello iremos a: “MEJORAS > Módulos > Módulos y Servicios”. A continuación haremos clic en la pestaña: “Módulos Instalados”, buscaremos el módulo “IqitMegaMenu” y haremos clic en “Configurar”.

 

mega menu prestashop con iqitMegaMenu

Crear un mega menú con Prestashop y la plantilla Warehouse

 

 

2.- Interface del módulo IqitMegaMenu de la plantilla Warehouse

 

Al acceder a la interface del módulo IqitMegaMenu verás una serie de pestañas en el lateral izquierdo:

Horizontal menu: desde aquí personalizaremos la estructura del menú horizontal de la tienda online. Es en el apartado que nos vamos a centrar en este post.

 

Vertical menu: por defecto está desactivado. Pero podemos activar y utilizar un menú vertical en vez del horizontal.

 

Mobile menu: el menú en versiones móviles es independiente del menú normal y se establece desde este apartado.

 

Aprende a utilizar el flexible page builder de la plantilla warehouse: Page builder Prestashop

 

Predefined submenu tabs: desde aquí podemos crear estructuras de submenús que luego se pueden reutilizar en los menús.

 

Submenu options: opciones de los submenús

 

Predefined custom html content: desde aquí podemos crear contenido de texto que luego podemos reutilizar en los menús.

 

Import/export: desde este apartado podemos importar o exportar estructuras de submenús que luego podremos utilizar en algún menú.

 

Custom links: desde este apartado podemos crear enlaces personalizados. Es decir ítems de menú que apunten a unas determinadas URLs. Estos enlaces personalizados luego los podremos reutilizar en los menús.

 

opciones para la creación de un mega menú con prestashop

Elementos de la interface iqitMegaMenu

 

Nota: en Prestashop 1.7, las opciones de diseño del menú no están en el módulo IqitMegaMenu sino que se establecen desde el theme editor (IqitThemeEditor) al que podemos acceder desde: “MEJORAS > Diseño > IqitThemeEditor”.

 

 

3.- Gestión del menú horizontal de la plantilla Warehouse para Prestashop

 

Para gestionar el menú horizontal de la plantilla Warehouse haremos clic en la pestaña “Horizontal menú”.

Seguramente te aparecerá ya un ítem de menú creado correspondiente a la “home” o “página de inicio”. En la página de inicio este ítem se corresponde con el icono tipo casa que hay en el menú (sin texto).

Para añadir un nuevo ítem de menú o pestaña haremos clic en el icono “+” que aparece en la parte superior derecha del bloque “HORIZONTAL TABS LIST”

 

cómo añadir un nuevo item de menú a prestashop con warehouse

Añadir un nuevo item de menú a la tienda online

 

 

3.1.- Opciones de configuración ítem de menú de Warehouse

 

Ahora se abrirá una nueva interface con las opciones de configuración de la nueva pestaña o ítem del menú que estamos creando con la plantilla Warehouse para Prestashop. Vamos a ver las opciones más importantes:

Active: para activar o desactivar y ocultar el ítem de menú.

 

Title: nombre del ítem que aparecerá en el menú

 

Hide title: esta opción sirve para que no se muestre texto en el ítem de menú y que solo se muestre un icono como es el caso del ejemplo del ítem de menú de la home o página de inicio.

 

Icon Type: esta opción sirve para elegir el icono que quieres que se muestre delante del texto del ítem de menú.

i.- font icon class name: marca esta opción si quieres utilizar la biblioteca de iconos de que dispone la plantilla warehouse

ii.- image icon: marca esta opción si quieres subir un icono personalizado o no quieres que se muestre ningún icono.

Nota: si no quieres que se muestre ningún icono marca la opción “image icon” y no subas ningún icono.

 

Icon class / Icon: si elegiste la opción “Font icon class name” ahora podrás elegir el icono que quieras de la biblioteca. Si marcaste la opción “Image icon” ahora podrás subir el icono personalizado que quieras (si no subes ningún icono el ítem de menú solo tendrá texto).

 

URL Type: desde aquí podremos elegir si queremos que el texto del ítem de menú enlace a una categoría, a una url personalizada o no tenga enlace.

i.- Content URL: el ítem de menú podrá enlazar una categoría, una página CMS, fabricante, proveedor, o un enlace personalizado.

ii.- Custom URL: URL personalizada

iii.- No URL: el ítem no iría enlazado a ninguna página.

 

cómo añadir un elemento del menú a la tienda online

Opciones en la creación de un elemento del menú prestashop con Warehouse

 

Legend: esto es opcional y es un texto que se muestra encima del texto del ítem de menú a modo de leyenda.

 

Legend icon class: esto sería el icono que iría junto a la leyenda que hemos visto en el apartado anterior.

 

leyenda junto al elemento del menu prestashop

leyenda (legend) opcional que aparece junto al item de menú

 

New Window: seleccionaremos “SI” si queremos que el enlace se abra en una nueva pestaña del navegador

 

Float right: para llevar el ítem de menú al lateral derecho de la barra de menú.

 

Opciones de diseño: a continuación podrás ver una serie de opciones de diseño como: Main link background color, Main link text color, etc.

 

No vamos a ver opciones de diseño en este post, lo haremos en otro post dedicado exclusivamente al diseño del menú.

Además estas son opciones específicas de este ítem de menú, pero la personalización del diseño general del menú lo veremos desde las opciones del tema: IqitThemeEditor

 

 

 

3.2.- Creación de submenús con plantilla Warehouse

 

En el apartado anterior veíamos como crear una nueva pestaña o elemento del menú. Pues bien, al final de la interface del apartado anterior hay dos opciones dedicadas a la creación del submenú que dependerá del ítem que estábamos creando.

 

Submenu type and status: aquí seleccionaremos si el ítem de menú tiene un submenú o no

i.- Grid submenu: elegiremos esta opción si queremos añadir un submenú que vamos a crear en este momento. Es la opción que vamos a elegir para continuar con el post.

ii.- Predefined tabs: tomaremos esta opción si queremos añadir un submenú que creamos con anterioridad.

iii.- hidden: elegiremos esta opción si no existe submenú

 

Submenu width: elegida la opción “grid submenu” ahora elegiremos la anchura que va a tener el panel que se despliegue al poner el ratón sobre el elemento del menú. El panel más ancho sería 12/12 y el más estrecho sería 1/12

 

Añadir fila del submenú:

+Row: Para añadir una nueva fila al submenú haremos clic en el botón “+Row”

 

añadir fila mega menu plantilla warehouse prestashop

Añadir una fila al submenú con Prestashop y tema Warehouse

 

Añadir columna del submenú

+Column: ahora haremos clic en el botón “+Column” para añadir una primera columna en el submenú.

añadir una primer columna menu plantilla warehouse

Añadir una columna a la fila del mega menú que hemos creado

 

Personalizar columna del submenú:

i.- Column width: aquí estableceremos la anchura que ocupará esta columna del submenú. La anchura la estableceremos sobre 12. 1/ 12 sería la anchura más pequeña y 12 /12 la más grande.

ii.- Column content: Empty (significa que no hay ningún contenido)

iii.- Edit content: para añadir contenido al menú haremos clic en este botón.

 

plantilla warehouse creando columna del mega menu

Primera columna creada en el submenú prestashop warehouse

 

 

3.2.1.- Crear contenido del submenú

 

Al hacer clic en el botón “Edit content” aparecerá una ventana emergente o pop up con una serie de opciones de personalización que vamos a ver ahora.

 

Column title: si queremos que la columna tenga un titular, éste lo pondremos aquí

 

Column title link: aquí pondremos una url opcionalmente si queremos que el título apunte a una determinada URL

 

Title legend: aquí pondremos opcionalmente un texto que aparecería a modo de leyenda sobre el título.

 

Content type: aquí seleccionaremos el tipo de contenido que queremos añadir a la columna del submenú que estamos creando

i.- Empty: sin contenido

 

ii.- Suppliers logos: mostrar proveedores de la tienda que deben estar previamente creados.

Select suppliers: seleccionaremos proveedores que queremos mostrar

Logos per line: número de logos por a mostrar por línea.

 

iii.- Banner image: esta opción es muy interesante ya que nos permite añadir una imagen a la columna, algo muy típico de los mega menús.

Image source: haremos clic en el botón “select image” para elegir o subir la imagen que queremos mostrar.

Image link: desde aquí podemos añadir opcionalmente un enlace para la imagen.

Alt: etiqueta “alt” asociada a la imagen.

 

iv.- Manufacturers logos: mostrar logos de fabricantes

select manufacturers: elegir los fabricantes que queremos mostrar.

Logos per line: número de logos a mostrar por línea.

 

v.- Products: mostrar productos en la columna del submenú

Search products: aquí pondremos el nombre de los productos que queremos añadir al menú y haremos clic sobre él y de esta manera irán apareciendo en el apartado siguiente de productos seleccionados (Selected products)

Select view: desde aquí elegiremos la forma en la que queremos mostrar los productos (imagen grande o pequeña)

 

vi.- Various Links: elegiremos esta opción si queremos mostrar categorías (aisladas sin subcategorías), páginas cms, proveedores o fabricantes.

Si elegimos categorías, éstas NO mostrarán las subcategorías que dependen de las primeras. Esto ocurriría si seleccionamos “categorías tres” como veremos en el siguiente apartado.

Select links: aquí marcaremos los elementos que queremos mostrar. Para seleccionar más de un elemento mantendremos pulsada la tecla “Ctrl” mientras hacemos clic en los diferentes elementos.

Select view: aquí elegiremos la forma de mostrar los elementos vertical u horizontalmente.

 

añadir elemento al mega menu como categorias

Añadir elementos al mega menu como categorías, páginas cms y otros

 

vii.- Categories tree: con esta opción elegiremos categorías que queremos mostrar y que a su vez mostrarán las subcategorías que dependan de la primera. Si no queremos que se muestren las categorías hijas deberemos trabajar con “Various links” (apartado anterior) en vez de “Categories tree”.

Categories: marcaremos la categoría o categorías que queremos mostrar teniendo en cuenta que también aparecerán las subcategorías que dependan de las categorías que marquemos.

Depth limit: límite de niveles de subcategorización que mostrará el menú.

Subcategories limit: número máximo de subcategorías dependientes de una categoría que se mostrarán en el menú.

 

viii.- Html content: otra interesante opción que nos permite añadir texto personalizado en la columna del menú.

Custom Html content: aquí seleccionaremos el texto que queremos mostrar que deberemos haber creado previamente desde “Predefined custom html content”.

Añadido los elementos de la columna haremos clic en guardar.

A continuación podemos ir añadiendo nuevas columnas en el submenú siguiendo el mismo proceso descrito en el apartado “añadir columna del submenú” del apartado 3.2

Ahora puedes ver un ejemplo de estructura de submenú de 4 columnas de 3 /12 cada una.

 

mega menu prestashop theme warehouse 4 columnas

Mega menu 4 columnas

Resultado ejemplo anterior

 

resultado mega menu 4 columnas prestashop warehouse

Mega menú 4 columnas

 

 

Bloguer especializado en Woocommerce / WordPress, Divi y Prestashop. Me dedico a impatir formación y a la creación de páginas web, blogs y tiendas online.Mi otro blog, especializado en WordPress y Divi: horizonweb.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información Aquí,plugin cookies

ACEPTAR
Aviso de cookies