¿Se puede enlazar una pestaña de la barra móvil a una sección de inicio en Shopify? (Guía de enlaces ancla)

La respuesta corta: sí, con un enlace ancla

Sí. Asigna un ID a la sección de la página de inicio (por ejemplo reviews) y configura el enlace de la pestaña como /#reviews. Los navegadores se desplazan al elemento cuyo ID coincide con la parte posterior a #. Usa un ID propio, ya que los ID generados por Shopify pueden cambiar.

Los enlaces ancla HTML permiten saltar a cualquier elemento de la página de inicio. El navegador busca el ID en el DOM y lo muestra en pantalla. Según los estándares web, el ID debe ser único en todo el documento. Dado que Shopify genera ID dinámicos en plantillas JSON, estos códigos varían al editar el tema. Un ID estable propio garantiza fiabilidad continua.

Una barra de pestañas móvil es un menú fijo en la parte inferior de la pantalla. Diseñar una arquitectura de la barra de pestañas móvil eficaz permite guiar a los clientes a destinos clave, ya sea navegando a colecciones o saltando a reseñas en la portada.

Cómo funcionan los enlaces ancla en una página de inicio de Shopify

Qué significa realmente /#reviews

Un destino como /#reviews da tres pautas: la barra / apunta a la portada, # delimita el fragmento y reviews indica el ID HTML. El navegador desplaza la vista para hacer visible el bloque, igual que scrollIntoView(). Escribir solo #reviews funciona en la portada pero falla en fichas de producto. La barra asegura regresar primero al inicio.

ID de sección autogenerados frente a ID personalizados

Cada sección de Shopify se envuelve en un div con class="shopify-section" y un id que inicia con shopify-section-. En secciones Liquid estáticas, el ID es el nombre del archivo sin .liquid. En plantillas JSON, Shopify genera el ID dinámicamente (según Liquid Objects: Section), como shopify-section-template--123456__reviews. Usar ese código sirve para una prueba rápida, pero si la sección se recrea, el ID puede cambiar y romper el enlace. Un ID propio hace que el enlace no dependa del generador de ID de Shopify.

Paso 1: Asignar un ID estable a la sección

Para configurar un salto de ancla, el navegador móvil necesita un ID exacto. Dispones de dos vías: inspeccionar el código del tema para una prueba rápida o insertar un bloque de ancla dedicado para máxima fiabilidad en producción.

Para una prueba rápida, examina el DOM en tu navegador de escritorio. Las secciones se envuelven en un div con class="shopify-section" y un ID como shopify-section-template--123456__reviews (según API de renderizado de secciones). Permite probar al instante, pero ese código puede cambiar y romper el enlace.

La solución definitiva es crear un ID propio. Si tu tema ofrece un bloque o sección de Custom Liquid o HTML personalizado, colócalo justo encima de la sección en el editor del tema e inserta una sencilla etiqueta de ancla:

<div id="reviews"></div>

Nombra el ancla en minúsculas y usa guiones. El atributo id de MDN Web Docs estipula que el ID debe ser único en todo el documento. Si se repite, el salto deja de ser fiable. Duplica el tema activo antes de editar.

Figura 1: Ilustración conceptual — ID de sección autogenerado frente a un ID estable configurado con Custom Liquid.

Paso 2: Colocar el enlace ancla en la pestaña

Barras de pestañas del tema (bloques de enlace personalizado)

Algunos temas incluyen una barra inferior móvil. Por ejemplo, la documentación del tema Zest indica que su bloque redirige a los clientes a la página deseada. Esa documentación no menciona las anclas, así que pruébalo: en el editor, accede a la barra móvil, escribe /#reviews y comprueba el resultado.

Barras de pestañas creadas con aplicaciones

Si gestionas tu barra con una app, revisa su documentación para confirmar si admite almohadillas de anclaje. Algunas apps tienen su propia sintaxis para desplazarse a un elemento (por ejemplo scroll:OnPage de Navi+, detallada más adelante).

Escribe siempre el destino como /#reviews en lugar de #reviews si la barra es global. En una ficha de producto, pulsar solo #reviews busca sin éxito y no responde. La barra inicial / asegura volver a la portada antes de buscar el ancla.

Para conocer cómo abordan la navegación móvil los temas modernos de Shopify, consulta nuestra reseña del tema Horizon.

Paso 3: Probar en un teléfono (desplazamiento suave y compensación del encabezado fijo)

Probar en emuladores no reproduce la ergonomía táctil real. Comprueba la pestaña de ancla en un smartphone físico: tocándola desde la página de inicio y desde una ficha de producto.

Por defecto, los navegadores saltan de inmediato al ancla. Para una transición suave, añade scroll-behavior: smooth; en CSS. Según MDN Web Docs CSS scroll-behavior, esto define el comportamiento al navegar:

html {
  scroll-behavior: smooth;
}

Evita que el encabezado fijo tape el contenido. Como el navegador alinea el borde superior con la pantalla, el encabezado fijo cubre el título. Según MDN Web Docs Element: scrollIntoView(), ajustar el margen es la solución con cabeceras fijas. Añade scroll-margin-top:

#reviews {
  scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}

Nota: El valor de 80px es un ejemplo; mide la altura real de tu cabecera móvil y adapta los píxeles. Verifica también que la barra inferior no tape botones al final de la sección.

Figura 2: Ilustración conceptual — Título oculto bajo el encabezado fijo frente al ajuste visible con scroll-margin-top.

Cuándo el enlace ancla no funciona

Si al pulsar la pestaña móvil no hay desplazamiento o la vista aterriza en una posición errónea, revisa estas cinco causas habituales:

