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!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024