<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://www.uncomplicated.biz/feed.xml" rel="self" type="application/atom+xml" /><link href="https://www.uncomplicated.biz/" rel="alternate" type="text/html" /><updated>2026-03-24T07:39:09+00:00</updated><id>https://www.uncomplicated.biz/feed.xml</id><title type="html">Uncomplicated</title><subtitle>Uncomplicated apps</subtitle><author><name>Alex Stanhope</name></author><entry xml:lang="es"><title type="html">Productos individuales en múltiples colecciones.</title><link href="https://www.uncomplicated.biz/tech/2023/single-category-tree-with-multiple-sections.es/" rel="alternate" type="text/html" title="Productos individuales en múltiples colecciones." /><published>2023-12-12T00:00:00+00:00</published><updated>2023-12-12T00:00:00+00:00</updated><id>https://www.uncomplicated.biz/tech/2023/single-category-tree-with-multiple-sections.es</id><content type="html" xml:base="https://www.uncomplicated.biz/tech/2023/single-category-tree-with-multiple-sections.es/"><![CDATA[<p>Si tiene un sitio donde desea dos árboles de categorías, diga “Comprar por marca” y “Comprar por pieza”, entonces Shopify no proporciona una manera fácil de hacerlo.
Sin embargo, existen algunas opciones.  Esta publicación analiza cómo podemos aprovechar la situación al máximo.</p>

<h3 id="jerarquía-de-categoría-única">Jerarquía de categoría única</h3>

<p>Puede tener una sección del árbol (considérelo como un menú con submenús) que sea “Comprar por marca”.</p>

<ul>
  <li>Esquivar
    <ul>
      <li>Esquivar dakota
        <ul>
          <li>Luces antiniebla Dodge Dakota</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>y un segundo que es “Comprar por pieza”</p>

<ul>
  <li>Luces antiniebla
    <ul>
      <li>Luces antiniebla fabricadas por Dodge
        <ul>
          <li>Luces antiniebla para un Dodge Dakota</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>Tenga en cuenta que estos nombres de colecciones y elementos de menú son únicos.  Shopify no soporta bien los duplicados.  Este vídeo explica por qué:</p>

<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">

  <iframe src="https://www.youtube-nocookie.com/embed/uGDBNgAMifU" frameborder="0" allowfullscreen=""></iframe>

</div>

<h3 id="producto-único">Producto único</h3>

<p>Ahora tienes un nuevo problema.  Puedes tener lo que quieras (un solo producto), pero ese producto aparece en dos colecciones.  La mayoría de los temas de Shopify utilizan URL cortas como esta:</p>

<p><a href="https://uncomplicated.myshopify.com/products/photography-lighting-equipment-sb-n7">https://uncomplicated.myshopify.com/products/photography-lighting-equipment-sb-n7</a></p>

<p>lo que significa que si tienes un solo producto en varias colecciones, ambos llegan a la misma página… lo que significa la misma ruta de navegación, independientemente de cómo hayas llegado allí.</p>

<h3 id="corrección-de-enlace-corto">Corrección de enlace corto</h3>

<p>La mejor solución son los temas que crean URL de formato largo.  Ya no hay muchos ni ninguno de ellos, así que hice una solución en mi aplicación.</p>

<p>En la página de su colección, active “Corrección de enlace corto” en la configuración de la ruta de navegación.  Cambiará dinámicamente los enlaces <code class="language-plaintext highlighter-rouge">/products/product-name</code> por enlaces largos <code class="language-plaintext highlighter-rouge">/collections/collection-name/products/product-name</code>.  Eso significa que cuando un usuario está en una colección y hace clic en un producto allí, accede a una URL que muestra de qué colección proviene.  Lo mejor de todo es que, como se agrega en javascript, no afecta la etiqueta de enlace canónico en la página de destino (producto), como puede ver <a href="https://uncomplicated.myshopify.com/products/photography-lighting-equipment-sb-n7">aquí en mi sitio de demostración</a>.</p>

