Home App Docs Blog Github

Is it possible to have a dynamic link of product's collection on the product page?

I would like to insert a link of the product’s collection on my product page so that customer can go back to the collection that the product belongs and continue browsing. Is it possible on Builder?

Hi @annaho,

A product can belong to multiple collections. Because of this, there is no way of knowing which collection to link back to when on a product page unless the customer is on a product page within a collection (like /collections/collection-handle/products/product-handle). If that is the case then you can display a link to the collection by using state.location to construct the link. To do so:

  1. Add a text block to your Builder product page.
  2. Open the data tab and select “+ new binding”.
  3. Choose get “text” from “state.location.path[1]”. This will display the name of the collection, in this case “winter”.
    Screen Shot 2021-11-19 at 8.26.29 AM

To add the link, add a new binding to get the Link URL from '/' + state.location.path.slice(0,2).join('/'). This will link to collections/collection-handle. Lastly, you’ll want to add a showIf binding of state.location.pathname.includes("/collections/"); so this text only shows if the URL contains /collections/.