在Shopify上选择的颜色变体的显示名称

在上，我有一些样例，选中时它们不会显示变体名称。 基本上，我需要在变量样例下添加一个段落文本，指示所选变量的名称

我不擅长javascript，在网上我没有找到任何关于这方面的完整指南

---

非常感谢你的帮助

这看起来像是我以前见过的主题。如果我没记错的话，这个主题使用了一个名为

swatch.liquid

的文件来制作那些颜色圈。我正在使用我手头上碰巧有的一个样例文件的版本来写这个答案，所以特定的代码可能并不完全是你的主题所拥有的，但希望我能够帮助你找到你需要的

下面是我的swatch.liquid文件中打印样例的代码。（这大概是swatch.liquid文件的下半部分，位于snippets文件夹中）

{%assign values=''%}
{product.variants%中的变量为%0}
{%assign value=variant.options[选项索引]]}
{%除非值包含值%}
{%assign values=values | join:'，'%}
{%assign values=values | append:'，'| append:value%}
{%assign values=values | split:'，'%}
{%if是_color%}
{%else%}
{{value}}
{%endif%}
{%end除非%}
{%if variant.available%}
jQuery（'.swatch[data option index=“{{option_index}}}]”.{{value}handle}}}'）.removeClass（'soldout'）.addClass（'available'）.find（':radio'）.removeAttr（'disabled'）；
{%endif%}
{%endfor%}

这看起来有点混乱，我知道-所以让我们试着找到你想要修改的部分

下面是上例中的一部分，当样例为颜色时，它将打印样例元素：

            {% if is_color %}
              <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
                <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
              </label>
            {% else %}

{%if是_color%}
{%else%}

在这些

标记之间，您应该能够添加所需的任何文本，例如

{{value}}

在这里添加额外的HTML可能会改变当前页面的样式，因此您可能需要添加一些额外的CSS规则来应用于您添加的任何元素，以使内容重新排列整齐

希望这有帮助

---

注意：如果您使用的是Chrome，那么有一个名为“”的有用扩展名，如果您在查找需要编辑的文件时遇到困难，可以搜索整个Shopify主题。搜索诸如“颜色”或“变体.选项”之类的关键字可以帮助您找到正确的方向。

您能告诉我们您尝试了什么吗？

            {% if is_color %}
              <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
                <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
              </label>
            {% else %}