<p>Para ser claros, todos estos enlaces (largos y cortos) ya existen en Shopify.  Mi solución de enlace corto simplemente dirige los productos de su colección a los de formato largo.</p>

<p>Hay más información en la <a href="https://www.uncomplicated.biz/es/help-by-app/breadcrumbs/help/">Ayuda</a>.</p>

<p>En particular, este screencast lo explica:</p>

<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">

  <iframe src="https://www.youtube-nocookie.com/embed/0WW44vj_pvY" frameborder="0" allowfullscreen=""></iframe>

</div>

<h3 id="seo">SEO</h3>

<p>Se comparte mucha información sin sentido o parcialmente cierta sobre SEO, pero podemos superar eso.  Simplemente evite hacer cosas que Google odia (como el mismo contenido en diferentes URL sin una etiqueta de enlace canónica).</p>

<p>Incluya también JSON-LD, que son metadatos que Google lee para comprender cómo encaja un producto en una jerarquía de categorías.  Mi aplicación tiene una opción, habilitada de forma predeterminada, para agregar esto también a cada página de producto y colección:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {"@type": "ListItem", "position": 1, "item": {"@id":"/collections/photography","name":"Photography"}},
        {"@type": "ListItem", "position": 2, "item": {"@id":"/collections/photography-lighting-equipment","name":"Lighting equipment"}}
    ]
}
</code></pre></div></div>

<p>No es perfecto, pero es lo mejor que podemos hacer con Shopify.</p>

<h3 id="mezclas-de-url-de-formato-corto-y-largo">Mezclas de URL de formato corto y largo</h3>

<p>Como digo, estas URL de formato largo y corto simplemente existen en Shopify, es tu elección (o la elección de tu tema) a cuáles vinculas.</p>

<p>Todavía existe una situación en la que estás utilizando URL de formato largo, ya sea creadas por tu tema o por la solución de enlace corto, y un usuario llega a una URL de formato corto.
Por ejemplo, la búsqueda de Shopify crea URL de formato corto.</p>

<p>La buena noticia es que todavía tienes cierto control sobre qué ruta de navegación se muestra de forma predeterminada.</p>

<h3 id="selección-de-ruta-de-navegación-predeterminada">Selección de ruta de navegación predeterminada</h3>

<p>El menú desplegable “Desambiguación de ruta de navegación en páginas de productos” le permite elegir, para productos en varias colecciones, qué ruta de navegación muestra.</p>

<p>Para la mayoría de los sitios, “Más específico (colección más pequeña)” es la mejor opción.  Esto significa que cuando alguien llega a una página URL de formato corto para un producto en varias colecciones, elige la colección con la menor cantidad de productos.
Esta es generalmente la colección más específica, es decir, la que mejor se adapta a este producto, normalmente una categoría de hojas en el árbol:</p>

<ul>
  <li>Esquivar
    <ul>
      <li>Esquivar dakota
        <ul>
          <li>Luces antiniebla Dodge Dakota (&lt;– más específicas)</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>Esto supone que has colocado las “Faros antiniebla Dodge Dakota” en todas las categorías de hojas y también en todos los padres:</p>

<ul>
  <li>Esquivar (&lt;– categoría de abuelos)</li>
  <li>Dodge Dakota (&lt;– categoría principal)</li>
  <li>Luces antiniebla Dodge Dakota (&lt;– categoría de hoja)</li>
</ul>

<h3 id="cambiando-el-valor-predeterminado">Cambiando el valor predeterminado</h3>

<p>La colección más específica probablemente será adecuada para más del 95 % de tus productos, pero sé que siempre hay algunos productos especiales en los que deseas cambiarla.  ¡Afortunadamente, puedes!</p>

<p>Este video explica cómo configurar la “Referencia de colección predeterminada” para cualquier producto:</p>

<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">

  <iframe src="https://www.youtube-nocookie.com/embed/AAj5MbF-BuU" frameborder="0" allowfullscreen=""></iframe>

