Crear una barra de menú de Shopify con enlaces de Inicio, Catálogo y Quiénes somos para escritorio y móvil

El primer menú de navegación de una tienda en línea solo necesita tres enlaces bien elegidos — Inicio, Catálogo y Quiénes somos. Construido una sola vez en Contenido > Menús, se muestra en el encabezado de escritorio y en el panel lateral móvil, y puede fijarse en una barra de pestañas inferior en smartphones para que los compradores siempre lo tengan a la vista.

Respuesta rápida: cómo crear una barra de menú con Inicio, Catálogo y Quiénes somos

Cree una página de Quiénes somos en Tienda online > Páginas, diríjase a Contenido > Menús, abra su menú principal y agregue tres elementos: Inicio (tipo de enlace Página de inicio), Catálogo (/collections/all o una colección) y Quiénes somos (su página). Guarde el menú y su tema lo mostrará en el encabezado de escritorio y en el menú desplegable móvil. Agregue una barra de pestañas para teléfonos.

El proceso consta de cinco pasos:

1. Crear la página de Quiénes somos en Tienda online > Páginas y dejarla en estado Visible.
2. Abrir Contenido > Menús en el panel de Shopify y seleccionar su menú principal.
3. Agregar los tres enlaces: Inicio (tipo Página de inicio), Catálogo (/collections/all o una colección) y Quiénes somos (su página creada).
4. Guardar el menú y verificar en la personalización del tema que el encabezado esté enlazado a este menú.
5. Probar en móviles: revisar el menú lateral y añadir una barra de pestañas inferior si desea acceso permanente.

Qué incluye una barra de menú con Inicio, Catálogo y Quiénes somos

Al comenzar un negocio digital, no es aconsejable crear estructuras complejas. Un menú conciso de tres enlaces brinda claridad inmediata sin saturar la atención del comprador:

• Inicio: Actúa como punto de anclaje fundamental, permitiendo regresar a la portada de la tienda desde cualquier ubicación.
• Catálogo: Constituye el núcleo comercial donde los clientes examinan productos, exploran colecciones y eligen qué comprar.
• Quiénes somos: Transmite la identidad y seriedad de su negocio, brindando una justificación clara para que un comprador primerizo confíe en su marca.

Limitar el menú inicial a tres enlaces garantiza una lectura fluida en cualquier dispositivo. Estudios de usabilidad del Nielsen Norman Group señalan que las opciones de navegación visibles resultan óptimas cuando contienen de 4 a 5 alternativas de primer nivel. Mantener tres enlaces esenciales permite que los textos se lean íntegros en pantallas móviles reducidas y deja margen para incorporar más adelante enlaces a Contacto o Preguntas frecuentes.

Paso 1: Crear la página de Quiénes somos y elegir el enlace de Catálogo

Antes de estructurar el menú en el panel, prepare las páginas de destino para que cada entrada apunte hacia un contenido ya publicado.

Crear la página de Quiénes somos

En el panel de control de Shopify, vaya a Tienda online > Páginas y haga clic en Agregar página. Asigne el título Quiénes somos o Sobre nosotros. Redacte un resumen que describa su actividad, la propuesta de sus artículos y sus valores de atención al cliente. La documentación oficial de Shopify sobre páginas explica que las páginas albergan contenido de escasa variación, y la guía de páginas de Quiénes somos de Shopify resalta su valor para generar credibilidad ante el comprador. Establezca la visibilidad en Visible y guarde. Recuerde que crear una About page no la incorpora de forma automática al menú; debe agregarla de manera manual en el paso posterior.

Definir el destino del enlace de Catálogo

Decida hacia qué sección conducirá el Catalog link de su tienda:

De acuerdo con el Centro de ayuda de Shopify sobre la página de catálogo, todas las tiendas disponen de /collections/all con ordenación predeterminada de la A a la Z. Si necesita cambiar el orden, cree una colección con el identificador (handle) all, o bien apunte el enlace a una colección específica.

Paso 2: Construir el menú en Contenido > Menus

Con las páginas de destino listas, proceda a armar el menú en su panel de administración.

Figura 1: Ilustración conceptual (Concept illustration) — Paso 2: Construir el menú en Contenido > Menus

Agregar Inicio

