如何在 Shopify 的产品页面上添加指向不同色板的链接 + 将色板转换为图像？

如何解决如何在 Shopify 的产品页面上添加指向不同色板的链接 + 将色板转换为图像？

我有一位客户想要该品牌的色样（为色样设置的图像、选择色样时链接的变化方式等）：https://www.meshki.us/collections/new-arrivals/products/skylar-triple-o-ring-top-chocolate https://prnt.sc/167l16m

我觉得这个问题被问了很多，但我真的很困惑！大声笑我试过谷歌这个，但我仍然不太明白如何正确地做到这一点，因为我是液体的新手。我也不明白如何将色板变成网站上看到的实际图像。这是我页面上的样子：https://prnt.sc/167n1ze。

对不起，如果这是奇怪的格式，我是堆栈溢出的新手！如果您需要更多信息，请告诉我。

这是我在 PRODUCT-SWATCHES.LIQUID 中的内容：

function installFunctions() {
  var excludedFunctions = ["onopen","installFunctions"];

  var menu = SpreadsheetApp.getUi().createMenu('Funções do GAS');
  for (var i in this) {
    if (typeof this[i] == "function" && !excludedFunctions.includes(i)) {
      menu.addItem(i,i);
    }
  }
  menu.addToUi();
}

function onopen() {
  installFunctions();
}

function climaParaTestes() {
}

function JogosParaclimaParaTestes() {
}

function EnviarclimasParasquads() {
}

function ApagarHistoricodoclima() {
}

function deleteTriggerWithName(name) {
}

产品模板.液体

{% if product.options.size > 0 %}
<ul class="swatches" >
{% for option in product.options %}
{% if option == 'Color' or option == 'COLOR' or option == 'Colour' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% if product.variants.size > 1 %}
  {% for variant in product.variants %}
    {% capture color %}
      {{ variant.options[index] }}
    {% endcapture %}
    {% unless colorlist contains color %}
        {% assign text = color | handleize %}
        {% if settings.image_swatches %}
            <li class="swatch {{ color | split: ' ' | last | handle }}{% if variant.image == null %} noImg{% endif %}" title="{{color | split:' '}}"
                style="background-image:url({{ text | append: '.png' | file_url }});"
               {% if variant.image != null %}rel="{{ variant.image.src | product_img_url: grid_image_width }}"{% endif %}>
            </li>
        {% else %}
            <li class="swatch {{ color | split: ' ' | last | handle }}{% if variant.image == null %} noImg{% endif %}" title="{{color | split:' '}}"
                style="background-color: {{ color | split: ' ' | last | handle }};"
               {% if variant.image != null %}rel="{{ variant.image.src | product_img_url: grid_image_width }}"{% endif %}>
            </li>
        {% endif %}
        {% capture tempList %}
            {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}
        {% assign colorlist = tempList %}
    {% endunless %}

  {% endfor %}

    {% endif %}
  {% endif %}
{% endfor %}
</ul>
{% endif %}