(Squarespace) How to add Metadata Category to Store Page

[tuanphan]

To add Metadata Category to Store Page, like this.

#1. First, use this code to Custom CSS

a.category-label {
    background-color: #fff;
    margin-left: 5px;
    margin-right: 5px;
    padding: 2px 10px;
    border-radius: 30px;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 10px;
}
.category-product-labels {
    margin-bottom: 10px;
}

#2. Next, use this code to Code Injection > Footer

<script>
window.addEventListener('DOMContentLoaded', async () => {
    const config = { isLink: true };
    
    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 productTitle = productItem.querySelector('.product-list-item-title');
            if (!productTitle) continue;
            
            const existingCategories = productItem.querySelector('.categories-product-labels');
            if (existingCategories) continue;
            
            const categoriesContainer = document.createElement('div');
            categoriesContainer.className = 'categories-product-labels';
            
            productJsonData.nestedCategories.itemCategories.forEach(category => {
                const categoryElement = document.createElement(config.isLink ? 'a' : 'div');
                categoryElement.className = 'category-label';
                categoryElement.setAttribute('data-category-name', category.displayName);
                categoryElement.setAttribute('data-category-slug', category.shortSlug);
                categoryElement.textContent = category.displayName;
                
                if (config.isLink) {
                    categoryElement.href = category.fullUrl;
                }
                
                categoriesContainer.appendChild(categoryElement);
            });
            
            productTitle.insertAdjacentElement('beforebegin', categoriesContainer);
            
        } catch (error) {
            console.log('Error fetching product data:', error);
        }
    }
});
</script>