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

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.

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

<option value="{{option.id}}" data-option-name="{{option.name}}" data-attribute-price-control="{{option.price_raw}}">{{option.name}} {% 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: http://help.siteglide.com/en/articles/3499462-product-attribute-layouts

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.