我需要帮助来为使用 Launch 主题的商店创建色样。我可以用每个产品变体的单选按钮替换下拉列表。但是，该页面不会根据所选按钮更新产品 sku、id 等。
在主题文件的片段部分有一个名为“product-main.liquid”的文件，它指向另一个名为“product-options-dropdown.liquid”的片段文件：
文件“product-main.liquid”很长。如果有帮助，我可以向您展示指向“product-options-dropdown.liquid”的部分代码：
{% unless onboarding %}
{% capture product_form_id %}product-form-{{ form_id }}{% endcapture %}
{% capture product_form_class %}
product-form
{% if selectedVariant.available == false %}product-form-outofstock{% endif %}
{% if show_spb %}product-form-has-spb{% endif %}
{% endcapture %}
{%
form 'product', product,
id: product_form_id,
class: product_form_class,
data-product-form: form_id
%}
<div class="clearfix product-form-nav">
{% if product.variants.size > 1 %}
<div class="product-options">
{% include 'product-options-dropdown' %}
<div class="selector-wrapper no-js-required">
<select
class="product-select"
name="id"
id="product-select-{{ form_id }}">
{% for variant in product.variants %}
{%- capture option_content -%}
{%- if variant.available -%}
{{ variant.title }} - {{ variant.price | money }}
{%- else -%}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{%- endif -%}
{%- endcapture -%}
<option
{% if variant.id == selectedVariant.id %}selected="selected"{% endif %}
data-variant-id="{{ variant.id }}"
{% if variant.available %}
data-sku="{{ variant.sku }}"
value="{{ variant.id }}"
{% else %}
disabled="disabled"
{% endif %}>
{{ option_content | strip_newlines }}
</option>
{% endfor %}
</select>
</div>
</div>
{% else %}
<input
class="product-select"
name="id"
value="{{ product.variants[0].id }}"
type="hidden"
data-variant-title="{{ product.variants[0].title }}" />
{% endif %}
这就是“product-options-dropdown.liquid”的样子。它没有那么长，所以这里是整个代码：
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
{% assign option_index = forloop.index0 %}
{%- capture option_id -%}
single-option-{{ form_id }}-{{ option_index }}
{%- endcapture -%}
<div class="selector-wrapper js-required">
<div class="select-wrapper">
<label
class="selected-text"
for="{{ option_id }}"
data-select-text>
{{ option.name }}:
</label>
<span class="selected-option" data-selected-option aria-hidden="true">{{ option.values | first }}</span>
<select
class="single-option-selector"
id="{{ option_id }}"
data-option-select="{{ form_id }}"
data-option-index="{{ option_index }}">
{% for value in option.values %}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
</div>
</div>
{% endfor %}
{% endunless %}
我想如果我使用这个文件作为模板，我可以为单选按钮创建一个类似的文件，而不是下拉列表。我还需要让“product-main.liquid”指向这个新文件。所以我去创建了“color-swatch.liquid”：
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
{% assign option_index = forloop.index0 %}
{%- capture option_id -%}
single-option-{{ forloop.index }}-{{ option_index }}
{%- endcapture -%}
<div class="selector-wrapper js-required">
{%if option.name == "Color"%}
<label>
{{ option.name }}
</label>
<div class="variant-swatches">
{% for value in option.values %}
<input
class="single-option-selector"
type="radio"
name="color"
id="color-{{ forloop.index }}"
data-option-index="{{ option_index }}"
value="{{ value | escape }}"
{% if option.selected_value == value %}checked{% endif %}/>
<label for="color-{{ forloop.index }}">
{{ value }}
</label>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
{% endunless %}
现在我处于选择一个选项不会相应地更新变体的地步。如果有人能告诉我哪里出错并帮助我解决这个问题，将不胜感激！提前致谢！