Symmetry theme: Default selected Variation to be the last not the first

Bishoy_a_hanna
New Member
2 0 0

I'm new to Liquid, however I'm coming from a Frontend/Backend development background so I will understand if anyone suggested low level solution.

here is my store url
https://thevalleyofart.com.au/collections/all/products/sunset-canvas

you will notice that the default selected variation is the first one which is the smallest Canvas, while I want the pre-selected variation to be the latest one as its the biggest canvas 100x70 which makes the artwork clear to view.

 

I think the piece of code to be changed is around should be in that file featured-product.liquid but not sure where exactly. 

<div class="input-row">
            {% if product.variants.size > 1 %}

              <div class="option-selectors">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper styled-select {% if settings.swatch_enabled and option.name == settings.swatch_option_name %} swatches option--{{ settings.swatch_option_name | handle }}{% endif %}" {% if settings.variant_style == 'listed' %}data-make-box{% endif %}>
                    <label for="{{ section.id }}-SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select
                      id="{{ section.id }}-SingleOptionSelector-{{ forloop.index0 }}"
                      data-single-option-selector
                      data-index="option{{ option.position }}"
                      {% if settings.variant_style == 'listed' %}data-listed{% endif %}
                      {% if settings.swatch_enabled and option.name == settings.swatch_option_name %}data-colour-swatch="true"{% endif %}>
                      {% for value in option.values %}
                        <option
                          value="{{ value | escape }}"
                          {% if option.selected_value == value %}selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                    {% if settings.show_size_chart and option.name == settings.size_chart_variant %}
                      <div class="size-chart-container">
                        <a href="{{ pages[settings.size_chart_page].url }}" target="_blank" class="size-chart-link">
                          {{ 'products.product.size_chart' | t }}
                        </a>
                        <div class="size-chart-content hidden">
                          <div class="size-chart">
                            <div class="size-chart__inner user-content">
                              {{ pages[settings.size_chart_page].content }}
                            </div>
                          </div>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>

              <select name="id" class="original-selector" aria-label="{{ 'products.product.selector_label' | t | escape }}">
                {% for variant in product.variants %}
                  <option value="{{ variant.id }}"
                    {% if variant == current_variant %} selected="selected"{% endif %}
                    {% if section.settings.show_inventory_notice and variant.inventory_management == 'shopify' and variant.inventory_quantity > 0 %}
                      {% if section.settings.inventory_notice_threshold == 0 or variant.inventory_quantity <= section.settings.inventory_notice_threshold %}
                        data-inventory="{{ variant.inventory_quantity }}"
                      {% endif %}
                    {% endif %}
                    data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}">
                    {{- variant.title | escape -}}
                  </option>
                {% endfor %}
              </select>


            {% else %}
              <input type="hidden" name="id" value="{{ current_variant.id }}" />

              {% unless product.has_only_default_variant %}
                <div class="singleopt">
                  {% for option in product.options %}
                    {% assign opt_idx = 'option' | append: forloop.index %}
                    <label>{{ option }}: {{ product.variants.first[opt_idx] }}</label>

                    {% if settings.show_size_chart and option == settings.size_chart_variant %}
                      <div class="size-chart-container">
                        <a href="{{ pages[settings.size_chart_page].url }}" target="_blank" class="size-chart-link">
                          {{ 'products.product.size_chart' | t }}
                        </a>
                        <div class="size-chart-content hidden">
                          <div class="size-chart">
                            <div class="size-chart__inner user-content">
                              {{ pages[settings.size_chart_page].content }}
                            </div>
                          </div>
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}
                </div>
              {% endunless %}

            {% endif %}
          </div>

 

0 Likes