Cabecera

Introducción

La Cabecera es la sección presente en la parte superior de cada tema de Jumpseller y es una de las secciones más importantes para cualquier tienda Ecommerce.

Proporciona acceso a muchos de los elementos clave que permitirán a los clientes navegar por tu tienda, como tu Logo (o nombre de la tienda), los elementos de Moneda e Idiomas, el elemento de Carro, entre otros que se explicarán más adelante en esta página.

En términos del Editor visual de tu tienda, aunque la Cabecera en sí también es un Componente, no puede moverse ni reubicarse en otro lugar como el resto, ya que debe mostrarse y aparecer siempre en la parte superior de cada Plantilla (por ejemplo, Página de inicio, Categorías, Productos, etc.) para proporcionar una funcionalidad y presentación consistentes.

Ajustes del componente

A continuación, puedes encontrar la lista de opciones que te permitirán personalizarlo.

Versión de Cabecera

Esta opción te permite elegir entre diferentes diseños de Cabecera, cuyas diferencias varían en aspectos como los siguientes:

• La posición del Logo o del nombre de la tienda.
• La posición y apariencia de la barra de búsqueda.
• Dónde y cómo se posicionan los enlaces de redes sociales, si están activados.
• Cómo y dónde se muestran los elementos de navegación del menú principal.
• Si el Menú de escritorio se muestra, y dónde y cómo.
• La posición de los elementos de la Cabecera como Inicio de sesión, Idiomas, Lista de deseos y Carro.

A continuación, encontrarás algunos ejemplos de cómo se ve cada versión, para que tengas una visión clara de lo que podrías lograr al elegir cualquiera de ellas.

Nota: Aquí nos referiremos principalmente a las diferencias en dispositivos Desktop, ya que en dispositivos móviles la mayoría de las versiones son básicamente iguales en términos de diseño, con solo pequeñas diferencias entre ellas.

Classic

Esta versión es la que vendrá instalada por defecto una vez que crees una tienda en Jumpseller, o cuando instales el tema Simple. Dentro de sus características más importantes podemos destacar las siguientes:

• El Logo o nombre de la tienda siempre se posiciona al centro.
• La barra de búsqueda es un formulario en el que puedes escribir directamente para buscar productos, y siempre está posicionada en el lado izquierdo.
• En el lado derecho de la Cabecera, encontrarás los elementos para que los clientes realicen distintas acciones, como por ejemplo Iniciar sesión e Idiomas.
• En la parte inferior, el Menú de escritorio es completamente visible y se oculta en dispositivos móviles.

Retail

Esta versión es la que viene seleccionada por defecto en el tema Mega. Si no lo instalaste, pero quieres lograr lo que se ve en la imagen superior, hay ciertas opciones que deberás activar:

1. Ve a los ajustes del componente Cabecera y elige Retail.
2. Luego, activa la opción Mostrar menú de categorías, en cuyo caso podrás editar las opciones que se volverán visibles.
3. Abre el grupo Otras opciones y dentro de la opción Visualización de acciones de la cabecera elige Barra superior. También puedes activar la opción Mostrar enlaces de redes sociales.
4. Luego, vuelve atrás y accede a los ajustes del Menú de escritorio, y dentro de la opción Alineación del menú elige Izquierda.

Compact

Esta versión es la que viene seleccionada por defecto en el tema Starter. Si no lo instalaste, pero quieres lograr lo que se ve en la imagen superior, hay ciertas opciones que deberás activar:

1. Ve a los ajustes del componente Cabecera y elige Compact.
2. Luego, abre el grupo Otras opciones y activa la opción Mostrar enlaces de redes sociales, para que estos sean visibles en el lado izquierdo de la Cabecera.

Prime

Esta versión ofrece una apariencia más minimalista, donde algunos elementos se comportan de una manera diferente a las versiones anteriores, como por ejemplo los siguientes:

• el Logo o nombre de la tienda siempre estará posicionado al centro.
• el Menú de escritorio no será visible en ningún dispositivo y, por lo tanto, todos los elementos de navegación del menú principal se mostrarán dentro del panel del Menú móvil.
• el Menú móvil será el que se utilizará en todos los dispositivos, Desktop y móvil.
• la barra de búsqueda se abrirá sobre la Cabecera a través de un botón, de la misma forma en que lo hace en las versiones anteriores de Cabecera en dispositivos móviles.
• los enlaces de redes sociales se mostrarán en el lado izquierdo de la Cabecera, si están activados.
• los elementos del menú de categorías se mostrarán dentro de un panel, que puede abrirse mediante un botón de manera similar al Menú móvil.

