option name

const products = [...document.querySelectorAll('[data-pf-type="ProductBox"]')];
products.map(product =>  {
    const listColors = product.querySelectorAll('[data-swatch-type="color"] > div');
    listColors.forEach(option => {
        const input = option.querySelector('input');
        const optionLabel = product.querySelector('[data-pf-type="OptionLabel"]');
        if (input.checked) {
            optionLabel.innerHTML += `<span class="option-name">: ${input.value}</span>`;
        }
        input.addEventListener('change', () => {
            const optionName = product.querySelector('.option-name');
            optionName.innerHTML = `: ${input.value}`;
        });
    });
})