Clover Top

Please refer to our size guide to see what size is right for you! Keep in mind, sizes between brands are likely to vary, so please use the measurements as a guide only.

View Size Guide

📏 Size Guide // SFCC Frontend Integration Script // Place this in a content asset or include in your site's global JS. document.addEventListener('DOMContentLoaded', function() { // Mapping of your SFCC category IDs to your SizeGuidePro guide IDs. // This should be dynamically generated or managed in Business Manager. const categoryToGuideMap = { 'womens-clothing-tops': 'GUIDE_ID_FOR_WOMENS_TOPS', 'womens-shoes': 'GUIDE_ID_FOR_WOMENS_SHOES', 'mens-clothing-shirts': 'GUIDE_ID_FOR_MENS_SHIRTS', // Add all your mappings here... }; // Get the product's category ID. This is a placeholder. // You must replace this with the actual way to get the category ID on your PDP. // e.g., from a data attribute on a DOM element or a JavaScript variable. const productCategoryId = window.product?.primaryCategory || document.body.dataset.primaryCategory; if (!productCategoryId) { console.log('SizeGuidePro: Product category ID not found.'); return; } // Find the matching size guide ID. const sizeGuideId = categoryToGuideMap[productCategoryId]; if (sizeGuideId) { // Find the placeholder where the button should be injected. const buttonPlaceholder = document.querySelector('.product-size-guide-placeholder'); if (buttonPlaceholder) { // Create the button. const sizeGuideButton = document.createElement('button'); sizeGuideButton.innerText = '📏 Size Guide'; sizeGuideButton.className = 'size-guide-btn'; // Use classes from your CSS sizeGuideButton.onclick = function() { // This function should open your modal. // Assumes you have a global function `openSizeGuideModal(guideId)`. openSizeGuide(sizeGuideId); // Changed to openSizeGuide as per existing JS }; // Add the button to the page. buttonPlaceholder.appendChild(sizeGuideButton); } } }); // Example of what your HTML placeholder could look like on the PDP: //