Nota: el componente Menú de escritorio, aunque esté activo, no se mostrará en la tienda.

Slim

Esta versión ofrece una apariencia más “delgada”, de ahí su nombre, donde los elementos están pensados para usar la menor cantidad de espacio posible. Funciona de forma similar a la versión Prime, pero considerando las siguientes diferencias:

• El Logo o nombre de la tienda siempre estará posicionado en el lado izquierdo de la Cabecera.
• el Menú de escritorio será visible en dispositivos Desktop junto con el resto de los elementos.
• el Menú móvil se usará en dispositivos más pequeños y podrá abrirse a través del elemento Menú.
• la barra de búsqueda se abrirá sobre la Cabecera a través de un botón, de la misma forma en que lo hace en las versiones anteriores de Cabecera en dispositivos móviles.
• los enlaces de redes sociales se mostrarán en el lado derecho de la Cabecera, si están activados.
• el menú de categorías se mostrará como el primer elemento de la lista y será accesible a través de su respectivo panel en dispositivos móviles.

Minimal

Esta versión de la Cabecera ofrece una experiencia diferente, enfocada en el comportamiento de búsqueda mediante la visualización de un campo grande y ancho que cubre la mayor parte del espacio, así como una barra de navegación secundaria que se muestra en dispositivos móviles. Viene ya seleccionada si eliges instalar el tema Delivery.

Los elementos dentro de esta sección se comportarán de la siguiente manera:

• El Logo o nombre de la tienda siempre estará posicionado en el lado izquierdo.
• Tanto los menús Desktop como Categorías son accesibles a través de sus respectivos elementos, abriendo un panel lateral para cada uno. De esta forma, la experiencia en todos los dispositivos es exactamente la misma.
• Los elementos Carro e Inicio de sesión se muestran en el lado derecho de la Cabecera en dispositivos grandes. En dispositivos móviles, se mostrarán en la barra de navegación ubicada en la parte inferior del navegador.
• La barra de búsqueda se mostrará en la Cabecera para dispositivos que tengan un ancho igual o superior a 576px. Para dispositivos con menos de ese ancho, será accesible a través de una ventana modal que se muestra en la parte superior de la ventana del navegador.
• Elementos como Idiomas, Moneda y redes sociales siempre se mostrarán dentro del panel del Menú móvil.

Barra de navegación móvil

Como se mencionó, esta versión de la Cabecera muestra automáticamente una sección secundaria, ubicada y fija en la parte inferior de la ventana del navegador. Su enfoque está en proporcionar una experiencia similar a las apps de “Delivery”, ofreciendo dentro de ella los enlaces y elementos más útiles. Estos son los siguientes (de izquierda a derecha):

• Enlace de Inicio: se muestra en el lado izquierdo de la barra de navegación, permitiendo a los clientes ir rápidamente a la página de inicio de la tienda.
• Botón de Categorías: si activaste la opción Menú de categorías dentro de los ajustes de la Cabecera, el Enlace de Inicio será reemplazado por otro que abre el panel de Categorías.
• Búsqueda: este elemento es el que permite abrir y mostrar la barra de búsqueda, que será visible en la parte superior de la ventana del navegador.
• Carro: este elemento es el enlace que permite abrir el panel del Carro lateral, que tiene un resumen del pedido del cliente. También contiene el “Contador” que les permite saber la cantidad de artículos que han agregado.
• Inicio de sesión: este elemento proporciona un enlace a la página donde los clientes pueden iniciar sesión en sus cuentas. Si ya iniciaron sesión, se abrirá un menú desplegable con varios enlaces relacionados con su cuenta.
• Contacto: este elemento proporciona un acceso rápido a la página de Contacto de la tienda.

Ancho

Permite definir el ancho máximo al que el componente se extenderá dentro de la ventana del navegador.

Puedes leer más sobre cómo esta opción afectará al componente en esta página.

Fijar cabecera

