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

Document image

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

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

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.