Ayuda

Temas modernos | Temas antiguos

Empezando

Para aprovechar al máximo Category Breadcrumbs, primero debe configurar su tienda con Productos, Colecciones y Navegación. Este screencast lo guiará a través del proceso, incluido cómo configurar los elementos del menú que forman sus categorías.

Instalación de rutas de navegación de categoría

Esta aplicación utiliza el editor de temas de Shopify para darte control sobre cómo se ve la ruta de navegación y dónde está posicionada. Proporcionamos este screencast para que su recorrido por el proceso sea sencillo:

1. Abre tu tema actual en la interfaz del Editor de temas de Shopify.
2. Seleccione la ‘Colección predeterminada’ en el selector de plantillas.
3. Utilice el editor de temas para colocar el bloque de ruta de navegación de categoría (incrustar) en su tema.
4. Opcionalmente, repita el proceso para el ‘Producto predeterminado’.

Mostrar rutas de navegación en las páginas de productos

También puede mostrar rutas de navegación de categorías en las páginas de sus productos. Debido a que cada producto puede pertenecer a varias colecciones, necesitamos una forma de identificar en qué colección desea que aparezca el producto y, por lo tanto, qué ruta de navegación mostrar. La mejor manera de hacerlo es utilizando URL de formato largo:

• Enlaces del formulario /collection/collection_name/product/product_name, como este mostrará la ruta de navegación correcta.
• Enlaces sin colección o URL de formato corto como este, no indiques en qué colección estás para obligar a Shopify a adivinar. Existe un rumor sin fundamento de que las URL de formato corto son mejores para el SEO porque evitan el contenido duplicado, pero es mejor hacerlo usando URL de formato largo con rel=”canonical” como Shopify recomienda en esta publicación de Mejores Prácticas.

Procedente de páginas de colección

Los enlaces en las colecciones son generados por su tema, por lo que si hace clic en un producto de una colección y navega a la página de un producto con una URL de formato corto, ese problema lo crea su tema. El mejor lugar para solucionarlo es el tema, pero puede utilizar esta corrección de enlace de formato corto en su inserción como una alternativa más pobre. Intenta lo mejor que puede detectar enlaces de formato corto en las páginas de la colección y reescribirlos automáticamente. Este screencast explica:

La corrección del enlace de formato corto está disponible como una opción de casilla de verificación para los temas 2.0 en el Editor de temas de Shopify, en la configuración de ruta de navegación de categoría en la página Colección predeterminada.

Procedente de otras páginas, como la búsqueda de Shopify

Incluso con esta solución, todavía es posible acceder a URL de formato corto y en esas páginas es necesario mostrar una ruta de navegación. De forma predeterminada, Shopify pone a disposición una lista desordenada de colecciones como metacampos, que esta aplicación utiliza para intentar adivinar la ruta de navegación correcta. Recuerde, si utiliza URL de formato corto, un producto solo puede tener una ruta de navegación. La mayoría de las veces, la ruta de navegación predeterminada para un producto es la que pertenece a la colección Más específica (la predeterminada), aunque puedes decirle que adivine de manera diferente usando la configuración de Rutas de navegación de categoría en la página Producto predeterminado. Ahora bien, esto es una suposición, no siempre será la colección correcta, pero es una solución alternativa si tienes un tema que no produce URL de formato largo.

Finalmente, si desea elegir una colección principal predeterminada diferente para productos específicos, diga que la suposición no es la que desea, y su tema produce URL de formato corto, puede establezca un metacampo de Producto personalizado para la Referencia de colección predeterminada (llamada custom.default_collection_reference) en cada Producto que haga referencia a una única Colección:

Cómo personalizar el aspecto de tu ruta de navegación

El aspecto de la ruta de navegación está completamente controlado por su tema. Los colores o estilos pueden variar en diferentes partes de la plantilla y entre diferentes plantillas, pero todos están controlados por el tema actual.

La forma más sencilla de cambiar esos estilos es usar la configuración de ruta de navegación de categoría en el editor de temas de Shopify. Sin embargo, si desea tener más control, puede anular los estilos de su tema y la configuración de ruta de navegación de categoría utilizando un bloque de líquido personalizado. Este screencast explica el proceso paso a paso:

Por ejemplo, si desea que la fuente esté en negrita, negra y no subrayada, puede utilizar este código personalizado:

<style>
    nav.category-breadcrumbs a {
        font-weight: bold;
        color: black;
        text-decoration: none;
    }
</style>

Creando navegación con más de 3 niveles de profundidad

La navegación de Shopify admite dos formas de anidar elementos del menú debajo de los elementos del menú:

• La interfaz de administración de Shopify Navigation te permite crear una jerarquía de elementos del menú, pero solo con 3 niveles de profundidad.
• Tradicionalmente, los menús se anidaban creando un elemento de menú con un nombre que coincidía con otro menú. Este tipo de anidamiento heredado todavía se admite.

Si bien la moderna interfaz de administración de Shopify Navigation solo admite 3 niveles de navegación, aún puedes crear más de 3 niveles de navegación usando el anidamiento heredado. Es crucial evitar nombres de categorías o URL de categorías duplicados, especialmente si se utiliza anidamiento heredado, porque Shopify no puede distinguir entre dos elementos del menú con el mismo nombre o URL. Este vídeo da una explicación completa:

Colocar productos en categorías de hojas y categorías de padres

Puedes hacer que los productos aparezcan en ambas categorías de hoja (las más específicas) y en sus categorías principales, pero la forma en que está configurado Shopify significa que debes indicarle explícitamente dónde quieres que aparezca cada producto. Eso significa agregar un producto a una colección de hojas y sus colecciones principales. Esto se logra mejor usando etiquetas, tales que:

• You only have to tag a product once
• Cada colección define sus contenidos basándose en un conjunto de etiquetas cada vez más amplio

Cada enlace del árbol de categorías sólo puede dirigirse a un lugar. Cada uno muestra una colección. Los productos que coloca en esa colección están bajo su control, por lo que al organizar sus productos en varias colecciones puede hacer que aparezcan en todo el árbol de categorías.

Si tiene un árbol de categorías como este, desde nuestro tienda de demostración:

• Tecnología
  • Computadoras
    • Escritorios

Puede colocar la PC de escritorio Lenovo en una sola colección, como aquí.

Alternativamente, puede colocarlo en la colección de Escritorios, en la colección de Computadoras y en la colección de Tecnología. No es así como lo he implementado en mi tienda de demostración, pero es posible.

Al utilizar el etiquetado, puede etiquetar la PC de escritorio Lenovo como “PC de escritorio” y luego crear colecciones que usen esa etiqueta:

• Tecnología, etiquetas de colección = [“PC de escritorio”, “PC portátil”, “Tableta”, “Servidor”, “Smartphone”, “Reloj inteligente”, “Impresoras”…]
  • Computadoras, etiquetas de colección = [“PC de escritorio”, “PC portátil”, “Tableta”, “Servidor”]
    • Escritorios, etiquetas de colección = [“PC de escritorio”]

Esto está completamente bien, pero puedes simplificarlo etiquetando los productos directamente con sus padres. Para la PC de escritorio Lenovo, puede etiquetarla con “Escritorios”, “Computadoras” y “Tecnología”. Eso significa que las etiquetas de la colección son más sencillas de configurar:

• Tecnología, etiquetas de colección = [“Tecnología”]
  • Computadoras, etiquetas de colección = [“Computadoras”]
    • Escritorios, etiquetas de colección = [“PC de escritorio”]