How to Set an auto select option in variants dropdown for product page in Parallax Theme
Hi there, I was looking for a solution for this one, its about the dropdown field for selecting the variant for the said product in the product' page. see this info ->
https://shopify.dev/tutorials/customize-theme-how-to-add-a-pick-an-option-to-drop-downs
I know it is possible to add it as well in the Parallax Theme, it is necessary to prevent a customer of selecting a wrong item(variant) or placing multiple order of the same variant, without noticing it. as of now. Shopify can offer this kind of feature for free on their free themes:
Is there similar issue in the past that could be used as a reference?
-
I found the location of the "select option" field under the product-form.liquid, however, I don't know the correct syntax of adding additional option like "Choose your variant" in the dropdown. heres the code below.
{% if product.options.size > 1 %}
<div class="select">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
<div class="select">
<label>{{ product.options[0] }}</label>
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% else %}
<input type="hidden" name="id" value="{{ variant.id }}" />
{% endif %}
Please sign in to leave a comment.
Comments
1 comment