Breadcrumbs

Enlaces destacados

1. documentación de Shopify sobre el editor de temas
2. documentación de Company XYZ sobre el bloque Breadcrumbs
3. documentación de Company XYZ sobre iconos
4. documentación de Company XYZ sobre los ajustes de espaciado de sección
5. documentación de Company XYZ sobre los ajustes de fondos de sección
6. documentación de Company XYZ sobre los ajustes de separadores
7. documentación de Company XYZ sobre los ajustes de visibilidad
8. documentación de Company XYZ sobre los ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Utilice Breadcrumbs para mostrar una ruta de navegación clara de regreso a páginas de nivel superior. Funciona mejor cerca de la parte superior de una página, donde puede apoyar la navegación sin competir con el contenido principal. Para un contexto más amplio sobre la configuración del tema, vea documentación de Shopify sobre el editor de temas

Ajustes de sección

Los ajustes principales controlan los iconos usados en la ruta de migas de pan. Puede usar un icono de inicio para el primer elemento y elegir un icono separador entre los enlaces de migas de pan. Para los iconos separadores, puede introducir un emoji o un nombre de icono, o dejar el campo en blanco para un aspecto más limpio sin separador mostrado. Para ayuda sobre iconos, vea la guía de iconos.

Mantenga un estilo sencillo para las migas de pan cuando la página ya tenga cerca elementos visuales marcados. Un separador minimalista suele verse más limpio y es más fácil de leer en pantallas pequeñas.

Ajustes de alineación

Estos ajustes controlan la alineación horizontal por separado para escritorio y dispositivos móviles. Esto es útil cuando las migas de pan deben alinearse con el contenido circundante en pantallas grandes, pero necesitan una posición distinta en pantallas pequeñas.

La alineación a la izquierda suele ser la más fácil de leer, especialmente cuando las rutas de migas de pan son más largas. Si la ruta se siente apretada en móvil, simplifique los iconos o acorte las etiquetas antes de forzar una alineación más decorativa.

Ajustes de color

Estos ajustes anulan los colores del tema más amplios para esta sección. Son más útiles cuando la ruta de migas de pan se sitúa sobre un fondo personalizado o necesita un tratamiento más claro o más oscuro que el resto de la página.

Trate de mantener las migas de pan visualmente secundarias, pero aún legibles y claramente interactivas. Los colores del texto y de los iconos deben tener suficiente contraste para seguir siendo fáciles de distinguir sin parecer llamadas a la acción principales.

Las migas de pan deben seguir siendo sutiles, pero los clientes aún deben reconocerlas como navegación.

Tipos de bloque admitidos

1. Breadcrumb

Breadcrumb

Use este bloque para añadir un enlace estático de página superior a la ruta de migas de pan. Esto es útil cuando desea insertar un paso manual para páginas de destino, rutas de contenido personalizadas o flujos de navegación especiales. Para obtener detalles sobre la configuración del bloque, vea documentación de Company XYZ sobre el bloque Breadcrumb.

1. Mantenga breve el texto del bloque para que la ruta completa siga siendo legible.
2. Use el ajuste de enlace para destinos superiores reales, no para enlaces decorativos o repetidos.
3. Use el ajuste de visibilidad del bloque cuando un enlace superior manual solo sea útil en escritorio o solo en móvil.

Nota

Los enlaces de migas de pan suelen funcionar mejor en la misma pestaña, ya que forman parte de la navegación normal de la página.

Ajustes estándar de sección

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo de la ruta de migas de pan en escritorio y en dispositivos móviles. En esta sección, le ayudan a crear una separación cómoda del encabezado y del contenido de la página.

Como las migas de pan son compactas, normalmente el espaciado más ligero resulta mejor. Añada más espaciado solo cuando la sección necesite destacarse visualmente o incluya un tratamiento de fondo.

Ajustes de fondo de sección

Ajustes de fondo de sección le permiten colocar la ruta de migas de pan sobre un color, degradado, imagen o vídeo. Esto puede ayudar a que la sección se sienta distinta, especialmente en diseños de página más personalizados.

Use los tratamientos de fondo con cuidado aquí, ya que las migas de pan son pequeñas y se pueden ver fácilmente eclipsadas. Los controles de superposición pueden ayudar a conservar la legibilidad cuando se usan imágenes o vídeo.

Precaución

Un contenido visual de fondo intenso puede dificultar la lectura de los enlaces de migas de pan, especialmente en móvil.

Ajustes de separador

Ajustes de separador añaden una línea opcional encima o debajo de la sección. Son útiles cuando desea separar el área de migas de pan del contenido circundante sin añadir mucho espacio extra.

Un separador superior puede funcionar bien debajo de un encabezado, mientras que un separador inferior puede ayudar a definir el inicio del contenido principal de la página. Si deja transparente el color del separador, se usa el color de borde estándar.

Ajustes de visibilidad

Ajustes de visibilidad controlan si toda la sección de migas de pan aparece en escritorio, en móvil o en ambos. Esto es útil cuando desea un diseño más sencillo en un tamaño de dispositivo.

Use la visibilidad de la sección para decisiones amplias de diseño. Si la sección está oculta en un tamaño de dispositivo, cualquier elección de visibilidad a nivel de bloque dentro de ella tampoco aparecerá allí.

Ajustes de ancho

Ajustes de ancho controlan tanto el ancho del contenido de la ruta de migas de pan como el ancho del contenedor de la sección. Esto le ayuda a alinear las migas de pan con el contenido cercano o a extender un tratamiento de fondo más ampliamente por la página.

Hacer que el ancho del contenido coincida con el diseño circundante suele crear el resultado más limpio. Al cambiar los ajustes de ancho, previsualice la página en vivo y también la vista del editor, ya que los cambios de diseño pueden sentirse distintos en cada una.

Notas de uso

1. Mantenga las etiquetas concisas. Los nombres cortos de migas de pan son más fáciles de leer y es menos probable que se dividan de forma incómoda en móvil.
2. Use enlaces manuales solo cuando sean útiles. Añada bloques Breadcrumb cuando aclaren la ruta, no cuando repitan una navegación obvia.
3. Observe los cambios impulsados por bloques. Las migas de pan adicionales pueden cambiar más la ruta que los ajustes a nivel de sección, así que revise la ruta completa después de añadir o quitar bloques.
4. Haga coincidir las elecciones de diseño cercanas. Alinee el ancho, el espaciado y la posición con la página circundante para que la ruta se sienta intencional.
5. Compruebe la legibilidad en fondos personalizados. Revise el contraste del texto, los iconos y el separador siempre que añada color, imágenes, degradados o vídeo.
6. Pruebe ambos tamaños de dispositivo. Las migas de pan pueden comportarse de forma diferente en escritorio y en móvil, así que revise la alineación, la visibilidad y cualquier tratamiento visual en ambas vistas.