Cómo encontrar el selector CSS de una sección de inicio para un enlace de pestaña (Shopify)

Respuesta rápida

Abre tu página de inicio en vivo, haz clic derecho sobre la sección y selecciona Inspeccionar. Localiza el contenedor cuyo ID comience por shopify-section-, escribe # delante y ejecuta $$('#ese-id').length en la Consola. Si devuelve 1, ese selector es un destino de desplazamiento válido.

Al configurar una barra de pestañas inferior o un menú móvil, los comerciantes a menudo encuentran un campo que solicita un «selector CSS». Dado que los navegadores ejecutan el desplazamiento localizando nodos coincidentes en el DOM de la tienda, introducir un selector inexacto o duplicado hará que la pestaña salte a una posición incorrecta o no responda. Comprobar el selector con las herramientas de desarrollo garantiza una navegación fluida antes de publicar los cambios.

Selector, ID de sección y ancla: qué necesita el enlace de la pestaña

Antes de pegar código en los ajustes de navegación, es fundamental distinguir tres conceptos estrechamente vinculados: un selector CSS, un identificador (ID) HTML de sección y un enlace de anclaje. Las aplicaciones de menú y los temas utilizan estos términos de forma dispar, e introducir un formato erróneo romperá el salto de tu pestaña.

Un selector CSS es un patrón utilizado por estilos y scripts para identificar uno o varios elementos HTML. Ejemplos habituales son #reviews (que apunta al elemento con el ID exacto reviews) o .featured-collection (que apunta a cualquier elemento que posea esa clase). De acuerdo con la especificación del atributo id en MDN Web Docs, un id debe ser único en todo el documento. La documentación técnica de Section Store corrobora este principio: un ID pertenece a un solo elemento, por lo que siempre llega al punto exacto.

Un enlace de anclaje (anchor link), en cambio, es una URL completa o relativa que incluye un identificador de fragmento, como /#reviews. Los navegadores web leen el símbolo de almohadilla # en la barra de direcciones y se desplazan automáticamente hasta el elemento que porta ese ID. Si tu aplicación de menús ofrece un campo específico para «selector CSS», espera una expresión de selector (como #reviews), no una dirección web completa. Para tiendas que configuran enlaces de fragmento de URL convencionales, consulta nuestra guía complementaria sobre enlaces de anclaje en barras móviles.

Conectar a los compradores móviles directamente con las secciones clave de la página de inicio constituye un pilar de la arquitectura de barra de pestañas móvil. La siguiente tabla resume las diferencias en la práctica:

Paso 1: Inspecciona la sección en tu tienda en vivo

Para dar con el selector adecuado, visualiza tu tienda tal como la ven tus clientes en lugar de usar el personalizador de temas de Shopify. La página en vivo es la que cargan realmente tus clientes, así que es el lugar más seguro para leer el marcado real.

Abre una nueva pestaña del navegador, accede a la página de inicio de tu tienda en vivo y desplázate hasta la sección que deseas vincular (por ejemplo, reseñas de clientes, preguntas frecuentes o colección destacada). Haz clic derecho directamente sobre el encabezado o fondo de la sección y elige Inspeccionar (Inspect).

También puedes abrir las herramientas de desarrollo mediante atajos de teclado:

• macOS: Pulsa Cmd + Option + C (Chrome DevTools Open)
• Windows: Pulsa Ctrl + Shift + C (Chrome DevTools Open)

Atajos de teclado para abrir el inspector de elementos:
macOS:   Cmd + Option + C
Windows: Ctrl + Shift + C

Localiza el contenedor shopify-section

Al abrirse el panel Elementos, el inspector resaltará la línea de texto o la imagen exacta sobre la que hiciste clic. Para establecer un objetivo de desplazamiento fiable, debes ascender en la jerarquía del DOM hasta hallar el contenedor que encierra la sección completa.