Te permite fijar la Cabecera en la parte superior de la ventana del navegador, para que siga a los usuarios mientras se desplazan hacia arriba y hacia abajo en la tienda.

Al activar esta opción, también estarán disponibles otras adicionales para ser usadas y aplicadas:

Superposición

Permite colocar la Cabecera por sobre y delante de todo el contenido de la página de inicio de la tienda.

Al activarla, aparecerá una opción llamada Transparencia de superposición con la que podrás definir la transparencia (opacidad) de la Cabecera.

Nota: Esta opción funcionará solo en la página de inicio de tu tienda y se recomienda usarla junto con un componente que tenga una imagen y que esté posicionado en primer lugar, como por ejemplo un Slider o un Banner grande.

Estilo flotante

Permite mostrar la Cabecera con márgenes o espacios superior, derecho e izquierdo para que el contenido detrás pueda verse al desplazarse hacia abajo.

Al activarlo, aparecerá una opción llamada Opacidad de sombra, con la que podrás mostrar una sombra detrás de la Cabecera, para aumentar el contraste con el resto de los elementos dentro del tema.

Barra de herramientas flotante

Permite mover los elementos Carro, Búsqueda e Inicio de sesión fuera de la Cabecera y dentro de su propia sección, con estilos de botón.

Al activarla, aparecerá una opción llamada Posición de la barra de herramientas, con la que podrás elegir su posición.

Opciones del Logo

Este grupo de opciones te permite subir un Logo para la Cabecera, en función de lo siguiente:

Logo

El que subas aquí reemplazará al que agregaste dentro del panel de administración de tu tienda en Configuración > General > Marca.

Al subirlo, aparecerá una nueva opción llamada Logo (móvil) en la que podrás agregar otro solo para dispositivos móviles, que se mostrará en dispositivos con un ancho ≤575px.

Nota: Si no subes ningún logo aquí, se mostrará en su lugar el nombre de la tienda definido en Configuración > General > Preferencias.

Altura del Logo

Encontrarás dos opciones para manejar la altura de los logos, tanto para dispositivos de escritorio como móviles.

Esto se aplicará a los logos agregados a través del componente, así como también al que se haya agregado a través del panel de administración de la tienda.

Items del menú

Este grupo de opciones te permite ajustar aspectos de diseño de los items (enlaces) de los menús Desktop y móvil de la Cabecera.

Tamaños

Con las opciones Tamaño en menú de escritorio y Tamaño en menú móvil puedes ajustar manualmente el tamaño de los elementos al visualizar el menú principal en los respectivos dispositivos.

Items de primer nivel en mayúsculas

Permite forzar que el nombre de los elementos se muestre en texto en mayúsculas, incluso cuando no hayan sido escritos de esa forma: por ejemplo TODOS LOS PRODUCTOS.

Grosor

Permite definir el grosor para todos los elementos.

Nota: Esto dependerá de las variables disponibles de la tipografía que hayas definido para la opción Tipografía principal dentro de Ajustes del tema > Tipografías > Selección de tipografía.

Mostrar como botón

Si está activado, los elementos de menú de primer nivel se mostrarán como botones, solo en dispositivos de escritorio.

Se mostrará una opción secundaria en la que podrás definir el Estilo de los botones, en función de los colores Principal o Secundario del Pack de colores definido para la Cabecera.

Nota: Si configuras un Pack de colores diferente dentro del subcomponente Menú, los botones considerarán los estilos de ese en su lugar.

Items de cabecera

Este grupo de opciones te permite ajustar aspectos de diseño de elementos como por ejemplo Moneda, Idioma, Inicio de sesión y Carro.

Tamaños

Con las opciones Tamaño (desktop) y Tamaño (móvil) puedes ajustar manualmente el tamaño de los elementos al visualizarlos en los respectivos dispositivos.

Borde de separación

Permite mostrar una línea vertical entre los elementos para crear una separación visual.

Nota: esta opción solo será visible al ocupar las versiones de Cabecera 4, 5 y 6.

Otros estilos

Las siguientes opciones permiten realizar y aplicar los mismos efectos que los mencionados arriba, pero en este caso para estos elementos:

• Mayúsculas
• Grosor
• Mostrar como botón: Al activar esta opción, se mostrará otra adicional para definir los estilos del botón.

Mostrar textos

