Navegación del pie de página

Cree un pie de página adaptable con menús, branding, contenido de utilidad y control flexible del diseño.

Todas las secciones Documentación de referencia

Enlaces destacados

Videos útiles

Vídeo de Learn With Shopify: prácticas recomendadas para los menús de navegación de Shopify

Vídeo de Shopify Academy: personalización de tu tienda

Use la navegación del pie de página para crear un diseño personalizado al final de la página con menús, elementos de marca, texto legal, enlaces sociales, medios y contenido de utilidad. Funciona mejor cuando desea más control que un pie de página apilado simple, especialmente en escritorio, tableta y móvil.

La referencia de la sección Navegación del pie de página está disponible en la documentación de Company XYZ. Para una visión general más amplia del comportamiento de las secciones en Shopify, consulte la documentación de Shopify sobre secciones y bloques

Ajustes principales

Los controles de diseño principales definen cuántas columnas usa el pie de página en distintos tamaños de pantalla. Estos ajustes dan forma a la estructura general antes de que ajuste los bloques individuales.

Configure primero el diseño de escritorio. Use más columnas para pies de página con muchos enlaces y menos columnas para diseños más simples centrados en la marca.
Use el ajuste de tableta de forma intencionada. Si las columnas de tableta se configuran en 0, las tabletas reutilizan el recuento de columnas de escritorio, lo que resulta útil cuando su diseño de escritorio ya se adapta bien.
Mantenga el móvil más simple. Las pantallas más estrechas suelen funcionar mejor con menos columnas, especialmente cuando combina menús con contenido más ancho, como texto enriquecido, imágenes o video.

Ajustes de color

Estos colores a nivel de sección le permiten reemplazar los colores del texto y los iconos del pie de página sin cambiar el resto del sitio. Úselos cuando el pie de página necesite su propio tratamiento visual.

Haga coincidir el color del texto con el fondo. Esto importa más cuando añade una imagen de fondo, un degradado o un video.
Use el color de los iconos para mantener la coherencia. Ayuda a unificar bloques basados en iconos, como los enlaces sociales u otros elementos de utilidad.
Trate los colores de bloque como excepciones. Empiece con los colores de sección para el pie de página general y use colores a nivel de bloque solo cuando un elemento específico necesite destacarse.

Tipos de bloque admitidos

Button
Copyright
Follow on shop button
Footer menu
Localization selectors
Logo
Payment icons
Rich text
Separator
Social media icons
Image
Video

Guía de bloques

Menú de pie de página

Los bloques Footer menu muestran una lista de navegación, con un encabezado opcional para cada grupo. Obtenga más información sobre el Menú de pie de página.

Use bloques de menú separados para grupos distintos, como Ayuda, Empresa y Políticas.
Añada encabezados breves cuando tenga varios menús para que los clientes puedan revisar el pie de página más rápido.
Divida las listas largas en grupos más pequeños en lugar de crear un solo menú demasiado grande.

Logotipo

El bloque Logo refuerza la identidad de marca y puede servir como anclaje visual del pie de página. Si no se establece ninguna imagen en el bloque, puede recurrir al nombre de la tienda. Obtenga más información sobre el Logotipo.

Mantenga el logo en un tamaño moderado para que respalde el diseño en lugar de dominarlo.
Un ancho de 0 permite que el logo se extienda hasta el espacio disponible, lo que normalmente es mejor para pies de página sencillos y centrados en la marca.

Texto enriquecido

Rich text funciona bien para texto breve de marca, datos de contacto, mensajes de confianza o una propuesta de valor concisa.

Mantenga el texto breve para que el pie de página siga siendo fácil de revisar.
Use colores de fondo o de texto a nivel de bloque solo cuando ese contenido deba destacarse del resto de elementos.

Iconos de redes sociales

Este bloque toma las cuentas sociales configuradas en los ajustes de su tema. Obtenga más información sobre el Iconos de redes sociales.

Use Show all cuando sus cuentas sociales configuradas estén completas y sean coherentes.
Desactive Show all si desea destacar solo unas pocas redes clave.
Elija el estilo del icono según el diseño del pie de página: con marca para facilitar el reconocimiento, sólido para una UI más limpia, o solo texto para un aspecto más minimalista.

Selectores de localización

Los selectores de localización permiten a los clientes elegir país, moneda e idioma donde se admitan. Obtenga más información sobre el Selectores de localización.

Añada este bloque solo si esas opciones están disponibles para los clientes.
En móvil, el estilo de entrada Small field puede obligar al bloque a pasar a una nueva fila, así que previsualice el pie de página después de cambiarlo.

Añada selectores de localización solo cuando estén completamente configurados y sean útiles para los clientes. De lo contrario, añaden complejidad sin mejorar el pie de página.

Iconos de pago y copyright

Estos bloques suelen usarse cerca de la parte inferior del pie de página para aportar tranquilidad e información legal. Obtenga más información sobre el Iconos de pago y el bloque Copyright.

Colóquelos en una fila inferior para un patrón de pie de página familiar.
Mantenga el texto de copyright breve y actualizado.
Trate los iconos de pago como señales de confianza de apoyo, no como el contenido principal del pie de página.

Botón