En Contenido > Menús, elija su menú principal y haga clic en Agregar elemento de menú. Escriba Inicio. En el campo Enlace, seleccione Página de inicio. Al marcar este tipo de enlace, Shopify asigna automáticamente la raíz de su tienda web.

Agregar Catálogo

Haga clic en Agregar elemento de menú e ingrese Catálogo (o Tienda). En Enlace, escoja una colección de la lista o utilice la página de todos los productos en /collections/all. La documentación de Shopify sobre edición de menús advierte que pegar direcciones URL directas en lugar de seleccionarlas de las listas del sistema puede desvincular el elemento y producir errores 404. Seleccione desde la lista siempre que el destino aparezca en ella.

Agregar Quiénes somos

Haga clic en Agregar elemento de menú y escriba Quiénes somos. En el campo Enlace, acceda a la sección Páginas y elija la página publicada en el Paso 1.

Guardar y ordenar los elementos

Revise los tres enlaces configurados en el panel:

Utilice los tiradores situados a la izquierda de cada fila para arrastrar y soltar los elementos en el orden adecuado: Inicio, Catálogo, Quiénes somos. La tienda en vivo presentará exactamente esta secuencia. Dado que Shopify limita los cambios sin guardar a 200 acciones, pulse con regularidad en Guardar menú. También puede incluir emojis en los nombres si desea aportar un detalle visual distintivo.

Paso 3: Mostrar el menú en el encabezado de escritorio

Guardar el menú en el panel no lo publica automáticamente en su diseño; su ubicación depende de la plantilla del tema.

Para integrarlo en el encabezado de escritorio, acceda a Tienda online > Temas y haga clic en Personalizar sobre su tema activo. En la barra izquierda, seleccione la sección Encabezado. Seleccione allí el menú recién creado. Los nombres de los ajustes varían según el tema, así que busque la opción de menú dentro de esa sección.

En pantallas de escritorio anchas, verifique que su tema despliegue los enlaces horizontalmente en vez de agruparlos bajo un icono. Los análisis de usabilidad de Nielsen Norman Group sobre navegación de escritorio demuestran que mantener los enlaces a la vista en pantallas amplias incrementa sustancialmente la facilidad de descubrimiento de contenidos en comparación con menús ocultos. Compruebe que su Desktop header menu muestre con claridad las tres secciones.

Cómo aparece el mismo menú en dispositivos móviles

Si bien los monitores de escritorio disponen de amplio espacio horizontal, los teléfonos inteligentes operan con dimensiones muy reducidas.

Figura 2: Ilustración conceptual (Concept illustration) — Cómo aparece el mismo menú en dispositivos móviles

La mayoría de los temas de Shopify ocultan el encabezado en móviles dentro de un panel lateral deslizante (Menu drawer) al que se accede tocando un icono de tres barras (hamburguesa). Las investigaciones de NN/g confirman que ocultar la navegación reduce la exploración espontánea del usuario. Tratándose de un menú de apenas tres elementos, permitir que los compradores vean y toquen los enlaces sin requerir pasos previos agiliza enormemente la experiencia de compra.

Si prefiere una estructura de navegación distinta para móviles, puede consultar nuestra guía para mostrar un menú diferente en escritorio y móvil.

Paso 4: Agregar una barra de pestañas inferior para móvil

Si muchos de sus compradores navegan desde smartphones, un botón de hamburguesa mantiene sus enlaces ocultos hasta que lo tocan.

Una Bottom tab bar ancla los accesos fundamentales al borde inferior de la pantalla. La investigación de NN/g sobre navegación móvil señala que las barras de pestañas son persistentes: permanecen visibles se desplace o no el usuario por la página.

Las plantillas estándar de Shopify no suelen incluir una barra de pestañas inferior por defecto, por lo que suele requerirse una aplicación o código personalizado. Al configurarla, replique exactamente los tres enlaces (Inicio, Catálogo, Quiénes somos) con idénticas direcciones que en la versión de escritorio. Esta coherencia evita desorientar al comprador cuando alterna de pantalla.

Agregar iconos y probar en todos los tamaños de pantalla

Incorporar iconos gráficos agiliza el reconocimiento visual de los apartados, pero su aplicación exige pautas claras.

