How do I get the Name or other details of a Product to Change when an Attribute is selected?

when a user selects a product attribute, the price changes, but what if you want to change the product name or product code? answer step 1) html add an element at the end of the name we'll be targeting this by its id and we'll be changing its content later \<h1>{{this\['name']}} \<span id="selectedattribute">\</span>\</h1> step 2) liquid make sure the attributes are correctly outputted on the product detail page, then inside the \<option> element in the layout, add a data attribute containing the field you want to use to update the name {{option name}} {% unless option price == "0 00" %} ({{this price currency symbol}}{{option price}}) {% endunless %} for a reminder on how to output attribute layouts correctly, check out the doc here step 3) javascript add it to the wrapper liquid layout, or before the end of the \</body> tag \<script> function updatename() { var selectedattribute = document queryselector("\[data attribute control]") selectedindex; var attributeoptions = document queryselectorall("\[data attribute control] option"); var selectedattributename = attributeoptions\[selectedattribute] getattribute("data option name"); var newname = document queryselector("#selectedattribute"); newname textcontent = selectedattributename; } window\ addeventlistener('load', function() { updatename(); var selectedattribute = document queryselector("\[data attribute control]"); selectedattribute addeventlistener("change", updatename); }, false); \</script> solution when the attribute changes, or the page is loaded, the javascript finds the name of the currently selected attribute it changes the textcontent of our new \<span> element to have the value of the attribute's name