El Header es la barra en la parte superior de tu tienda con tu logotipo, menú, búsqueda, carrito y selector de país. Este artículo explica cada ajuste del encabezado y sus cinco bloques.
Dónde encontrarlo
Abre el constructor y haz clic en el encabezado en la vista previa, o elige Header en la pestaña Sections. Para añadir uno, haz clic en Add new section y elige Header en el grupo Layout. Puedes tener un encabezado por página, en cualquier página. Cada página guarda su propia copia, así que usa Apply to all pages cuando termines, consulta Secciones y bloques.
El encabezado siempre tiene los mismos cinco bloques: Logo, Menu, Search, Cart y Localization. No puedes añadirlos, quitarlos ni reordenarlos. Los colocas con sus propios ajustes Position y Row.
Ajustes del encabezado
- Sticky header: On scroll up oculta el encabezado cuando los compradores bajan y lo muestra de nuevo cuando suben. Always lo mantiene arriba. Sticky with reduced logo lo mantiene arriba y lo hace más pequeño (menos relleno, logotipo más pequeño) cuando los compradores se desplazan. Never deja que se vaya con la página.
- Width: Page mantiene el contenido dentro del ancho de tu página, Full lo estira de borde a borde.
- Color scheme: los colores del fondo, el texto y los enlaces del encabezado.
- Transparent header: quita el fondo del encabezado para que se vea la imagen del hero. Consulta más abajo.
- Padding (arriba, izquierda, derecha, abajo) y la pestaña Custom CSS.
Encabezado transparente
Solo funciona cuando un Hero es la primera sección visible justo debajo del encabezado, porque el encabezado toma prestado el esquema de colores del hero para su texto y sus iconos. Pierde su fondo, su borde y su sombra, y desenfoca ligeramente lo que hay detrás. Cuando los compradores pasan el hero, el encabezado recupera sus propios colores. El panel de búsqueda y la lista de países mantienen los colores propios del encabezado. Los ajustes del hero están en Sección Hero.
Logo
- Logo: elige la imagen de tu logotipo. Sin imagen, el nombre de tu tienda aparece como texto.
- Position: Left, Center o Right. Width y Height: el tamaño de la caja del logotipo en píxeles.
- Desktop padding: espacio alrededor del logotipo solo en ordenadores.
El logotipo abre tu página de inicio al hacer clic. Para evitarlo, activa Prevent clicking the logo to go home, consulta Ajustes de prohibiciones.
Menu
Elige uno de tus menús en Menu. Los demás ajustes aparecen cuando eliges un menú. Los menús se crean en ¿Cómo creo menús de navegación y los añado al encabezado y al pie de página?.
- Type: Mega (paneles grandes con columnas), Dropdown (listas simples) o Drawer (un panel lateral que se abre con un botón de menú).
- Position y Row: dónde va el menú. Top es la fila principal con el logotipo, Bottom añade una segunda fila debajo. No aparece con Drawer.
- Color scheme: los colores del panel del menú abierto.
- Mobile layout: en móviles y tabletas el menú pasa a un panel lateral. Activa Navigation bar para mostrarlo como una barra debajo del encabezado, con su propio Navigation bar color scheme. No aparece con Drawer.
Búsqueda, carrito y localización
- Search: un icono de búsqueda que abre un campo de búsqueda. Define Position (Left o Right) y Row.
- Cart: el icono del carrito con el número de artículos. Cart type es Drawer (panel lateral), Dropdown (mini carrito debajo del icono) o Page (abre la página del carrito). Color scheme da estilo al panel lateral o al desplegable. Drawer y Dropdown también tienen un interruptor Free shipping bar, consulta ¿Cómo funciona la barra de envío gratis?.
- Localization: un botón que muestra tus mercados para que los compradores cambien de país. Activa Country selector para mostrarlo. Show flags muestra la bandera del país actual en el botón; si no, un icono de globo. Define Position y Row.
Bueno saberlo
- El encabezado transparente no hace nada: comprueba que el Hero está justo debajo del encabezado. Una barra de anuncios u otra sección entre ellos lo impide.
- El selector de país no aparece: necesita al menos dos mercados, consulta ¿Cómo configuro mercados para vender en varios países?.
- Faltan elementos del menú: edita el propio menú, no el encabezado.