Size Variant Placeholder text

Store Design
, , , ,

Topic summary

Goal: change the product size variant dropdown so it shows a placeholder (“Select Size”) instead of defaulting to the first variant.

Context: The user looked in variant.picker.liquid and only found the dropdown wrapper and an icon-caret include. They shared a minimal code snippet and asked exactly what to change.

Attempts/Issues:

  • Tried a suggested solution, but it did not work.
  • Asked for a clearer, step-by-step explanation of what to do with the code.
  • Noted they did not attach the necessary script, implying a JavaScript change may be required.

What seems needed: Guidance on adding a non-selectable placeholder option to the select element and any required JavaScript to prevent auto-selecting the first variant and to enforce selection of a valid size.

Assets central to understanding: a small code snippet from variant.picker.liquid (dropdown markup and caret icon include).

Status: No resolution yet. The thread is awaiting specific code instructions and the missing script; key questions remain on where and how to implement the placeholder and JS behavior.

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

I’m trying to have the size variant placeholder to have text(“Select Size”) instead of first variant size. Must be a way to do so. Please help :slightly_smiling_face:

Thanks

2

I wish is was that simple!

1 Like
3

This? onyl thing as dropdown in variant.picker.liquid…


          
          

            
            {% render 'icon-caret' %}
4

Just let me know what i need to do with this code, please.

5

Unfortunately, it did not work.

1 Like
6

Can explain better, please. Thanks :slightly_smiling_face:

7

I didnt attach the script either