1. El ID cambió al recrear la sección: Si usaste un ID autogenerado (shopify-section-...), reorganizar la sección habrá cambiado el código. Pasa a un ID con Custom Liquid.

2. ID duplicado en la página: Si varios bloques comparten el mismo ID, el navegador solo salta al primero. Asegúrate de que tu ID sea único en toda la página.

3. Widgets de aplicaciones de terceros: Las secciones insertadas por apps no suelen permitir editar el ID. Coloca un bloque vacío <div id="reviews"></div> justo encima.

4. Desajustes por carga diferida: Las secciones pesadas con imágenes diferidas pueden alterar la altura. Pulsa la pestaña una segunda vez para comprobar si la vista se corrige.

5. Menú lateral abierto: Si un menú lateral móvil permanece desplegado, tapará el contenido. Asegúrate de que el script lo cierre al pulsar una pestaña.

Enlace ancla frente a página o colección independiente

Aunque enlazar una pestaña a una sección de inicio ofrece un atajo rápido, no siempre es adecuado. Decidir entre un salto en la página y una página dedicada exige sopesar la indexación en buscadores frente a la ergonomía móvil.

Los enlaces ancla destacan cuando el contenido encaja en el inicio (testimonios, catálogos visuales o FAQ breves). El cliente consulta pruebas sociales al instante sin recargar la página ni perder el hilo de compra.

No obstante, para posicionamiento orgánico, los fragmentos resultan insuficientes. Google por lo general no admite fragmentos para indexar contenido diferenciado (según las Directrices sobre URLs de Google Search Central). No esperes que /#reviews aparezca en los resultados como una página propia. Si deseas que un archivo amplio de reseñas posicione en Google, crea URLs dedicadas (como /pages/reviews o /collections/all).

Las barras móviles se concibieron para alternar entre vistas principales. Saturar la barra con múltiples anclas genera confusión. Limita las anclas a una o dos pestañas como máximo. Para profundizar, consulta nuestra guía sobre navegación más allá del menú hamburguesa.

Dónde encaja Navi+

Si gestionas tu barra con Navi+ Tab Bar para Shopify, el desplazamiento a secciones está soportado de forma nativa.

En el panel de Navi+, cada pestaña incluye un campo Link To. En los planes Business y Elite, admite la sintaxis scroll:OnPage(#reviews), que ejecuta un desplazamiento suave hacia el selector CSS.

Navi+ aplica reglas claras: dejar Link To vacío dirige al inicio. Los enlaces internos usan rutas cortas sin dominio, como /collections/all. Una almohadilla # sola se reserva para desplegar submenús sin navegar; no la confundas con una instrucción como scroll:OnPage(#reviews).

Aun con la sintaxis de la app, las bases técnicas siguen vigentes: la sección requiere un ID estable (Paso 1) y debes calibrar el margen del encabezado fijo con scroll-margin-top en el móvil (Paso 3). Como scroll:OnPage se desplaza a un elemento de la página actual, prueba la pestaña desde el inicio y desde otras páginas antes de confiar en ella.

Si utilizas Navi+ Tab Bar, introduce scroll:OnPage(#reviews) en el campo Link To de la pestaña y pruébalo en tu teléfono; el listado completo de opciones de enlace está en el centro de ayuda de Navi+. Consulta la documentación sobre tipos de enlaces de Navi+ para ver los detalles.

Lista de verificación de acciones

• Selecciona la sección de inicio a la que quieres que salten los compradores.
• Añade un bloque Custom Liquid vacío (<div id="reviews"></div>) para un ID estable.
• Configura el enlace de la pestaña como /#your-id (o sintaxis propia de la app).
• Añade html { scroll-behavior: smooth; } en CSS para un desplazamiento suave.
• Asigna scroll-margin-top en CSS para evitar que el encabezado fijo tape el título.
• Prueba en un teléfono real tanto desde la portada como desde una ficha de producto.
• Apunta el ID en las notas de la tienda para no borrar el bloque por error en el futuro.

Preguntas frecuentes (FAQ)

¿Dónde encuentro el ID de una sección de Shopify?

Cada sección se envuelve en un div con un ID como shopify-section-.... Puedes verlo haciendo clic derecho e inspeccionando el elemento.

¿Por qué ha dejado de funcionar mi enlace ancla?

Shopify genera ID dinámicos en plantillas JSON. Si se recrea la sección, el ID cambia. Un ID propio con Custom Liquid garantiza estabilidad permanente.

¿Por qué el título de la sección queda oculto bajo el encabezado tras el salto?

El navegador alinea el elemento con el borde superior y el encabezado fijo lo tapa. Añadir scroll-margin-top en CSS proporciona la separación necesaria.

¿Puedo usar el mismo ID dos veces en una misma página?

No. El estándar HTML exige que el atributo id sea estrictamente único en todo el documento. Repetir un ID provoca saltos erróneos.

¿Indexará Google /#reviews como una página independiente?

No. Google por lo general no admite fragmentos de URL para indexar contenido diferenciado. Si necesitas indexación, crea una página dedicada.

¿Admite Navi+ la vinculación de una pestaña a una sección?

Sí. En Navi+ Tab Bar, introduce scroll:OnPage(#section-id) en Link To para activar el desplazamiento suave por selector CSS (Business y Elite).

Fuentes

• Shopify Developer Documentation: Liquid Objects: Section
• Shopify Developer Documentation: Section Rendering API
• MDN Web Docs: HTML id attribute
• MDN Web Docs: Element: scrollIntoView() method
• MDN Web Docs: CSS scroll-behavior
• Google Search Central: URL Structure Guidelines
• FoxEcom Zest Theme Documentation: Mobile Navigation Bar
• Navi+ Help Center: Menu Item Link Types