Aunque los emojis se integran de forma nativa en los campos de texto, disponer de iconos vectoriales SVG nítidos precisa de opciones del tema o de una app de menús. Nielsen Norman Group recomienda emplear un Icon with label (icono acompañado siempre de texto legible), dado que los símbolos abstractos suelen suscitar confusiones. Si recurre a una solución dedicada, revise nuestro tutorial sobre cómo asignar un icono a cada elemento del menú.

Asegúrese de que todos los controles respeten los parámetros de accesibilidad. El criterio de conformidad 2.5.8 de las pautas WCAG 2.2 de W3C establece un tamaño de objetivo táctil mínimo de 24×24 píxeles CSS (con algunas excepciones).

Realice estas pruebas antes del lanzamiento:

1. Pantalla de escritorio: Confirmar que los tres enlaces se alinean horizontalmente sin saltos de línea bruscos.
2. Tableta: Verificar la transición adecuada entre la fila horizontal y el icono de hamburguesa.
3. Móvil en vertical: Asegurar que el panel lateral se despliega sin demoras y muestra los tres enlaces.
4. Móvil en horizontal: Corroborar que la barra no tape una proporción excesiva del contenido.
5. Verificación funcional: Tocar cada enlace para certificar que redirige a la página correcta sin fallos.

Problemas comunes y soluciones

Si su barra de menú experimenta inconvenientes, evalúe las siguientes situaciones junto con nuestra guía para reparar enlaces rotos en menús de Shopify:

El enlace genera un error 404

Si Catálogo o Quiénes somos muestra una página 404, es probable que la dirección se haya ingresado a mano con algún error tipográfico. Edite el elemento en Contenido > Menús y seleccione la página o colección directamente desde los listados internos de Shopify.

La página de Quiénes somos no aparece en la tienda

Ha redactado la página, pero no se visualiza en la cabecera. Tenga presente que las páginas creadas en Tienda online > Páginas no se integran de forma automática. Debe añadir el elemento en Contenido > Menús y comprobar que la visibilidad de la página esté fijada en Visible.

El Catálogo muestra los productos en orden inesperado

La página carga con normalidad, pero el orden de los productos no es el deseado. La dirección /collections/all de Shopify ordena por defecto de la A a la Z. Cree una colección con el identificador all.

El encabezado no refleja las modificaciones recientes

Ha guardado los cambios en el panel, pero el sitio en vivo sigue presentando la versión anterior. En Tienda online > Temas > Personalizar, acceda a la sección de Encabezado y verifique que esté apuntando al menú correspondiente.

Al pulsar un elemento principal no se abre ninguna página

Si anida opciones debajo de Catálogo y al pulsar Catálogo no ocurre nada, se debe al diseño de su tema. Gran parte de las plantillas contemporáneas configuran los elementos padre como disparadores de apertura del submenú en lugar de enlaces funcionales.

Compromisos: cuándo un menú de tres enlaces no es suficiente

Una estructura de tres enlaces sienta las bases perfectas para empezar, pero a medida que el negocio se expande surgirán nuevos requerimientos.

Crecer más allá de tres enlaces

Cuando su volumen de productos abarca diversas familias y líneas, un solo acceso a Catálogo puede resultar insuficiente. En este punto, resulta conveniente agregar un submenú bajo Catálogo. Los menús de Shopify admiten hasta 2 niveles de anidación para desplegables. Si administra un catálogo amplio en pantallas de escritorio, puede transformar Catálogo en un mega menú con varias columnas e imágenes promocionales.

Vea el siguiente tutorial en video de Shopify Help Center sobre la creación y estructuración de menús desplegables:

Limitaciones de las barras de pestañas móviles

Si bien una barra inferior ofrece inmediatez, los estudios de NN/g recuerdan que este esquema solo funciona adecuadamente cuando las opciones son escasas. Incorporar más de 4 o 5 elementos satura la barra. Asimismo, una barra fija ocupa una franja vertical constante. Si la mayoría de sus clientes efectúa sus compras en computadoras de escritorio, prescindir de una barra móvil puede ser una decisión razonable.

Dónde encaja Navi+

Crear accesos básicos para Inicio, Catálogo y Quiénes somos en el panel de Shopify es sencillo, pero los temas estándar no proporcionan herramientas avanzadas de presentación móvil.