Si está desactivado, los items de la cabecera solo mostrarán íconos y los textos estarán ocultos. En dispositivos móviles, los textos siempre estarán ocultos.

Comportamiento de inicio de sesión

Permite definir el comportamiento que tendrá el elemento Inicio de sesión:

• Menú desplegable: el item mostrará un menú desplegable con diferentes enlaces, dependiendo de si el usuario ha iniciado sesión o no.
• Enlace: será un enlace directo a la Página de cuenta si el usuario ha iniciado sesión; de lo contrario, llevará a la Página de inicio de sesión.

Menú de categorías

Al activar la opción Mostrar menú, se mostrará un menú adicional al inicio de la lista. Los elementos de este serán los que se hayan agregado en Navegación > Menú de categorías.

La posición en la que este se colocará variará dependiendo de la Versión de Cabecera que hayas elegido.

También se mostrarán las siguientes opciones para que puedas personalizarlo:

• Mostrar en: Permite definir en qué dispositivos se mostrará.
• Título: Permite modificar el texto del elemento para este menú.
• Ícono: Permite modificar el ícono que acompaña el texto del elemento.
• Mostrar como botón: Permite aplicar un estilo de botón al elemento que abre el menú desplegable. Este estilo también se aplicará si activas Mostrar como botón dentro del grupo Elementos del menú superior.
  • Estilo: Permite definir el estilo del botón, de la misma forma en que se explicó arriba. Esto sobrescribirá la otra opción Estilo dentro de Elementos del menú.

Apariencia

Este grupo de opciones te permite definir otros aspectos de diseño y comportamientos de la Cabecera.

Borde inferior

Permite mostrar un borde en la parte inferior de la Cabecera. Esto puede ayudar a crear una separación visual entre este componente y el resto del contenido que viene después dentro del tema.

Posición de acciones

Permite definir la posición en la que se mostrarán los elementos Monedas e Idiomas.

Al elegir Barra superior dentro de esta opción, hay algunas cosas que debes considerar para que funcione correctamente:

• Necesitas haber agregado un componente Barra superior dentro de la Cabecera, y tener al menos un Slide de Barra superior.
• Necesitas tener al menos 2 o más Monedas, y/o 2 o más Idiomas agregados dentro de los ajustes de tu tienda.
• Si no tienes más de un Idioma y/o Moneda, y configuras las acciones para que sean visibles en la Barra superior, verás un espacio en blanco en el lado derecho de esta sección.

Enlaces de redes sociales

Permite mostrar todos los enlaces (y sus íconos) que puedes agregar en el panel de administración de tu tienda en Configuración > General > Preferencias > Redes sociales.

La posición en la que aparezcan estos enlaces dependerá de cada Versión de Cabecera.

Colores del contenido

Permite elegir el Pack de colores para la Cabecera.

Menús utilizados en este contexto

Proporciona un enlace directo a la configuración de los menús de navegación que utiliza este componente. Para este caso encontrarás los siguientes:

• Menú principal
• Menú de categorías

Menú (desktop)

El Menú es un subcomponente de la Cabecera y te permite mostrar los elementos de navegación definidos en Personalización > Navegación > Menú principal para dispositivos Desktop con un ancho igual o superior a 992px.

Este menú se ocultará en dispositivos con un ancho igual o inferior a 991px, y cuando eso ocurra, se mostrará un elemento en el lado izquierdo de la Cabecera, que permitirá abrir el Menú móvil al hacer clic.

Este elemento también se mostrará si eliges ocultar el subcomponente Menú.

Puedes encontrar más detalles sobre esto en esta sección de la documentación.

Las opciones disponibles para personalizarlo son las siguientes:

Diseño

Este grupo contiene opciones para cambiar el diseño del componente.

Ancho

Permite definir su ancho en función de las siguientes opciones:

1. Ancho de la cabecera: Expandirá el contenido del menú según la opción definida dentro de los ajustes de Ancho de la Cabecera.
2. Ancho completo: Expandirá el contenido al ancho máximo del navegador, independientemente del Ancho definido en los ajustes de la Cabecera.

Borde superior

Permite mostrar un borde en la parte superior del menú, para separarlo del resto del contenido que se encuentra por encima.

Espacio izquierdo y derecho

Permite decidir si el menú tendrá un espacio en los lados izquierdo y derecho del navegador. Útil si eliges usar la opción Ancho completo de arriba.

