Product Name Testing
Product name tests consists of two parts:
- Frontend changes using vanilla JS — update product names across HP, Recommendations, PLP, PDP, etc.
- Cart/checkout changes — possible only on Shopify Plus via a Shopify function (cart-transformer).
If you are on Shopify Plus, our team can install the cart-transformer function, let us know, and we’ll deploy it.
Changing the name with javascript:
As an example, to change a fictional product name from: “The Original Product” to “The Best Product” we will start by defining variables so it will be easy to change the name:
const FROM = "The original product"; |
Then we will define a function that will make the actual change of the name, this is a naive one and you can switch it to work on your custom logic:
function replaceTextNodes(src, replacement) { |
And we will listen for changes in the DOM with debounce:
function listenForChanges() { |
And finally call both of the function on boot:
function boot() { |
Changing the name on cart/checkout with Shopify function:
The 2nd part is to change the name on cart/checkout changes, to do that we need the cart-transformer function. We can control the cart-transformer using a cart-attribute property that contains the configuration:
First we will define three helper methods:
function updateProperty(attr) { |
And the function that will maintain this cart attribute:
function maintainCartAttr() { |
And update the boot function from last step to call to this method as well:
function boot() { |
To complete the test we recommend to create a clean variant that will run on 100% whenever the test is ended with the following code:
function updateProperty(attr) { |
This will ensure that carts that already have the rename property will be cleanup and won’t affect next tests