how to change variant options name

Store Design
, , ,

Topic summary

Goal: Standardize all product variant option labels to “Size” across a catalog of 5,000+ products in a new webshop.

Attempted approach: Used custom CSS targeting the form label (legend.form__label), hiding the original text and injecting “Size” via the ::after pseudo-element. This visually achieved the desired result on the product page.

Issue: The theme/platform would not allow saving the custom CSS, preventing a permanent implementation. The user seeks a way to save/apply this change globally.

Notes: Two screenshots are attached (likely showing before/after of the label change).

Open questions / next steps:

  • How to reliably rename variant option labels at scale (ideally at the data level or via theme settings/translation) rather than CSS-only.
  • Why the CSS cannot be saved and how to resolve that limitation.

Status: Unresolved; assistance requested.

Summarized with AI on December 13. AI used: gpt-5.
1

Scherm_afbeelding 2024-11-25 om 14.38.12.jpg
Scherm_afbeelding 2024-11-25 om 14.38.12.jpg3024×1964 278 KB

Scherm_afbeelding 2024-11-25 om 14.55.31.jpg
Scherm_afbeelding 2024-11-25 om 14.55.31.jpg3024×1964 340 KB

i have more then 5000 products on my webshop and i am building a new one but most of the product variant option names are diffrent i want them all to be “size” i added a custom css and it worked but when i tried saving it it would not let me please help me find a solution.

legend.form__label {
position: relative;
visibility: hidden;
}

legend.form__label::after {
content: “Size”;
visibility: visible;
position: absolute;
top: 0;
left: 0;
}

this code made it how i wanted but it wouldnt let me save it