I would like to keep everything only change the blue highlight part name. please see screenshot below. want change COLOR to OPTION.
Thanks
password: 666
A user wants to rename the product variant label from “COLOR” to “OPTION” on their Shopify store’s product page.
Two solutions were proposed:
CSS/JavaScript approach (BSS-Commerce): Add custom code to the theme.liquid file that uses JavaScript to replace the text “COLOR” with “OPTION” in the variant selector heading. Steps include accessing Shopify admin → Online Store → Themes → Edit code, then inserting the provided script.
Direct variant editing (magenest): Simply edit the variant name directly in Shopify’s product settings, which appears to be a simpler administrative solution without requiring code modifications.
Both responses included screenshots demonstrating their respective methods. The discussion remains open as the original poster has not confirmed which solution they implemented or whether either approach resolved their issue.
I would like to keep everything only change the blue highlight part name. please see screenshot below. want change COLOR to OPTION.
Thanks
password: 666
Hi @X-DREAM ,
Please follow these steps:
Code to add:
document.querySelector('h5[class*="product-variant-selector-item-heading"]').innerText = document.querySelector('h5[class*="product-variant-selector-item-heading"]').innerText.replace("COLOR", "OPTION")
This is the result:
Hope it helps @X-DREAM
Hey there @X-DREAM ,
According to your question, you just need to change the name of the Variants, please refer to the image below.
Let us know if it works.