1. En el panel Elementos, desplaza el cursor hacia arriba a través de las etiquetas padre.
2. Busca un contenedor exterior—normalmente una etiqueta <div>—que envuelva toda la sección.
3. Localiza su atributo id. En tiendas Shopify, este ID suele comenzar con el prefijo shopify-section-.

Tal como se detalla en la documentación oficial de Shopify sobre el objeto Section, los ID de las secciones incluidas mediante plantillas JSON son generados dinámicamente por Shopify. Un ID puede verse parecido a shopify-section-template--18492048593__featured_collection, pero el tuyo será distinto, así que cópialo de tu propia página.

<!-- Ejemplo de contenedor de sección de Shopify -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
  <!-- El contenido de la sección se renderiza aquí -->
</div>

Convierte la línea en un selector (# para ID, . para clase)

Una vez localizado el contenedor, convierte el atributo HTML en sintaxis CSS válida:

• Si utilizas el valor del id, antepón una almohadilla #: #shopify-section-template--18492048593__reviews
• Si utilizas una class, antepón un punto .: .featured-reviews-grid
• Si un elemento tiene varias clases separadas por espacios, únelas mediante puntos: div.shopify-section.reviews-container

Chrome DevTools incluye además un acceso directo muy útil: haz clic derecho sobre el nodo resaltado en el árbol de elementos, selecciona Copy y pulsa en Copy JS Path (Chrome DevTools DOM). Chrome copiará una expresión en tu portapapeles:

document.querySelector("#shopify-section-template--18492048593__reviews")

Extrae la cadena que se encuentra entre comillas. Ese texto constituye tu selector candidato. Antes de guardarlo en tu menú, debes cerciorarte de que apunte exclusivamente a esta sección.

Paso 2: Comprueba que el selector coincida exactamente con un elemento

Un error común entre los comerciantes es asumir que cualquier selector copiado de DevTools funcionará por defecto. No obstante, si el selector coincide con varias secciones o con ningún elemento en pantallas móviles, la barra de pestañas fallará.

Las pautas técnicas de UpCharge recalcan que se deben buscar clases o ID únicos al designar destinos en la tienda. Verificar la unicidad con las herramientas de desarrollo integradas es rápido.

Buscar en el panel Elementos (Ctrl/Cmd+F)

La comprobación inicial más veloz se efectúa directamente en el árbol DOM. Según la documentación de Chrome DevTools DOM, puedes realizar búsquedas en el árbol DOM por texto, selector CSS o expresión XPath.

1. Haz clic dentro del panel Elementos.
2. Pulsa Ctrl + F (Windows) o Cmd + F (macOS) para mostrar la barra de búsqueda inferior.
3. Pega tu selector candidato con la almohadilla # incluida (por ejemplo, #shopify-section-template--18492048593__reviews).
4. Observa el contador de coincidencias a la derecha del campo (por ejemplo, 1 of 1).

Comprobación de búsqueda en el panel Elementos:
Expresión: #shopify-section-template--18492048593__reviews
Resultado esperado: 1 of 1

Si el contador marca 1 of 1, tu selector apunta a un único nodo en la estructura del documento.

Contar coincidencias en la Consola

Para una verificación concluyente desde la perspectiva de los scripts, dirígete a la pestaña Consola de DevTools.

Conforme a la API Console Utilities de Chrome DevTools, la función $$(selector) devuelve una matriz con todos los elementos que coinciden con el selector CSS indicado. También puedes emplear la función estándar document.querySelectorAll(selector) (MDN querySelectorAll).

Escribe uno de los siguientes comandos en la consola y presiona Enter:

$$('#shopify-section-template--18492048593__reviews').length

document.querySelectorAll('#shopify-section-template--18492048593__reviews').length

Interpreta el valor numérico devuelto por la consola:

Repite siempre esta prueba en el modo de simulación móvil. Haz clic en el icono Toggle device toolbar en DevTools. Ciertos temas de Shopify cargan secciones independientes para ordenador y móvil, lo que puede provocar que los selectores desaparezcan o se dupliquen en smartphones.

Ilustración de concepto: Comprobación del recuento de coincidencias en la consola para asegurar que el selector apunte a un único elemento.

Paso 3: Elige un selector que resista las ediciones del tema

Aunque usar un ID de contenedor generado automáticamente que comience por shopify-section- sirve para pruebas rápidas, depender de él de forma permanente acarrea riesgos en producción.

En la arquitectura Online Store de Shopify, los ID de las secciones incluidas mediante plantillas JSON son generados dinámicamente por Shopify (Shopify Section Object). El desarrollador de temas Fluorescent advierte claramente sobre esta conducta: “Shopify dynamically generates ids for sections but these ids are not stable.” (Shopify genera dinámicamente ID para las secciones, pero estos ID no son estables). Como estos ID no son estables, un enlace de pestaña basado en ellos puede dejar de funcionar tras editar el diseño, así que vuelve a comprobarlo después de cada cambio.

Evita asimismo cadenas complejas multinivel como div:nth-child(4) > div.grid > div:first-child. Cualquier pequeña modificación en el diseño puede romper este tipo de selectores.

El método robusto: añadir un bloque de ID con Custom Liquid

Para disponer de un selector que no varíe jamás ante actualizaciones o cambios en la plantilla, crea tu propio ID permanente desde el personalizador del tema:

1. En el panel de control de Shopify, ve a Tienda online > Temas.
2. Duplica tu tema activo para disponer de una copia de seguridad antes de realizar modificaciones.
3. Haz clic en Personalizar en tu tema de trabajo.
4. En el diseño de la página de inicio, pulsa en Agregar sección o Agregar bloque justo encima de la sección objetivo.
5. Selecciona Custom Liquid (o HTML personalizado, según tu tema).
6. Pega una etiqueta de anclaje HTML sencilla con el ID que elijas:

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

Escribe el ID en minúsculas y separado por guiones (por ejemplo, opiniones-clientes, seccion-faq o productos-destacados). De acuerdo con la referencia del atributo id en MDN, este identificador debe ser único en todo el documento.

El siguiente videotutorial de EcomGraduates enseña de manera práctica cómo inspeccionar secciones e insertar identificadores de anclaje propios en Shopify:

Casos difíciles: sin ID clara, secciones anidadas y caracteres especiales

Ciertas disposiciones en tiendas de Shopify pueden dificultar la identificación de selectores limpios. Abordar estos escenarios metódicamente previene enlaces rotos.

La sección no muestra un ID claro

Algunas secciones personalizadas o creadas con maquetadores visuales no imprimen un ID estándar en su contenedor exterior. En lugar de encadenar clases frágiles—propensas a fallar con cada actualización de estilos—, recurre a la solución de Custom Liquid del Paso 3. Insertar <div id="tu-id"></div> justo encima de la sección te brinda un selector incuestionable sin necesidad de alterar los archivos liquid del tema.

Secciones anidadas y bloques de aplicaciones

Si buscas enlazar a un bloque de aplicación dentro de una sección nativa (como un widget de reseñas dentro de una cuadrícula de producto), apuntar al contenedor interno de la app puede llevar a un punto inesperado, así que pruébalo siempre. Apunta al contenedor exterior shopify-section o ubica tu bloque de ancla directamente encima de la sección.

Secciones exclusivas para móvil u ordenador

Muchos comerciantes configuran banners separados para móvil y escritorio. Si la sección de escritorio tiene un ID pero la versión móvil emplea otro bloque, la pestaña fallará en dispositivos móviles. Inspecciona siempre la tienda en el modo móvil de DevTools y selecciona el contenedor que efectivamente se muestra en teléfonos.

Caracteres especiales y reglas de escape en CSS

Según la documentación de MDN sobre querySelector, si el valor de una clase o ID no es un identificador CSS válido (como aquellos que comienzan con números o incluyen dos puntos, puntos o signos de interrogación), debe procesarse mediante CSS.escape(). Un ID como 123-reviews requiere escape en CSS estándar.

Para prevenir fallos sintácticos en tu aplicación de navegación, prescinde de caracteres extraños. Utiliza únicamente letras minúsculas, números y guiones, y evita comillas o paréntesis en los campos de enlace.

Usa el selector como destino de desplazamiento de la pestaña

Una vez confirmado que el selector apunta exactamente a un único elemento, puedes integrarlo en la configuración de tu barra de pestañas móvil.

Verifica primero la documentación de tu aplicación de navegación o tema. Comprueba si el campo de enlace espera una URL completa con fragmento de anclaje (como /#reviews) o una expresión directa de selector CSS (como #reviews).

Si tu aplicación ofrece un campo específico para selector CSS:

1. Pega el selector validado en el Paso 2 (por ejemplo, #reviews o #shopify-section-template--custom).
2. Comprueba que la sintaxis se ajuste al formato requerido por la app.
3. Guarda los cambios del menú.

Ten presente que las funciones de desplazamiento operan en el documento activo. Si un comprador toca una pestaña configurada con un selector de página interna mientras se encuentra en una página de producto o colección, la consulta del selector devolverá null (MDN querySelector) y no habrá desplazamiento. Prueba siempre el enlace directamente desde la página de inicio.

Anota los ID que hayas creado en la documentación técnica de tu tienda para que ningún miembro del equipo borre accidentalmente el bloque Custom Liquid durante limpiezas posteriores.

Solución de problemas: la pestaña no se desplaza, queda bajo el encabezado o salta mal

Si el destino de la pestaña no responde como se espera en dispositivos móviles, revisa las causas habituales:

La pestaña no se desplaza en absoluto

Abre la consola en tu página de inicio en vivo y ejecuta de nuevo $$('#tu-selector').length. Si el resultado es 0, el elemento no existe en la página actual, el ID se alteró tras publicar una versión de tema o el selector tiene una errata. Según MDN, un selector no coincidente devuelve null y detiene la ejecución (MDN querySelector).

La pestaña se desplaza a una sección equivocada

Si al pulsar la pestaña la pantalla salta a la parte superior o inferior en lugar de la sección prevista, tu selector coincide con múltiples elementos. Cuando varios nodos coinciden, querySelector selecciona siempre el primero en el DOM (MDN querySelector). Emplea la consola para identificar duplicados y reemplázalos con un ID personalizado único.

El título de la sección queda oculto tras el encabezado fijo

Por defecto, las rutinas de desplazamiento alinean el borde superior del elemento destino al ras de la parte superior de la pantalla. Si tu tienda cuenta con un encabezado fijo o pegajoso (sticky), este se superpondrá al título de la sección.

La documentación de MDN sobre scrollIntoView indica que se puede definir una holgura mediante la propiedad CSS scroll-margin-top: “To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.” (Para definir un espaciado personalizado, utiliza scroll-margin-top o scroll-margin-bottom. Esto suele ser útil cuando hay un encabezado fijo en la página).

Mide la altura del encabezado en DevTools y asigna un margen de desplazamiento equivalente en los estilos CSS personalizados de tu tema:

/* Crear separación bajo el encabezado móvil fijo */
#reviews {
  /* Replace 80px with your own header height */
  scroll-margin-top: 80px;
}

Un panel de menú lateral (drawer) bloquea la pantalla

Si tu barra de pestañas convive con un menú lateral desplegable, tocar una pestaña con el panel abierto puede ocasionar solapamientos no deseados. Seguir las recomendaciones para un menú lateral móvil (drawer) asegura que los paneles superpuestos se cierren de forma limpia al activar un enlace de navegación externo.

Las imágenes con carga diferida (lazy-load) desplazan la posición final

Si la página de inicio incluye banners pesados por encima de la sección destino, los scripts de carga diferida pueden recalcular las dimensiones de la página una vez completado el desplazamiento, desfasando la vista ligeramente hacia arriba o hacia abajo. Prueba la acción de la pestaña tras completarse la carga de todos los archivos multimedia.

Ilustración de concepto: Compensación de encabezados fijos que tapan el título de una sección mediante la propiedad CSS scroll-margin-top.

Compromisos: cuándo un selector no es la herramienta adecuada

Aunque desplazarse hacia una sección de la misma página ofrece una navegación fluida, no siempre constituye la solución más adecuada para una tienda online.

Contenido extenso que necesita su propia página

Si el contenido que enlazas es un catálogo amplio de productos, políticas detalladas o respuestas de soporte extensas, comprimirlo en una sola sección de la página de inicio lo hace más difícil de encontrar y compartir. Las páginas de colección o de políticas independientes tienen cada una su propia URL, a la que una pestaña puede enlazar directamente en lugar de depender de un desplazamiento dentro de la página.

Sobrecarga de la barra de pestañas móvil

Una barra de navegación móvil está concebida para la alternancia ágil con el pulgar entre las áreas principales de la tienda. Destinar varias pestañas inferiores a secciones internas de la página de inicio sobrecarga la barra y pierde eficacia cuando los clientes se adentran en el catálogo. Como detallamos en nuestra guía sobre navegación más allá del menú hamburguesa, las pestañas deben reservarse para destinos de alta prioridad.

Dependencia del tema y mantenimiento

Cualquier selector vinculado al código generado por el tema requiere comprobaciones periódicas al renovar o actualizar plantillas. Cuando las personalizaciones del menú por defecto se vuelven complejas de sostener, los comerciantes deben sopesar los límites de los menús de tema para determinar si una solución de navegación dedicada resulta más rentable a largo plazo.

El lugar de Navi+

Navi+ ofrece controles de navegación avanzados para comerciantes de Shopify a través de sus módulos Tab Bar y Mobile Menu. Cada elemento dispone de un campo Link To específico, concebido para admitir tanto direcciones web estándar como comandos funcionales de interacción.

Para los comerciantes que buscan desplazamientos fluidos a secciones concretas, Navi+ incorpora la sintaxis scroll:OnPage(#section-id), documentada oficialmente en su centro de ayuda como «Scroll to a section by CSS selector» (tipos de enlaces en Navi+). Esta funcionalidad está disponible en los planes Business y Elite.

Al configurarla, introduce exactamente el selector único verificado en el Paso 2. Dado que el mecanismo de desplazamiento en la página se procesa en el DOM del documento activo, la sección destino debe encontrarse en la página que el usuario está visualizando. Realiza siempre las pruebas desde un teléfono real partiendo de la página de inicio.

Si utilizas Navi+ Tab Bar, pega el selector que acabas de comprobar en el campo Link To de la pestaña en el formato scroll:OnPage(#tu-id), y luego pruébalo en tu teléfono desde la página de inicio. La lista completa de tipos de enlaces está disponible en el centro de ayuda de Navi+.

Lista de verificación de acciones

Sigue esta lista de verificación de siete puntos para configurar con precisión el selector de tu sección:

• Abre tu tienda en vivo en el navegador de tu ordenador (fuera del editor de temas).
• Haz clic derecho en la sección objetivo, selecciona Inspeccionar y localiza el contenedor exterior cuyo ID empieza por shopify-section-.
• Anota el ID del contenedor y conviértelo en selector anteponiendo un #.
• Ejecuta $$('#tu-selector').length en la consola de DevTools para confirmar que el resultado sea estrictamente 1.
• Activa el modo de emulación de dispositivos para cerciorarte de que el selector siga existiendo y sea único en móviles.
• Si requieres estabilidad a largo plazo, agrega un bloque Custom Liquid con <div id="tu-id"></div> justo encima de la sección.
• Introduce el selector verificado en la configuración de la pestaña, añade scroll-margin-top si el encabezado fijo oculta el título y pruébalo en un teléfono real.

Preguntas frecuentes (FAQ)

¿Dónde puedo ver el ID de una sección en Shopify?

Los ID de sección no se muestran en el panel de administración estándar de Shopify. Para consultarlo, abre tu tienda en vivo en el navegador, haz clic derecho sobre la sección, pulsa Inspeccionar y lee el atributo id en el contenedor exterior shopify-section (Shopify Section Object, MDN querySelectorAll).

¿Por qué dejó de funcionar el selector de mi sección?

Shopify genera de forma dinámica los ID de las secciones incluidas mediante plantillas JSON, y estos pueden modificarse al editar o recrear secciones (Shopify Section Object, Fluorescent). Crear un ID fijo mediante un bloque Custom Liquid garantiza total permanencia.

¿Cómo sé si mi selector coincide únicamente con un elemento?

Abre la pestaña Consola en las herramientas de desarrollo y ejecuta $$(selector).length o document.querySelectorAll(selector).length (Chrome DevTools Console Utilities, Chrome DevTools DOM). Un valor devuelto de 1 confirma que el selector coincide con un solo elemento en el documento.

¿Conviene usar la opción «Copy selector» de DevTools?

Puedes emplear la opción «Copy selector» o «Copy JS Path» de Chrome para comprobaciones preliminares, pero las cadenas multinivel resultantes son quebradizas ante cambios de maquetación. Es mucho más fiable sintetizar la expresión en torno al ID único de la sección.

¿Qué sucede si el selector coincide con varias secciones?

Cuando un selector coincide con múltiples elementos, métodos de JavaScript como querySelector eligen únicamente el primer elemento coincidente en el DOM (MDN querySelector). Como consecuencia, la pestaña podría desplazarse a una sección inesperada situada más arriba.

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

Los navegadores alinean el extremo superior del elemento de destino con el borde superior de la pantalla. Si tu tienda emplea un encabezado fijo, este solapará el título. Incorporar la propiedad CSS scroll-margin-top a la sección objetivo proporciona la separación indispensable para que sea legible (MDN scrollIntoView).

Fuentes

• Shopify Developer Documentation: Section Liquid Object — Detalles sobre la generación dinámica de ID de secciones en plantillas JSON.
• Fluorescent Documentation: Custom Liquid Developer Guide — Fundamentos sobre la inestabilidad de ID de sección e implementación de anclas personalizadas.
• MDN Web Docs: HTML id global attribute — Normas formales que rigen la unicidad del atributo ID en todo el documento.
• MDN Web Docs: Document.querySelector() — Comportamiento de primer elemento, valores nulos y reglas de escape en selectores.
• MDN Web Docs: Document.querySelectorAll() — Mecánica de listas de nodos estáticas en comprobaciones de selectores.
• MDN Web Docs: Element.scrollIntoView() — Alineación de viewport y especificaciones de margen con scroll-margin-top.
• Chrome for Developers: Chrome DevTools DOM Inspection — Capacidades de búsqueda en el árbol DOM y copia de rutas de nodos.
• Chrome for Developers: Console Utilities API — Guía sobre la función de ayuda $$(selector).
• Chrome for Developers: Open Chrome DevTools — Atajos de teclado del sistema operativo para abrir herramientas de inspección.
• Section Store Help: Custom Placement: Finding a CSS Selector — Recomendaciones sobre unicidad de ID y colocación.
• UpCharge Help Center: Selector Settings Guide — Consejos prácticos para identificar clases e ID únicos.
• Navi+ Help Center: Navigation Item Link Types — Especificaciones oficiales para scroll:OnPage(#section-id) en planes Business y Elite.