Alineación

Permite definir la alineación de los elementos presentes en el menú.

Si activaste la opción Enlaces de redes sociales y estos se muestran dentro del menú, la alineación funcionará de la siguiente manera:

• Izquierda: Los elementos del menú se posicionarán en el lado izquierdo, mientras que los enlaces sociales estarán a la derecha.
• Centro: Todos los elementos, incluidos los enlaces sociales, se alinearán y posicionarán al centro de la sección.
• Derecha: Los elementos del menú se posicionarán en el lado derecho, mientras que los enlaces sociales estarán a la izquierda.

Personalizar colores

Con esta opción puedes definir un Pack de colores individual solo para este menú, para que se diferencie del resto del contenido de la Cabecera.

Al activarla, se mostrará la opción Colores del contenido, en la que puedes elegir un Pack de colores para usar.

Submenús

Este grupo de opciones te permite definir el comportamiento de los Submenús, que son una listado de elementos para un item que tiene niveles interiores.

Evento de apertura

Define el evento del mouse que abrirá un menú desplegable para los elementos de primer nivel que tengan subelementos dentro.

Dependiendo de lo que elijas, esto cambiará la forma en que se comportan los elementos de primer nivel, por lo que es importante considerar lo siguiente:

• Al hacer clic:
  • El menú desplegable solo se abrirá una vez que un usuario haga clic en el elemento de primer nivel, y se cerrará al hacer clic en cualquier otra parte fuera de él.
  • El elemento de primer nivel no llevará a ninguna página al hacer clic sobre él, por lo tanto, si esto es por ejemplo una categoría, solo será accesible haciendo clic en el elemento “Ver todo” al final de la lista del menú desplegable, si está activado.
• Al pasar el cursor (o mouseover):
  • El menú desplegable se abrirá una vez que el usuario pase el mouse sobre el elemento, y se cerrará automáticamente una vez que el mouse se posicione fuera de su área.
  • El elemento de primer nivel llevará al contenido que se haya definido en la configuración del Menú principal de la navegación (por ejemplo, categoría, producto, página, etc.).
  • La única instancia en la que no llevará a ningún contenido de la tienda al hacer clic, será si el tipo de elemento es igual a Sin URL.

Estilo

Permite definir la apariencia de los Menús desplegables, en función de dos opciones:

Flyout

Los subelementos se apilarán uno debajo del otro verticalmente. Si alguno de estos también tiene niveles internos, se mostrarán al lado derecho.

Considera lo siguiente sobre el comportamiento de esta opción:

• Los menús desplegables anidados heredarán el “evento del mouse” definido en la opción superior, por ejemplo, tercer, cuarto y niveles más profundos.
• Toma en consideración la cantidad de subelementos dentro de cada menú desplegable, ya que si agregas demasiados y la lista se vuelve extremadamente grande, lo más probable es que los últimos no sean completamente visibles dentro de la ventana del navegador.

Mega Menu

Los subelementos se distribuirán dentro de columnas en un menú desplegable grande y ancho, para permitir suficiente espacio para que todos sean visibles.

Considera lo siguiente sobre el comportamiento de esta opción:

Profundidad: Se recomienda que tengas al menos 3 niveles para que cada elemento funcione correctamente, como por ejemplo:

• Jackets (1st level)
  • Leather jackets (2nd level)
    • Brown leather jackets (3rd level)
    • Black leather jackets (3rd level)
  • Wool jackets (2nd level)
• Pants (1st level)
• Shirts (1st level)

Nota: Los elementos de 4.º nivel (o más profundos) no se mostrarán en absoluto.

Evento del mouse: Este submenú también heredará el comportamiento definido en la opción de evento de apertura de Submenús y, por lo tanto, se abrirá en función de eso.

Cantidad de columnas: Los elementos de 2.º nivel se distribuirán en un máximo de 6 columnas dentro del eje horizontal. Por lo tanto, si tienes más de seis elementos de 2.º nivel, el resto se apilará y posicionará debajo dentro de una nueva fila. Por el contrario, si tienes cinco o menos elementos de 2.º nivel, se adaptarán en una sola fila horizontal.

Enlace ‘Ver todo’

Permite mostrar un enlace que lleva al nivel principal de cada item de navegación.

