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.

<!-- Add data-option-name="{{}}" -->

<option value="{{}}" data-option-name="{{}}" data-attribute-price-control="{{option.price_raw}}">{{}} {% unless option.price == "0.00" %}({{this.price.currency_symbol}}{{option.price}}){% endunless %}</option>

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.

  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;
  function() {
    var selectedAttribute = document.querySelector("[data-attribute-control]");
    selectedAttribute.addEventListener("change", updateName);
  }, false);


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. 

Did this answer your question?