stevedigital

Here's the code I created for my site to use tags on product pages to selectively be used as breadcrumbs - I use the header code injection at the store level to add this code to the site: document.addEventListener('DOMContentLoaded', (event) => { try { let tags = Array.from(document.querySelector('.ProductItem').classList) .filter(clss => clss.startsWith('tag-')) .map(tag => tag.replace('tag-', '')); let newSpan = document.createElement('span'); newSpan.classList.add('ProductItem-nav-breadcrumb-separator'); let breadcrumbDiv = document.querySelector('.ProductItem-nav-breadcrumb'); const tagInfos = { 'eye-bee-m': { text: 'Eye Bee M', href: '/ideas/' }, 'chatgpt': { text: 'ChatGPT', href: '/ideas/' }, 'openai': { text: 'OpenAI', href: '/' }, 'tensorflow': { text: 'TensorFlow', href: '/ideas/' }, 'pytorch': { text: 'PyTorch', href: '/ideas/' } }; tags.forEach(tag => { let tagInfo = tagInfos[tag]; if (tagInfo) { let newLink = document.createElement('a'); newLink.textContent = tagInfo.text; newLink.href = tagInfo.href + tag; newLink.prepend(document.createTextNode(' ')); newLink.append(document.createTextNode(' ')); newLink.prepend(newSpan.cloneNode()); breadcrumbDiv.insertBefore(newLink, breadcrumbDiv.children[1]); } }); } catch(ex) { console.error(ex); } }); Hope this helps as you can modify it to do many other things with tags.