How to add narrow by Vendor in Shopify to PDP

Hey,

use the steps below to have the vendor link inside PDP to lead to a collection page that shows only the selected brand

1. create a new collection in Shopify with all products and name it 'all vendors'

2. add a upsell & cross-sell snippet inside the PDP

3. include the below script (you may need to change the querySelectorAll values):

<script>
const BRAND_NARROW = "Vendor";

var isp_related_options = {
isp_related_callback: function() {

console.log("related_callback is running");


/* All-Vendors */
var aVendors = document.querySelectorAll('div.product-title span.vendor a[href][title]');
[].forEach.call(aVendors, function(a) {
var ispHref = a.getAttribute('href');
var v = (ispHref.match(/\?q\=(.*)/gi)[0]).replace(/\?q\=(.*)/gi, '$1');
var narrow = [[BRAND_NARROW,v]];

ispHref = ispHref.toLowerCase().replace(/\/vendors\?/gi,'/all-vendors?');
ispHref = ispHref.toLowerCase().replace(/\?q\=(.*)/gi, '');
ispHref += `?narrow=${JSON.stringify(narrow)}`;

console.log(ispHref);
a.setAttribute('href',ispHref);
});
} // Recommendations rendered
}
</script>