All things Shopify and commerce
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:
What we want:
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
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
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!
Hi @JordanMM,
Hope you're okay. Did this resolve your issue. If so could you accept the solution to close the thread?
Kind regards, Liam
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025