Opciones de Mega Menu

Este grupo de opciones se volverá visible si elegiste Mega menu dentro de la opción Estilo.

Con ellas puedes ajustar lo siguiente:

Personalizar columnas

Si está activado, podrás definir la cantidad de columnas que tendrá cada ítem de segundo nivel, en relación al ancho completo del desplegable, eligiendo entre 3 y 6 dentro de una nueva opción llamada Cantidad de columnas.

Si está desactivado, se organizarán automáticamente en función de cálculos hechos dentro del tema, dependiendo de cuántos subelementos tenga cada menú desplegable.

Imágenes de ítems

Con esta opción puedes elegir mostrar las imágenes para elementos de tipo Categoría, Producto o Página. Si es otro tipo de elemento, no se mostrará ninguna imagen. Lo mismo sucederá si alguno de los elementos que sí lo permite no tiene imágenes.

Al activarla, también podrás elegir la Dimensión, así como la Posición en la que se mostrarán las imágenes.

Menú (móvil)

Aunque el Menú móvil no es un componente disponible dentro de la Cabecera del tema, es una sección que se mostrará y será accesible en los siguientes contextos:

1.- Componente Menú oculto

Si eliges ocultar el Menú, aparecerá un elemento en el lado izquierdo de la Cabecera y permitirá abrir el Menú móvil, para todo tipo de dispositivos (Desktop y móvil).

Nota: la posición del elemento que abre el Menú móvil variará dentro de la Cabecera, dependiendo de la Versión de Cabecera que elijas.

Ejemplo de cómo se verá la Cabecera cuando el Menú de escritorio esté oculto en un dispositivo Desktop.

2.- Dispositivos tablet y móviles

Aunque normalmente nos referimos solo a dispositivos móviles dentro de esta documentación, muchas veces esto también incluye -de forma inherente- dispositivos Tablet.

El Menú móvil será automáticamente accesible para dispositivos que tengan un ancho igual o inferior a 991 píxeles y, por lo tanto, el Menú se ocultará en dispositivos por debajo de ese ancho.

Barra superior

Este subcomponente de la Cabecera te permite agregar múltiples elementos hijos llamados Slides. Estos se mostrarán siempre dentro de un carrusel.

Ajustes del componente

Las opciones que tienes para personalizarlo son las siguientes:

Ancho

Permite definir el ancho de la sección, en función de las siguientes opciones:

• Ancho de la cabecera: Expandirá el contenido del menú según la opción definida dentro de los ajustes de Ancho de la Cabecera.
• Ancho completo: Expandirá el contenido al ancho máximo del navegador.

Fijar Barra superior

Permite fijar (pegar) la Barra superior en la parte superior de la ventana del navegador para que siga a los usuarios mientras se desplazan hacia arriba y hacia abajo en la tienda.

Esto solo se aplicará en dispositivos Desktop con un ancho igual o superior a 576px.

Para dispositivos con un ancho menor a eso, la Barra superior se posicionará debajo de la Cabecera.

Reproducción automática

Si está activado, los Slides pasarán automáticamente de uno al siguiente según la velocidad definida más abajo.

También se mostrará la opción Velocidad de reproducción automática para que puedas controlar el tiempo o la velocidad con la que el carrusel esperará para pasar de un Slide al siguiente.

También estará disponible una tercera opción llamada Reproducción automática continua, que hará que el carrusel tenga una transición que hará que parezca infinita.

Al activarla, Velocidad de reproducción automática (móvil) te permitirá definir la velocidad solo para dispositivos móviles.

Colores del contenido

Permite elegir el Pack de colores para toda la Barra superior.

Ajustes del subcomponente

Los Slides son los elementos hijos de un componente Barra superior y tienen las siguientes opciones para personalizarlos:

Ícono

Permite mostrar un ícono en el lado izquierdo del texto.

Texto

Aquí puedes agregar el texto que se mostrará en el Slide.

Enlace

Permite agregar un enlace a cualquier contenido de la tienda, como Categorías, Productos, Páginas, etc.

Al agregar uno, las siguientes opciones también estarán disponibles para usarse:

• Texto del enlace: Obligatorio. Texto que se mostrará en el enlace.
• Enlace externo: Si está activado, el enlace se abrirá en una nueva pestaña del navegador.