我需要在单选按钮变体选择器上显示变体图像，但似乎无法找到如何正确拉出变体 img src Shopify

如何解决我需要在单选按钮变体选择器上显示变体图像，但似乎无法找到如何正确拉出变体 img src Shopify

所以我在 Shopify 产品模板（使用首次亮相主题）。我将默认的下拉变体选择器更改为单选按钮，效果很好。我希望单选按钮显示变体图像，这就是我被卡住的地方。 （这是我希望它起作用的测试产品的链接：TEST product link

这是单选按钮表单：

{% form 'product',product,class:form_classes %}


 

{% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <label style="font-weight: 700; font-size: 1.2em;"{% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                 ¡Escoge la versión que quieres!
                </label>
                {% assign option_position = forloop.index %}
                <fieldset class="botones-radio">
                  {%- for value in option.values -%}
                  <div class="imagen-mas-boton">
                     <input type="radio" class="single-option-selector-{{ section.id }} "
                        {% if option.selected_value == value %} checked="checked"{% endif %}
                        value="{{ value | escape }}"
                        data-index="option{{option_position}}"
                        name="{{ option.name | handleize }}"
                        id="SingleOptionSelector-{{option_position}}">
                       
                       
                       
                        <img src="{{ featured_image | img_url: '200x' }}" />
               
                   
                      <label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}">
                        {{value}} 
                      </label>
                  
                    </div>
                  {%- endfor -%}
                </fieldset>
              {% endfor %}
            {% endunless %}


            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                    {{ variant.title }}
                  </option>
                {% else %}
                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                {% endif %}
              {% endfor %}
            </select>

            {% if section.settings.show_quantity_selector %}
              <div class="product-form__item product-form__item--quantity">
                <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
              </div>
            {% endif %}
          <div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
              {% endif %}
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
               
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
                </button>
            </div>
          {% endform %}

现在，<img src="{{ featured_image | img_url: '200x' }}" /> 显然会显示特色图片，因此两个变体将显示相同的图像，并且在选择另一个变体并刷新页面时两者都会发生变化。

我想显示分配给每个变体的图像。我试过 <img src="{{ variant| img_url: '200x' }}" /> 和 <img src="{{ variant.image | img_url: '200x' }}" />

但它似乎不起作用。

我还想在标签上显示每个变体的价格，为此我尝试了以下操作：

<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}"> {{value}} {{current_variant.price | money }} </label>

但这将显示所选变体的价格，并且只会在刷新时发生变化。