El bloque Button añade una acción clara en el pie de página, como contactar con su equipo o abrir una página de soporte. Obtenga más información sobre el Botón.

Use como máximo uno o dos botones para que el pie de página no compita con el contenido principal de la página.
Los botones móviles de ancho completo son útiles cuando la acción es importante en pantallas más pequeñas.

Imagen y video

Los bloques Image y Video pueden hacer que el pie de página tenga un aspecto más editorial o más centrado en la marca. Obtenga más información sobre el Imagen y el bloque Video.

Use los medios con moderación para que la navegación no quede demasiado abajo en la página.
Mantenga los pies de foto breves y prácticos.
En el caso del video, una imagen de póster suele causar una mejor primera impresión.

Separador

El bloque Separator añade espacio o una pausa visual entre los elementos del pie de página. Obtenga más información sobre el Separador.

Úselo para dividir las áreas superior e inferior del pie de página o para crear espacio alrededor del contenido de utilidad.
Puede quedar un pequeño espacio incluso con una altura de 0 porque el pie de página usa un espaciado estándar entre elementos.

Ajustes compartidos de bloque

La mayoría de los bloques del pie de página incluyen controles compartidos de alineación, diseño y visibilidad. Estos ajustes son los que hacen que la sección sea lo bastante flexible para pies de página adaptables personalizados. Para el comportamiento general de edición, consulte la documentación de Shopify sobre la personalización de secciones

Los ajustes de alineación permiten que cada bloque se alinee de forma diferente en escritorio y móvil.
Los ajustes de diseño permiten mover un bloque a una nueva fila o columna, o estirarlo para ocupar el espacio restante de escritorio.
Los ajustes de visibilidad son útiles cuando escritorio y móvil necesitan diseños de pie de página claramente diferentes.

Ajustes estándar de sección

Ajustes de fondo de sección

Los ajustes de fondo de sección controlan el color de fondo, el degradado, la imagen, el video y el tratamiento de superposición del pie de página. En esta sección, son especialmente útiles para separar el pie de página del resto de la página o para crear un acabado de marca más marcado.

Si añade fondos de imagen o video, compruebe cuidadosamente el contraste del texto y de los iconos. El color y la opacidad de la superposición pueden ayudar a mantener la legibilidad, y los medios de fondo específicos para móvil pueden simplificar el diseño en pantallas más pequeñas.

Ajustes de espaciado

Los ajustes de espaciado controlan el espacio encima y debajo del contenido del pie de página. Úselos para que el pie de página se sienta más espacioso o para ajustarlo cuando la página ya tenga mucho espacio vertical.

El espaciado de escritorio y móvil se puede ajustar por separado, lo que ayuda a que un pie de página grande de escritorio no se vea demasiado alto en los teléfonos.

Ajustes de separador

Los ajustes de separador añaden una línea en la parte superior o inferior de la sección del pie de página. Esto resulta útil cuando desea una transición más clara entre el pie de página y el contenido cercano.

Si el color del separador es transparente, se usa en su lugar el color predeterminado del borde. Mantenga un estilo de separador discreto a menos que el pie de página necesite un borde más marcado.

Ajustes de ancho

Los ajustes de ancho controlan tanto el ancho máximo del contenido como el ancho total de la sección. En Footer navigation, el ancho del contenido afecta a la proximidad entre bloques, mientras que el ancho de la sección importa más cuando usa estilo de fondo.

El editor puede hacer que los cambios de ancho parezcan menos evidentes de lo que son en la página publicada, así que previsualice el resultado en la tienda online cuando ajuste el diseño. Use anchos más estrechos para una lectura más limpia y anchos más amplios cuando el fondo forme parte del diseño.

Notas de uso

Empiece por las columnas. Establezca primero los recuentos de columnas de escritorio, tableta y móvil, y después ajuste el diseño de cada bloque solo donde sea necesario.
Agrupe los enlaces con claridad. Use varios bloques Footer menu con encabezados breves para que los clientes puedan revisar rápidamente los enlaces de soporte, empresa y políticas.
Proteja el contraste. Vuelva a comprobar la legibilidad del texto y de los iconos cada vez que añada una imagen de fondo, un degradado, un video o colores personalizados.
Use variantes adaptables con moderación. Oculte o duplique bloques solo cuando móvil y escritorio necesiten realmente diseños de pie de página diferentes.
Mantenga el contenido de utilidad en segundo plano. Los logos, medios, iconos de pago y botones deben apoyar el pie de página, no dificultar la búsqueda de la navegación principal.
Previsualice ambas vistas. Los bloques del pie de página pueden reorganizarse, ocultarse o cambiar de énfasis entre escritorio y móvil, así que revise cada tamaño antes de publicar.
Trate los medios como una decisión de diseño. Los medios separados para escritorio y móvil pueden cambiar el recorte, la legibilidad y el comportamiento de reserva, así que compruebe ambas versiones si usa imágenes o video.
Deje los valores predeterminados cuando quiera el estilo de reserva. Las opciones de color en blanco o transparentes suelen conservar el aspecto existente del pie de página, mientras que los colores, degradados o medios explícitos hacen que el área del pie de página sea más independiente.

Align v2.0