Si desea mantener Inicio, Catálogo y Quiénes somos fijados en el extremo inferior de los teléfonos móviles con icono y texto en cada botón, Navi+ Tab Bar le permite implementarlo sin editar código de su tema. Su menú principal de Shopify permanece activo para el encabezado de escritorio, mientras que estos tres enlaces quedan a un toque en smartphones.

A medida que su tienda amplíe sus operaciones, Navi+ le acompaña en cada fase:

• Navi+ Mobile Menu: Diseñe un menú lateral para móviles con la identidad gráfica de su negocio y sincronice los enlaces desde Shopify con un solo clic.
• Navi+ Desktop Mega Menu: Estructure colecciones complejas en cuadrículas multicolumna con imágenes publicitarias (soporta hasta 3 niveles de profundidad).

Para valorar la arquitectura que mejor se adapta a su proyecto, revise nuestro artículo sobre cómo elegir el tipo de menú adecuado para su tienda Shopify.

Lista de verificación de acciones

Siga esta lista de verificación antes de activar su menú de tres enlaces:

• Publicar página de Quiénes somos: Comprobar que esté creada y configurada como Visible en Tienda online > Páginas.
• Definir enlace de Catálogo: Optar por /collections/all o una colección con identificador all.
• Abrir editor de menús: Ir a Contenido > Menús y hacer clic en el menú principal.
• Agregar Inicio: Escoger el tipo Página de inicio para asignar automáticamente la raíz.
• Agregar Catálogo: Seleccionar el destino directamente desde el menú de colecciones.
• Agregar Quiénes somos: Escoger la página publicada en el apartado interno de Páginas.
• Ordenar y guardar: Reorganizar la secuencia con los tiradores y pulsar Guardar menú.
• Conectar el tema: En el editor de temas, corroborar que el Encabezado apunte a este menú.
• Comprobar en móvil: Abrir la previsualización en un smartphone para revisar el panel lateral.
• (Opcional) Habilitar barra inferior: Fijar 3 accesos con icono y texto en el borde inferior.
• Probar enlaces reales: Hacer clic en cada botón en escritorio y móvil para descartar errores.

Preguntas frecuentes

¿Hacia dónde debe dirigir el enlace de Catálogo?

Las tiendas de Shopify cuentan con la página integrada /collections/all que muestra los artículos en orden alfabético. Para personalizar el criterio de clasificación, cree una colección con el identificador all o enlace directamente hacia una colección específica.

¿Por qué mi página de Quiénes somos no figura en el menú?

Crear una página en Tienda online > Páginas no la incorpora de manera automática a la navegación de la tienda. Debe ingresar en Contenido > Menús, abrir su menú principal y seleccionarla manualmente desde la lista de páginas.

¿Se muestra este mismo menú en teléfonos móviles?

Sí, la mayoría de temas reutilizan el menú de cabecera de escritorio en un panel lateral móvil accesible mediante el icono de tres barras (hamburguesa). Dado que el estilo depende del tema, verifique siempre su apariencia en un teléfono real.

¿Se requiere una aplicación para colocar una barra de pestañas inferior?

Las plantillas típicas de Shopify incluyen encabezado y menú lateral, pero no disponen de barra anclada en la parte inferior. Implementarla demanda una aplicación o programación personalizada, y resulta adecuada para unos pocos enlaces principales.

¿Es posible incorporar iconos a los elementos del menú?

Puede escribir emojis directamente en las cajas de texto del panel. Si busca iconos vectoriales SVG pulidos, requerirá soporte de su plantilla o una app de menús, asegurándose de mantener siempre un texto visible junto al icono.

¿Por qué mi enlace de menú produce un error 404?

Digitar enlaces de forma manual genera desajustes si los identificadores o nombres de página sufren modificaciones. Seleccionar las opciones de destino desde los selectores nativos de Shopify asegura la estabilidad a largo plazo.

Fuentes

• Shopify Help Center: Editing menus
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Add and edit pages
• Shopify Help Center: Change catalog page
• Shopify Help Center: About us page
• Nielsen Norman Group: Mobile navigation patterns
• Nielsen Norman Group: Visible navigation on mobile
• Nielsen Norman Group: Desktop navigation not hamburger
• Nielsen Norman Group: Hamburger menus and discoverability
• Nielsen Norman Group: Icon usability
• W3C: WCAG 2.2 Target Size (Minimum)