</div>

<h3 id="resumen">Resumen</h3>

<p>Todas estas herramientas ofrecen formas de controlar la experiencia de su usuario cuando compra en su tienda.</p>

<p>Fundamentalmente, para los sitios bien indexados por Google, una cantidad sustancial de clientes llegan a la página de un producto.
Con estas herramientas, puede crear una ruta de navegación significativa basada en categorías que ayude a guiar a los clientes a ver las colecciones principales; con suerte, contendrán los productos que desean comprar.
¡Mucha suerte con tu tienda!</p>]]></content><author><name>Alex Stanhope</name></author><category term="products" /><category term="breadcrumbs" /><category term="front" /><summary type="html"><![CDATA[Si tiene diferentes tipos de navegación o rutas por las cuales un cliente puede llegar a un producto, aún puede tener diferentes rutas de navegación.]]></summary></entry><entry xml:lang="en"><title type="html">Single products in multiple collections</title><link href="https://www.uncomplicated.biz/tech/2023/single-category-tree-with-multiple-sections/" rel="alternate" type="text/html" title="Single products in multiple collections" /><published>2023-12-12T00:00:00+00:00</published><updated>2023-12-12T00:00:00+00:00</updated><id>https://www.uncomplicated.biz/tech/2023/single-category-tree-with-multiple-sections</id><content type="html" xml:base="https://www.uncomplicated.biz/tech/2023/single-category-tree-with-multiple-sections/"><![CDATA[<p>If you have a site where you want two category trees, say “Shop by Brand” and “Shop by Part”, then Shopify doesn’t provide an easy way to do that.
However, there are some options.  This post discusses how we can make the best of the situation.</p>

<h3 id="single-category-hierarchy">Single category hierarchy</h3>

<p>You can have one section of the tree (think of it as one menu with submenus) that is “Shop by Brand”</p>

<ul>
  <li>Dodge
    <ul>
      <li>Dodge Dakota
        <ul>
          <li>Dodge Dakota Fog Lights</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>and a second which is “Shop by Part”</p>

<ul>
  <li>Fog Lights
    <ul>
      <li>Fog Lights made by Dodge
        <ul>
          <li>Fog Lights for a Dodge Dakota</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>Note that these collection names and menu items are unique.  Shopify doesn’t cope well with duplicates.  This video explains why:</p>

<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">

  <iframe src="https://www.youtube-nocookie.com/embed/uGDBNgAMifU" frameborder="0" allowfullscreen=""></iframe>

</div>

<h3 id="single-product">Single product</h3>

<p>Now you have a new problem.  You can have what you want (a single product), but that product is appearing in two collections.  Most Shopify themes use short-form URLs like this:</p>

<p><a href="https://uncomplicated.myshopify.com/products/photography-lighting-equipment-sb-n7">https://uncomplicated.myshopify.com/products/photography-lighting-equipment-sb-n7</a></p>

<p>which means that if you have a single product in multiple collections, they both come to the same page… which means the same breadcrumb, irrespective of how you got there.</p>

<h3 id="short-link-fix">Short-link fix</h3>

<p>The best solution is themes that create long-form URLs.  There aren’t many/any of them any more, so I’ve made a fix in my app.</p>

<p>On your collection page, turn on “Short-link fix” in the settings of the breadcrumb.  It will dynamically change out the /products/product-name links for long-form /collections/collection-name/products/product-name links.  That means that when a user is in a collection and they click on a product there, they get to a URL that shows what collection they came from.  Best of all, because it’s added in javascript, it doesn’t affect the canonical link tag on the target (product) page, as you can see <a href="https://uncomplicated.myshopify.com/products/photography-lighting-equipment-sb-n7">here on my demo site</a>.</p>

<p>To be clear, all these links (long-form and short-form) exist already in Shopify.  My short-link fix just points your collections products at the long-form ones.</p>

