Show the label of a selected color swatch

In some case, you want to show the title of your color when selecting an option. You can make a quick fix by adding the below CSS to your Footer Script (Admin panel > Storefront > Footer Script)

<style>
    /* Show the label of a selected color swatch */
    [data-product-attribute="swatch"] {
        position: relative;
    }

    [data-product-attribute="swatch"] .form-option {
        position: static;
    }

    [data-product-attribute="swatch"] .form-option-expanded {
        left: auto;
        top: auto;
        margin-top: 25px;
        margin-left: 30px;
    }

    [data-product-attribute="swatch"] .form-radio:checked+.form-option .form-option-variant:after {
        content: attr(title);
        position: absolute;
        top: 0;
        right: 0;
    }
</style>