.zcs_variant_image {
        display: flex !important;
        align-items: center;
        padding: 5px !important;
        border-radius: 10px !important;
    }

    .zcs_variant_border {
        border: none !important;
    }

    .zcs_variant_image img {
        height: 45px;
        width: 45px;
        border-radius: 10px;
    }

    [data-zs-attribute-select] .theme-product-variant {
        flex-direction: column;
        margin-inline-end: 20px;
    }

    .tooltip {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        background: #000;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 10;
        margin-block-start: 10px;
    }

    .tooltip-label:hover+.tooltip {
        visibility: visible;
        opacity: 1;
    }

    [data-zs-attribute-select] [data-theme-color-label]{
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
}

/* 1) Top-align every row (instead of centering) */
div.zpcontainer .zprow {
  display: flex !important;
  align-items: flex-start !important;
}

/* 2) Kill all inline min-heights on columns */
div.zpdefault-section-bg[style*="min-height"] {
  min-height: 0 !important;
  height: auto   !important;
}

-----------------------------------------------------------------------------------------------------

<script>
// Create a root folder named "ProductVariantFolder".
// Inside it, create subfolders for each attribute name (e.g., "Size", "Color").
// Place image files inside the corresponding subfolder based on the attribute value.
// Name each image file exactly as the attribute value (e.g., "Red", "Large") without including the file extension in your code logic.
/*
Folder Structure:

ProductVariantFolder/
├── Color/
│ ├── Red
│ ├── Blue
│ └── Green
├── Size/
│ ├── Small
│ ├── Medium
│ └── Large
*/

let userData = {
attributeNames :['Material', 'Color'], // Add more attribute names as needed
folderName :"ProductVariantFolder"//give the folder name for variant
}

function addVariantImages() {
userData.attributeNames.forEach(attributeName => {
let variantContainer = document.querySelector(`[data-zs-product-variant-container="${attributeName}"]`);
if (variantContainer) {
let variantElements = variantContainer.querySelectorAll('span.theme-product-variant,span.theme-product-color');
variantElements.forEach(variantElement => {
addImageToVariant(variantElement, attributeName);
});
}
});
}

function addImageToVariant(variantElement, attributeName) {
let labelElement = variantElement.querySelector('label');
labelElement.classList.add('zcs_variant_image', 'zcs_variant_border');
let variantImage = createVariantImage(variantElement, attributeName);
removeTextNodes(labelElement);
labelElement.appendChild(variantImage);
}

function createVariantImage(variantElement, attributeName) {
let variantImage = document.createElement('img');
let variantOption = variantElement.querySelector('[data-zs-attribute-option]').getAttribute('data-text');
variantImage.src = `/${userData.folderName}/${attributeName}/${variantOption}`;
return variantImage;
}

function removeTextNodes(labelElement) {
Array.from(labelElement.childNodes).forEach(childNode => {
if (childNode.nodeType === Node.TEXT_NODE) {
labelElement.removeChild(childNode);
}
});
}

function attributeSelection() {
function handleClick() {
if (this.classList.contains('chekedLabel')) {
this.classList.remove('zcs_variant_border');
} else {
this.classList.add('zcs_variant_border');
}
var uncheckedElements = document.querySelectorAll('[data-theme-variant-label]:not(.chekedLabel)');
uncheckedElements.forEach(function (element) {
element.classList.add('zcs_variant_border');
});
}

var elements = document.querySelectorAll('[data-theme-variant-label]');

elements.forEach(function (element) {
element.addEventListener('click', handleClick);
});
}

function displayAttributeText() {
userData.attributeNames.forEach(attributeName => {
let variantContainer = document.querySelector(`[data-zs-product-variant-container="${attributeName}"]`);
if (variantContainer) {
let attributeLabels = variantContainer.querySelectorAll('[data-theme-variant-label]');
attributeLabels.forEach(label => {
let toolTip = createToolTip(label);
label.classList.add('tooltip-label');
});
}
});
}

function createToolTip(label) {
let toolTip = document.createElement('div');
let attributeName = label.querySelector('[data-zs-attribute-option]');
let text = attributeName.getAttribute('data-text');
toolTip.textContent = `${text}`;
toolTip.classList.add('tooltip');
label.insertAdjacentElement("afterend", toolTip);
return toolTip;
}

function loadPage() {
if (zs_view === "product") {
addVariantImages();
attributeSelection();
displayAttributeText();
}
}

window.addEventListener('load', loadPage);
</script>