<p>There’s more information in the <a href="https://www.uncomplicated.biz/help-by-app/breadcrumbs/help/">Help</a>.</p>

<p>Particularly, this screencast explains it:</p>

<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">

  <iframe src="https://www.youtube-nocookie.com/embed/0WW44vj_pvY" frameborder="0" allowfullscreen=""></iframe>

</div>

<h3 id="seo">SEO</h3>

<p>There’s so much nonsense or part-true information shared about SEO, but we can cut through that.  Just avoid doing things that Google hates (like the same content on different URLs without a canonical link tag).</p>

<p>Also include JSON-LD, which is metadata that Google reads to understand how a product fits into a category hierarchy.  My app has an option, enabled by default, to add this too to every product and collection page:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {"@type": "ListItem", "position": 1, "item": {"@id":"/collections/photography","name":"Photography"}},
        {"@type": "ListItem", "position": 2, "item": {"@id":"/collections/photography-lighting-equipment","name":"Lighting equipment"}}
    ]
} 
</code></pre></div></div>

<p>It’s not perfect, but it’s the best we can do with Shopify.</p>

<h3 id="mixtures-of-short-form-and-long-form-urls">Mixtures of short-form and long-form URLs</h3>

<p>As I say, these long-form and short-form URLs all just exist in Shopify, it’s your choice (or your theme’s choice) which ones you link to.</p>

<p>There is still a situation where you’re using long-form URLs, either created by your theme or by the short-link fix, and a user lands on a short-form URL.
For example, Shopify search creates short-form URLs.</p>

<p>The good news is that you still have some control over which breadcrumb shows by default.</p>

<h3 id="default-breadcrumb-selection">Default breadcrumb selection</h3>

<p>The <code class="language-plaintext highlighter-rouge">Breadcrumb disambiguation on product pages</code> drop-down allows you to choose, for products in multiple collections, which breadcrumb shows.</p>

<p>For most sites, <code class="language-plaintext highlighter-rouge">Most specific (smallest collection)</code> is the best option.  This means that when someone arrives on a short-form URL page for a product in multiple collections, it chooses the collection with the fewest products.
This is generally the most specific collection, i.e. the one that’s the best match for this product, usually a leaf-category in the tree:</p>

<ul>
  <li>Dodge
    <ul>
      <li>Dodge Dakota
        <ul>
          <li>Dodge Dakota Fog Lights (&lt;– most specific)</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>This assumes that you’ve put the “Dodge Dakota Fog Lights” in all the leaf-category and also all the parents:</p>

<ul>
  <li>Dodge (&lt;– grandparent category)</li>
  <li>Dodge Dakota (&lt;– parent category)</li>
  <li>Dodge Dakota Fog Lights (&lt;– leaf category)</li>
</ul>

<h3 id="changing-the-default">Changing the default</h3>

<p>The most specific collection will probably be right for 95%+ of your products, but I know there are always some special products where you want to change it.  Thankfully, you can!</p>

<p>This video explains how to set the <code class="language-plaintext highlighter-rouge">Default Collection Reference</code> for any product:</p>

<!-- Courtesy of embedresponsively.com //-->
<div class="responsive-video-container">

  <iframe src="https://www.youtube-nocookie.com/embed/AAj5MbF-BuU" frameborder="0" allowfullscreen=""></iframe>

</div>

<h3 id="summary">Summary</h3>

<p>All these tools offer ways of controlling your user’s experience when they shop at your store.</p>

<p>Fundamentally, for sites well-index by Google, a substantial number of customers land on a product page.
Using these tools you can create a meaningful, category-based breadcrumb that helps guide those customers to see parent collections, they will hopefully contain the products they want to buy. 
Best of luck with your store!</p>]]></content><author><name>Alex Stanhope</name></author><category term="products" /><category term="breadcrumbs" /><category term="front" /><summary type="html"><![CDATA[If you have different types of navigation, or routes by which a customer might land on a product, then you can still have different breadcrumbs]]></summary></entry></feed>