CODEWITHSUNDEEP
javascriptjqueryhtmlshopify
s0rfi949
s0rfi949

Reputation: 387

Shopify | Making the default value for a product drop-down box say 'Pick an option' / 'Pick a Size'

I'm using the Grid Theme and trying to work through a customization that defaults to "Pick A Size" instead of "Small" in product.liquid. (Client is seeing too many incorrect "Small" orders from people ordering the default size).

Working through this:

https://docs.shopify.com/support/your-website/themes/how-to-add-a-pick-an-option-to-drop-downs

However, searching for new Shopify.OptionSelectors per the doc above has been fruitless -- can't find it anywhere in my theme files.

My hunch is that it is actually buried somewhere in option_selection.js which is a Shopify (server-side) asset and can't be directly edited.

Here's what I've got in product.liquid (for what it's worth):

<div class="product-options">
    <select class="product-variants" name="id" id="product-variants-{{ product.id }}">
        {% for variant in product.variants %}
        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% endfor %}
 </select>
</div>

and, not sure if this is connected, I also have:

<script>
  // required for splitting variants
  // see ProductView
  window.products["{{ product.id }}"] = {{ product | json }};
  FirstVariant["{{ product.id }}"] = {{ product.selected_or_first_available_variant.id | json }};
</script>

EDIT: Commenting out the <option> lines in the above code, and the size dropdown fires as is regardless of being commented out or not. This leads me to believe the issue is with {{ product.id }}

Upvotes: 0

Views: 3314

Answers (2)

s0rfi949
s0rfi949

Reputation: 387

Update:

Shopify official doc for this feature

Upvotes: 0

kegbuna
kegbuna

Reputation: 24

So you basically want to remove the default and force the user to pick a value? I would do something like this then:

<div class="product-options">
<select class="product-variants" name="id" id="product-variants-{{ product.id }}">
    <option selected="selected" disabled>Pick A Size</option>
    {% for variant in product.variants %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}

I also removed the if statement that includes the selected attribute if the product has the selected attribute or if it's the first available variant. These will not be needed if you want the default to always be "Pick An Option".

The disabled attribute I added to the first option is for the purpose of not allowing the user to select it again once they've opened up the select menu.

Upvotes: 1

Related Questions