How can I add a back to collection button on my product page - Horizon

Hello, anyone has a suggestion on how to add a back to the parent collection, with its name (the collection the user came from) button to my product pages? I am using Horizon. This is to help with navigation.

Breadcrumb already handles a back to collection link

Hello, there is no built-in breadcrumb component in Horizon that I can see. What breadcrumb are you referring to?

Hi @fabiomalaspina

Do you want breadcrumbs like this, or do you only need a back button in the footer?

You can ask Sidekick for a breadcrumbs section…

However, since product can belong to several collections, it’s often difficult to tell in liquid which collection visitor should return to.
But one can simply use something like this (in a “Custom liquid” block):

<button onclick="history.back()" class="button button-secondary">Back</button>

This is the same as clicking the “Back” button in your browser and will get visitor to where they were before entering product page.

Hi @fabiomalaspina

You’ll need a more advanced solution here. A product can belong to multiple collections, so a simple “Back” button isn’t reliable. For example, if a user lands on a product page from the homepage, showing “Back to Collection” and redirecting them to an unrelated page would be confusing and create a poor user experience.

A better approach is to use custom JavaScript to track the last visited collection page. You can store this information in a cookie or local storage when the user browses a collection. Then, on the product page, validate whether the product belongs to that recorded collection. If it does, display a “Back to Collection” link pointing to that collection. This ensures the navigation is accurate and context-aware.

So, you’ll need a custom Liquid and JavaScript solution to implement this properly.

Hello @fabiomalaspina

Yes, use breadcrumbs or grab the collection handle from the product URL referrer. On product pages in Horizon, we have a custom liquid tag that checks whether or not we’re in a collection context and if so, displays back to collection name linking to that collection. If you’re browsing outside of a collection, back to shop main page.