How can I display "SELECT SIZE" text n the variant picker?

How can I display "SELECT SIZE" text n the variant picker?

JordanMM
New Member
7 0 0

We’d like to add the option "Select Size" within the variant picker. Currently, the smallest size is automatically selected by default. However, we want "Select Size" to be shown in the variant picker, as shown in the example below, so customers can click on it and choose their desired size.

 

Theme: Dawn

 

What we currently have:

Screenshot 2024-09-25 at 5.24.35 pm.png

 

What we want:

 

Screenshot 2024-09-25 at 5.22.46 pm.png

Replies 2 (2)

Flair-Liam
Shopify Partner
15 1 2

Hi Jordan,

 

I’ve looked through the codebase in the Dawn theme, and it doesn’t seem like there’s a straightforward solution.

 

 

In the file dawn/snippets/product-variant-picker.liquid around line 69 we can change the select button to: 

 

 

            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              <!-- Add the placeholder "Select Size" -->
              <option value="" disabled selected>Select {{ option.name }}</option>

              {% render 'product-variant-options',
                product: product,
                option: option,
                block: block,
                picker_type: picker_type
              %}
            </select>

 

 

And it would appear like this 

Screenshot 2024-09-25 at 9.51.29 AM.png

 

However, we’d also need to update the logic (and potentially some JS) around which variant is selected first. This might require some development time to ensure the variants are handled correctly without auto-selecting the first option.

 

An alternative would be to create an extra, non-purchasable product variant to act as the “Select Size” option, though this may affect inventory management and isn’t an ideal long-term solution.

 

Let me know if you need any further clarification!

 

Kind regards, Liam

Shopify Theme Developer
Flairconsultancy.com
support@flairconsultancy.com
hyp3yourfeet
Visitor
2 0 0

Hello, I would like some support on creating the same for my variant picker. What code should I add to have the placeholder text “select size” included in my dropdown menu? 
Thanks in advance for your help!