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

4min
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. 
HTML
|
<!-- 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>
<!-- 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﻿
Step 3) JavaScript - Add it to the wrapper.liquid Layout, or before the end of the </body> tag.
JS
|
<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>
<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>
﻿
SolutionWhen 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. 
Updated 03 Mar 2023
Did this page help you?
Yes
FAQ - eCommerce
How to style the Card Fields in any Payment Form using the Stripe Payment Gateway?
Docs powered by archbee
TABLE OF CONTENTS
Answer
Solution