How to Set an auto select option in variants dropdown for product page in Parallax Theme

Follow

Cakes by Sophie HK

• December 10, 2020 02:59

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:

• Boundless
• Debut
• Minimal
• Narrative
• Simple
• Supply
• Venture

It it is like a step by step guide on where they will place those free codes inside the theme liquid.

Is there similar issue in the past that could be used as a reference?

0

• 

  Cakes by Sophie HK

  • December 10, 2020 04:56

  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 %}

  0

  Comment actions Permalink
• 

  Charles Lu

  • July 07, 2021 00:33
  • Edited

  Hello!

  I was trying to solve the same issue for a client and was able to come up with a solution. I created a guide here!

  The implementation has been live on the site for around 1 week and so far no hiccups!

  If you need help with implementation feel free to reach out via email! pofobuilds@gmail.com

   

  Best,

  Charlie

  0

  Comment actions Permalink

Please sign in to leave a comment.