Description: Add Category as Class in Store Page.
By default, Tag appears as Class in Store Page, but Category won’t appear.
Use this code to Code Injection > Footer (or Store Page Header Injection)
<script>window.addEventListener('DOMContentLoaded',async()=>{const bodyClasses=document.body.classList;if(!bodyClasses.contains('collection-type-products')||bodyClasses.contains('view-item'))return;const fetchJSON=async(path)=>{const queryParams='?format=json'+'&'+Date.now();const response=await fetch(path+queryParams);const jsonData=await response.json();return jsonData};const collectionJsonData=await fetchJSON(window.location.pathname);if(!collectionJsonData.items)return;const collectionUrl=collectionJsonData.collection.fullUrl;for(const item of collectionJsonData.items){try{const productJsonData=await fetchJSON(item.fullUrl);if(!productJsonData.item||!productJsonData.item.categoryIds||productJsonData.item.categoryIds.length===0)continue;if(!productJsonData.nestedCategories||!productJsonData.nestedCategories.itemCategories)continue;const productItem=document.querySelector(`[href="${item.fullUrl}"]`);if(!productItem)continue;const productListItem=productItem.closest('.product-list-item');if(!productListItem)continue;productJsonData.nestedCategories.itemCategories.forEach(category=>{const categorySlug=category.shortSlug||category.displayName.toLowerCase().replace(/\s+/g,'-');productListItem.classList.add(`category-${categorySlug}`)})}catch(error){console.log('Error fetching product data:',error)}}});</script>
Category will appears as Class.
