Dropdown swatch has to display the concerned text

Question

This image has the dropdown swatch with the color like blue, red ,etc inside it.

If its a text swatch then it displays as 16mp or 48mp based on the values clicked but here in drop down swatch I couldn't make it possible to display the color on place where i have the text "topp".

I have made few changes in configurable.js , configurable.php, wrapper.phtml and renderer.phtml but I couldn't get the desired output.

Note :

The color either as blue, red which is clicked on the drop down swatch has to be reflected in the place where I wrote the text as "topp".

Answer 1

you need to override swatch-renderer.js file in your theme

app/design/frontend/Vendor/Theme/Magento_Swatches/web/js/swatch-renderer.js

Download file from this link : Swatch Renderer

Note : run upgrade command and flush cache and check

Hope this will help you!