Temas modernos | Temas antiguos

Instalación en temas antiguos (1.0)

Solo para temas más antiguos, esta aplicación proporciona una inserción, un pequeño fragmento de código que debe incluir en su tema para implementar las rutas de navegación. Se requiere algo de experiencia en codificación.

Debes hacer una copia de seguridad de tu tema antes de realizar cambios.

Si no estás familiarizado con la codificación, te recomiendo encarecidamente que evites los temas 1.0 heredados o antiguos y sigas con los temas 2.0 predeterminados, que te permiten usar el Editor de temas de Shopify. Estos temas heredados se basan en archivos “.liquid” y todos están organizados de manera diferente. Este vídeo muestra cómo codificar la inserción para el antiguo tema predeterminado 1.0, pero su tema no estará organizado de manera idéntica.</p>

  • Abre tu tema actual en la interfaz del Editor de temas de Shopify.

  • Seleccione el archivo líquido apropiado para su tema, a veces llamado “collection.liquid”, para editarlo.

  • Cambie la ruta de navegación existente para esta inserción de código de ruta de navegación que reconoce categorías:

      &#123;% include 'uncomplicated.categories.catbread' %}

Más vídeos para ayudarte a configurar

De nuestro canal de YouTube:

Cómo personalizar el aspecto de su ruta de navegación para temas 1.0

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.

Puedes anular los estilos de tu tema colocando CSS en uno de los archivos .scss o .css de tu tema. No cambie los archivos “uncomplicated…css”, ya que se regeneran dinámicamente.

Por ejemplo, si desea ajustar el espacio entre los separadores (‘>’), puede agregar este CSS a su tema.:

span.breadcrumb__sep {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

Desactivar o desinstalar temporalmente

Si desea desactivar temporalmente el menú, puede eliminar la inserción del líquido de su tema. Simplemente corte el código líquido que insertó anteriormente.

Alternativamente, puedes “comentar” el código usando comentarios líquidos.

Reducir la longitud del título en las páginas de productos

A veces, el título del producto es muy largo, lo que puede hacer que la ruta de navegación parezca difícil de manejar. Puedes controlar cómo se trunca el título del producto, es decir, cuando los caracteres se reducen con puntos suspensivos (…), usando una variable opcional en la inserción que insertas en tu tema.

  • De forma predeterminada, el título del producto en la ruta de navegación se truncará (con ...) después de 28 caracteres.
  • Para truncar después de un número diferente de caracteres, establezca truncate_limit en otro valor entero, digamos 40 caracteres. 
      &#123;% include 'uncomplicated.categories.catbread', truncate_limit: 40 %}
  • Para deshabilitar el truncamiento por completo y mostrar el título completo del producto, establezca “truncate_limit” en -1. Por ejemplo: 
      &#123;% include 'uncomplicated.categories.catbread', truncate_limit: -1 %}

Optimización de motores de búsqueda usando JSON-LD

Se incluye un marcado especial para ayudar a los motores de búsqueda a comprender la estructura de sus categorías. Este artículo de Google explica más al respecto.

En circunstancias muy raras, es posible que desee que otra aplicación genere y administre estos metadatos JSON-LD. Puede deshabilitar la adición de JSON-LD usando el indicador disable_jsonld, por ejemplo:

&#123;% include 'uncomplicated.categories.catbread', disable_jsonld:true %}

Si utiliza incrustaciones de varias categorías, como la lista de categorías, asegúrese de agregar este indicador disable_jsonld a todas ellas.

Eliminando ‘Todos los productos’ de las rutas de navegación que no pertenecen a la colección

La ruta de navegación “Todos los productos” aparece en rutas de navegación que no pertenecen a la colección para algunos productos. La mejor manera de eliminarlo es asegurarse de que todos sus productos estén en colecciones que estén en su jerarquía de categorías.

Siempre es mejor usar URL basadas en colecciones (ver arriba), pero aún puedes modificar la ruta de navegación usando CSS.

Si desea ocultar la entrada ‘Todos los productos’, agregue este fragmento de CSS a un archivo de tema (no uncomplicated… css):

a[title="All Products"], span#uncomplicated-category-breadcrumb-top-separator.breadcrumb__allproducts {
    display: none;
}

Controlar las conjeturas para rutas de navegación que no pertenecen a la colección para temas 1.0

Al utilizar temas modernos (2.0), la adivinación de rutas de navegación que no pertenecen a la colección se controla a través de la configuración (consulte ‘Mostrar rutas de navegación en las páginas de productos’ en la página principal de Ayuda).

El consejo aquí se aplica sólo a temas 1.0 anteriores, e incluso entonces sólo a aquellos que utilizan URL de formato corto (no recomendado).

Para cada producto, Shopify proporciona una lista desordenada de colecciones en las que aparece ese producto. Esta aplicación no tiene control del orden de la lista y, de forma predeterminada, utiliza la primera entrada como base para la ruta de navegación. Al incluir una bandera en el código de inserción, puede seleccionar usar:

  • ‘first’: la primera ruta de navegación posible de esa lista (predeterminado)

  • ‘last’: la última ruta de navegación posible de esa lista 
      &#123;% include 'uncomplicated.categories.catbread', prod_multicat_sel:"last" %}
  • ‘generic’: cree una ruta de navegación genérica del formulario Home > All products > Nombre del producto 
      &#123;% include 'uncomplicated.categories.catbread', prod_multicat_sel:"generic", text_catall:"All my products", link_catall:"/collections/all" %}

Traducir partes de la ruta de navegación

Nuevamente, los temas 2.0 son una mejor opción, porque la traducción automática usando “Traducir y Adaptar” de Shopify está integrada.

Para temas más antiguos, la mayor parte de la ruta de navegación se compone de nombres de productos que controlas a través del catálogo de productos de Shopify, con dos excepciones:

  • La raíz de ruta de navegación (por defecto es ‘Inicio’), que se puede configurar con:
    • text_catroot: el texto que se muestra en la raíz de la ruta de navegación
    • link_catroot: el destino del enlace cuando los usuarios hacen clic en la raíz de la ruta de navegación
  • La primera y única ruta de navegación (por defecto es ‘Todos los productos’), que se puede configurar con:
    • text_catall: el texto que se muestra cuando no se incluye ninguna colección en la URL
    • link_catall: el destino del enlace cuando los usuarios hacen clic en la primera ruta de navegación

Por ejemplo, una inserción de ruta de navegación altamente personalizada podría verse así:

&#123;% include 'uncomplicated.categories.catbread', text_catroot:"Casa", link_catroot:"/collections/all", text_catall:"Mis productos", link_catall:"/collections/all" %}

Si desea ocultar alguna parte de la ruta de navegación, puede desactivarla usando display:none en CSS.

Opcionalmente, es posible que desee que la ruta de navegación final sea texto sin formato, en lugar de un enlace a la página actual sin filtrar. Para mostrar la ruta de navegación final sin un enlace, agregue show_finalbread_as_textonly a su lista de argumentos de inserción:

&#123;% include 'uncomplicated.categories.catbread', show_finalbread_as_textonly: true %}