En el editor de temas: Personalizar›Encabezado›Encabezado
Encabezado
El logo en la muesca, el menú y los iconos de búsqueda, cuenta y carrito. En el teléfono los iconos flotan como monedas; en la computadora el menú va en una barra.
Sube un logo con fondo transparente y usa “Recortar los márgenes transparentes del logotipo” para que quede centrado en la muesca.
Configuración
Logotipo
- Imagen del logotipo
- ImagenSi está vacío, el nombre de la tienda se muestra como texto.
- Ancho del logotipo en escritorio
- Control deslizante, de 100 a 300 pxPredeterminado: 190 pxAncho de la parte visible del logotipo, después de recortar los márgenes transparentes.
- Altura máxima del logotipo en escritorio
- Control deslizante, de 40 a 160 pxPredeterminado: 65 pxUn logotipo alto se reduce a esta altura. La altura es la de la parte visible.
- Ancho del logotipo en teléfonos
- Control deslizante, de 80 a 200 pxPredeterminado: 100 pxAncho de la parte visible del logotipo en teléfonos y tabletas. En teléfonos estrechos se reduce si hace falta, para que los iconos de al lado tengan espacio.
- Altura máxima del logotipo en teléfonos
- Control deslizante, de 24 a 44 pxPredeterminado: 34 pxUn logotipo alto se reduce a esta altura en teléfonos y tabletas. La barra tiene una altura fija de 48 px, así que hasta 44.
- Posición del logotipo en la muesca en el teléfono
- Control deslizante, de -8 a 12 pxPredeterminado: 4 pxUn número positivo baja el logotipo y uno negativo lo sube. 0: centrado en la fila del encabezado.
- Posición del logotipo en la muesca en escritorio
- Control deslizante, de -8 a 12 pxPredeterminado: 0 pxUn número positivo baja el logotipo y uno negativo lo sube. 0: centrado en la fila del encabezado.
Recortar los márgenes transparentes del logotipo
- Recortar desde arriba
- Control deslizante, de 0 a 40 %Predeterminado: 17 %
- Recortar desde abajo
- Control deslizante, de 0 a 40 %Predeterminado: 22 %
- Recortar desde la izquierda
- Control deslizante, de 0 a 40 %Predeterminado: 7.5 %
- Recortar desde la derecha
- Control deslizante, de 0 a 40 %Predeterminado: 3.5 %
Una imagen de logotipo suele tener márgenes transparentes alrededor de la firma. Define cuánto se recorta de cada lado de la imagen (en porcentaje); los tamaños del logotipo de arriba se refieren entonces a lo que queda. Para una imagen que ya está recortada al límite, deja todos los valores en 0.
Iconos
- Mostrar el botón de búsqueda
- Activado o desactivadoPredeterminado: Activado
- Palabras que se escriben en el campo de búsqueda
- TextoEn los teléfonos, cuando se abre la búsqueda, estas palabras se escriben en el campo una tras otra. Sepáralas con comas. Déjalo vacío para usar los nombres de los enlaces del menú principal. También aparecen como ideas antes de escribir.
- Antes de escribir
- Opción: Ideas y búsquedas recientes, Solo ideas, Solo búsquedas recientes, NadaPredeterminado: Ideas y búsquedas recientesLas ideas son las palabras del campo de búsqueda. Las búsquedas recientes son de cada cliente y se guardan en su navegador.
- Menú de la cuenta
- MenúEnlaces en la ventana de cuenta de Shopify, debajo del inicio de sesión. "Menú principal de la cuenta de cliente" los mantiene iguales que en las páginas de la cuenta.
- Tamaño de las monedas del encabezado
- Control deslizante, de 36 a 48 pxPredeterminado: 40 pxDiámetro de las monedas del encabezado en móvil y tableta. En ordenador el encabezado no tiene monedas: los iconos van en la franja como líneas. El icono dentro de una moneda mide la mitad del diámetro.
- La bolsa reacciona al agregar
- Activado o desactivadoPredeterminado: ActivadoCuando se agrega un producto al carrito, la bolsa baja un poco, se aplasta y rebota. No ocurre cuando cambia una cantidad dentro del carrito.
Encabezado en ordenador
- Estilo del menú en ordenador
- Opción: Biblioteca: todos los enlaces en columnas, Salas: un grupo cada vez, Galería: una imagen por grupoPredeterminado: Biblioteca: todos los enlaces en columnasCómo el panel bajo la franja muestra los enlaces de un elemento del menú. Se construye con tu menú normal, hasta tres niveles.
- Imagen de la colección en los menús
- Activado o desactivadoPredeterminado: ActivadoEn los estilos biblioteca y salas, la imagen de la colección aparece junto a los enlaces y cambia según el enlace bajo el puntero. La galería siempre muestra imágenes.
- Color del panel del menú
- Opción: Blanco, como la búsqueda, Oscuro, Color propioPredeterminado: Blanco, como la búsqueda
- Color del panel
- ColorEl color del texto se elige automáticamente: oscuro sobre un color claro y claro sobre uno oscuro.
Menú flotante en el móvil
- Menú flotante al desplazarse
- Opción: Desactivado, En el móvilPredeterminado: En el móvilEn el móvil, cuando la cabecera sale de la pantalla, los mismos cuatro iconos flotan en una píldora en la parte inferior, cerca del pulgar. El menú, la búsqueda y el carrito se abren desde arriba, como al principio de la página. Apps de chat: deja en sus ajustes un margen inferior de al menos 90 px para que queden por encima.
- Forma del menú flotante
- Opción: Pestaña desde el marco, Flotante, estrecho arriba, Flotante, ancho arribaPredeterminado: Pestaña desde el marcoPestaña: sube desde la parte inferior del marco con la forma de la muesca del logo, en el color del marco. Las formas flotantes usan el color del menú de abajo.
- Color del menú flotante
- Opción: Como las monedas de la cabecera, Oscuro, ClaroPredeterminado: Como las monedas de la cabecera"Como las monedas de la cabecera" sigue el color de las monedas de la cabecera: oscuro con marco oscuro, claro con marco blanco.
- Color de los iconos del menú inferior
- ColorLos iconos del menú flotante en teléfonos. Vacío: el color del tono del menú.
- Color de los aros del menú inferior
- ColorEl aro fino alrededor de cada icono, sin relleno. Un icono abierto se rellena con este color. Vacío: el color del tono del menú.
- Distancia del marco
- Control deslizante, de 0 a 24 pxPredeterminado: 4 pxEl espacio entre el menú y el marco debajo, o la barra del navegador cuando cubre el marco. Es igual al desplazarse hacia arriba o hacia abajo. Predeterminado: 4 px.
Menú
- Menú principal
- MenúEdita los elementos del menú en Contenido > Menús.
- Pequeño título sobre el menú del teléfono
- TextoDéjalo vacío para usar el valor predeterminado.
- Texto del botón del club de miembros
- TextoEl botón en la parte inferior del menú del teléfono. Déjalo vacío para usar el valor predeterminado.
- Selector de idioma y país en el menú
- Activado o desactivadoPredeterminado: ActivadoSobre el botón del club. Solo aparece cuando hay más de un idioma o país.
- Selector de idioma en la franja
- Activado o desactivadoPredeterminado: ActivadoEn ordenadores, un selector de idioma en la franja superior, antes del icono de búsqueda. En móvil y tableta está en el menú.
- Banderas junto a los idiomas
- Activado o desactivadoPredeterminado: ActivadoUna pequeña bandera junto a cada idioma. Algunas tiendas prefieren no mostrarlas, porque un idioma no es un país.
- Redes sociales en el menú
- Activado o desactivadoPredeterminado: ActivadoUna fila de iconos sólidos bajo el botón del club, como en el pie de página. Los enlaces y el orden se definen en Configuración del tema, en Redes sociales. Facebook, Instagram, TikTok, YouTube y X se muestran como un icono simple hasta que agregues un enlace; las demás redes, solo con enlace.
- Color del menú
- ColorPredeterminado: #FFFFFFCualquier color que quieras. El texto y el botón se adaptan: sobre un color oscuro el texto es crema. Predeterminado: blanco, como el marco.
- Estilo del fondo
- Opción: Color plano, Escenario iluminadoPredeterminado: Color planoEscenario iluminado: una luz suave desde arriba que se atenúa hacia abajo, creada a partir del color elegido. En un color claro la parte superior se vuelve blanca; en un color oscuro es un escenario oscuro.
- Color de la luz
- ColorLa luz suave desde el centro superior. Vacío: blanco.
- Color del botón del club
- ColorEl botón en la parte inferior del menú. Vacío: el color del menú. El texto se vuelve claro u oscuro según corresponda.
- Imagen de fondo del menú
- ImagenOpcional. La imagen solo se carga la primera vez que se abre el menú. Sobre ella hay un velo del color del menú.
- Intensidad del velo sobre la imagen
- Control deslizante, de 0 a 100 %Predeterminado: 80 %Cuánto cubre el color del menú la imagen para que el texto siga siendo legible. 0 muestra la imagen tal cual.
¿Algo de aquí no coincide con lo que ves en el editor? Escríbenos y corregiremos la guía.
