Temas antiguos

Temas modernos | Temas antiguos

Instalación en temas anteriores (1.0)

Solo para temas más antiguos, esta aplicación proporciona una serie de incrustaciones, cada una de las cuales es un pequeño fragmento de código que debes incluir en tu tema para mostrar las categorías. Se requiere algo de experiencia en codificación.

Debes hacer una copia de seguridad de tu tema antes de realizarle 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.

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' %}
```
Muestra íconos de subcategoría en las páginas de tu colección:
```
  &#123;% include 'uncomplicated.categories.caticons' %}
```

Puede cambiar la forma en que funciona la lista de categorías, específicamente qué subcategorías aparecen cuando hace clic en una categoría principal. Consulte la lista de ‘Formas alternativas de mostrar la lista de categorías’ a continuación.

Más vídeos para ayudarte a configurar

De nuestro canal de YouTube:

How to set up icons for your categories and sub-categories
[11 minute screencast]
How to set up Categories Uncomplicated from scratch
[20 minute screencast]
How to set up on an existing site and how to change the way your categories are displayed in Shopify
[9 minute screecast]
How to get a full category breadcrumb in Shopify
[2 minute screencast]
How to show multiple top-level categories in your Shopify storefront menu
[6 minute screencast]
How to show or hide product counts next to each category
[3 minute screencast]
How to deploy the Categories Uncomplicated liquid to your theme (using ‘Classic’ as an example)
[6 minute screencast]
How to show full-category breadcrumbs on Shopify product pages
[2 minute screencast]

Tipos de incrustación

Esta es la lista completa de los diferentes tipos de inserción disponibles para temas antiguos o heredados. Tenga en cuenta que no todos los temas admiten todos los tipos de inserción:

Ruta de navegación basada en categorías:

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

Cuadro de selección ‘Saltar a’:

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

Lista de categorías completa, con etiquetado de categorías actuales, principales y de pares:

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

Iconos de subcategoría:

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

Formas alternativas de mostrar la lista de categorías

Pruebe estas diferentes incrustaciones para controlar cómo se representa y se comporta su lista de categorías:

&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathback' %} (This is the default)
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathdirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-all' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activedown' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activedowndirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activeupdown' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activeupdowndirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-peersactiveup' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedown' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedowndirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-down' %}

Extras opcionales para lista de categorías

Eliminar categorías vacías (aquellas sin productos ni subcategorías):

&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-hide-catpc-zero' %}

Ocultar recuentos de productos que aparecen después de cada categoría, p. (42):

&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-nopc' %}

Formas alternativas de mostrar los íconos de categorías

Puede controlar la cantidad de columnas de íconos que se muestran en la página (8, 5, 4, 3, 2 o 1). Del mismo modo, puede seleccionar tener diferentes números de columnas en diferentes anchos de pantalla (grande, mediano o pequeño), ya que sus clientes pueden estar navegando por su tienda en una computadora de escritorio, tableta o dispositivo móvil.

La aplicación de estas clases se ilustra mejor con un ejemplo. Estos ejemplos son los mismos que los predeterminados, pero se pueden personalizar según sus necesidades.

Esto mostrará los íconos 4-up en pantallas grandes y anchas (>1024px), 3-up en pantallas de ancho medio (>640px) y 2-up en pantallas más estrechas:

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up' %}

Esto mostrará los íconos 8 en arriba en pantallas grandes y anchas (>1024 px), 5 en arriba en pantallas de ancho medio (>640 px) y 1 en arriba en pantallas más estrechas:

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-8up show-medium-5up show-small-1up' %}

Extras opcionales para iconos de categorías

Eliminar categorías vacías (aquellas que no tienen productos)

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-onlyifpc' %}

Eliminar categorías sin imágenes de colección personalizadas

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-onlyifimage' %}

Ocultar recuentos de productos que aparecen después de cada categoría, p. (42)

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-nopc' %}

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 %}