The breadcrumb navigation is a small string of text navigation that appears near the top of your site in order to show the path taken to get to a product or page. You might notice that when you visit some product pages, the name of the collection the product is in does not appear in this menu, while other times it does. This article explains why this happens.
Let's take a look at an example. Please visit this Deluxe Grill Toolset product on our CookTime demo for ShowTime. You'll notice that the breadcrumb navigation includes a link to the Barbecue collection as shown below.
Everything is great with that link. But now, try visiting this same product through this link instead. It goes to the same product, but the breadcrumb navigation does not include the link to the Barbecue collection.
Why is this? The answer lies in the pathway the user took to get to the product. You'll also notice that the two links are slightly different.
The first link is:
https://cooktime.myshopify.com/collections/barbecue/products/deluxe-grill-toolset
The second link is:
https://cooktime.myshopify.com/products/deluxe-grill-toolset
Both links go to the same product, but you'll notice that the first link contains the name of the collection as part of the URL. The second link does not. That is because the first link is "collection aware."
The concept of products being "collection aware"
There are several different ways a user can land on a product page on your site. Maybe they clicked on the product in a "featured products" section on your home page. Maybe they clicked to a collection page and found the product in the grid. Or maybe they found a direct link from a search engine or from elsewhere on your site. Depending on how the user got to the product page determines if that product is "collection aware." When you click to the product from a collection page first, the product URL includes the name of the collection and that product is collection aware. That means that Shopify knows what collection is associated with that product and it can display it accordingly in the breadcrumb. If you clicked to the product directly from a search engine, it might not contain that collection name as part of the URL. In this case, Shopify is not aware of which collection it's in and does not display the name of the collection.
You might ask why Shopify cannot simply determine which collection the product is in and display it automatically, but often, products are in multiple collections. The breadcrumb navigation is designed to provide a simple method for going back to the last page you visited within the site, and in cases where a direct link is clicked, there is no "breadcrumb" to follow.
Is there anything I can do to always show a collection link in the breadcrumb?
The easiest way to make sure that the breadcrumb shows the navigation link as often as possible is to make sure the URL contains the collection name as in the example above. So if you are linking to products in areas like product descriptions, pages, blog posts, etc., be sure to get the URL by clicking through to the collection page that contains the product, and then clicking on the product from within this collection page. This will generate the URL you need and you can copy it that way. Unfortunately, there's not really a way to make sure this always happens in links that come from external sources (such as Google or third-party sites).
I hope this helps explain the concept a bit and helps you understand how the breadcrumbs work.
Comments
0 comments
Article is closed for comments.