我需要帮助为使用Launch主题的商店创建颜色样例。我可以用每个产品变体的单选按钮替换下拉列表。但是，页面不会根据所选按钮更新产品sku、id等。
在主题文件的Snippet部分，有一个名为"；产品主要液体"；它指向另一个名为"的Snippet文件；productoptions下拉列表。liquid"：
文件"；产品主要液体"；是一个很长的问题。如果它有帮助，我可以向您展示代码的一部分，它指向"；productoptions下拉列表。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 %}
以下是"；产品选项下拉列表；看起来像。它没有那么长，所以这里是整个代码：
{% 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 %}
我想，如果我使用这个文件作为模板，我可以为单选按钮创建一个类似的文件，而不是下拉列表。我还需要有"；产品主要液体"；指向这个新文件。所以我去创造了"；"色样.液体"：
{% 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 %}
现在，选择一个选项并不会相应地更新变体。如果有人能告诉我哪里出了问题，并帮助我解决这个问题，我将不胜感激！提前感谢！
这是一个复杂的问题，因为每个主题都有自己的结构。我不确定你是否能理解这一点，但Shopify有一个不同的隐藏选择下拉列表，它实际上在表单中有效。
隐藏的选择选项具有变体名称及其ID。您要做的是，您需要使用JS代码手动触发隐藏的选择选项
要查看隐藏的选择选项，请通过浏览器进行检查并在类名下面进行搜索。
no-js
大多数情况下看起来是这样的：
<select name="id" id="ProductSelect-product" data-section="product" class="product-form__variants no-js">