Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

How To Add A Link Towards The First Collection That Contains A Product

Sometimes, if you take enough turns, you forget the way back. That’s true for both exploring nature and exploring websites. The best bet to find your way back is the good old fashioned method of a string that you can follow all the way back, OR the old breadcrumbs on the ground method. Shopify is actually kind enough to give us a variation on breadcrumbs when you are exploring collections and products.

Some Shopify themes offer breadcrumbs navigation as a way to have easy access to the collections when you are on a product page. So you can see the steps you took to get there and easily navigate back to a bigger collection when you need to. This is usually used on addresses like:

https://shop-name.com/collections/collection-name/products/product-name

And where the Breadcrumb menu looks something like: 

Home > Collection Name > Product Name

So what happens when you wind up on a product page, either through a promo or perhaps a specific google search where you land directly on the product, with the following URL

https://shop-name.com/products/product-name 

Considering that Shopify opens the same content as what appears in the URL, the Breadcrumb menu might look like this:

Home > Product Name

If you want to open a collection where this product lives, you simply can’t. The breadcrumbs trail essentially just tells you, “you walked into the tunnel, and you found this room, everything in between is blur.” That’s not particularly useful to you, or usable to the user. They should always be able to find the collection where a product lives so they can explore other similar products.

A good way to fix this issue  is to insert a link towards the first collection where this product is found on the page, above the product’s title. In fact, Shopify provides the name of this collection if you use {{ product.collections[0].title }}. In a similar manner you can get the collection’s URL. 

Based on what you need, you can even check if the first collection found is the one that stores all the products in the shop and ignore this result if you want to have another (a more specific) collection link above the product’s title. This allows you to actually control which collection to send the user to no matter where they land… so that they don’t just get stuck in the tunnel forever with no way out.

Who ever thought that controlling your breadcrumbs could lead to more conversions on similar products? 

I did.

Ionut Radu Pastiu
Web Developer
Shopify is not just an online store, it is the future of commerce, and I have a doctorate in this field of study. I can slice and dice, mix and match, or come up with a completely new way to make your Shopify page exactly what you want it to be. I’m fluent in Javascript, jQuery, and Liquid when building the foundation, which I decorate with a combination of CSS and SCSS. You can dream it, I can build, they will shop... trust me.
close[x]

Get A Quote

To speak with a representative, you may reach the Sales department at (844) 326-0065.

Otherwise, please fill out the quote form to the best of your knowledge. Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields