根据Shopify中的值更改css的更好方法是什么？

Question

我正在Shopify中为我的产品创建色样选择。 样本仅显示变体名称是否等于“颜色”。 这很好，工作正常。

我只是想知道是否有更好的方法来分配色板颜色，而不是手动输入每个颜色名称的十六进制代码。

目前，我的product-template.liquid文件中包含以下代码。

 <label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}" id="swatch-{{ value }}"{% unless variant_label_state %} class="disabled"{% endunless %}/>

因此，如果颜色值设置为红色，则id的输出将为swatch-Red。现在我的问题是，在CSS中，我当前想到的唯一方法是手动输入：

#swatch-Red { background-color: red; } 

但我必须为大量的颜色做这件事。谁能想到更有效的方法呢？ 另外要记住的是我有颜色叫做“炮铜”和“白手”。这些是深灰色和浅灰色，显然这些颜色在CSS中无法识别。

任何建议都表示赞赏！

Answer 1

这里有一些选择。

1）许多高级主题使用的坏的

将图像用于与变体名称相同的颜色。例如，红色，您的资产文件夹中会有一个名为red.jpg的图像。

我不太喜欢这个解决方案，因为您需要客户端上传每种颜色的图像，并用大量图像填充资产文件夹。

<强>优点：

• 您可以添加多种颜色

<强>缺点：

• 您需要管理员进入代码编辑器才能上传图片
• 您必须为每种颜色创建图像
• 您将资产文件夹与图像混为一起
• admin必须以特定方式调用图片

2）不是一个好的解决方案，但优于1）

创建一个导航，您可以在其中将颜色名称设置为链接标题，将十六进制值设置为链接URL。

这种方式使用少许液体，您就可以将颜色设置为色板。

优点：

• 您可以添加多种颜色
• 保持资产文件夹清洁
• 您不为每种颜色创建新图像
• 管理员无需修改主题编辑器

<强>缺点：

• 您需要管理员手动输入十六进制值

3）最佳方法

使用块创建一个部分。

每个块都有一个color字段和text字段。文本字段将是颜色名称的占位符。

因此，当您循环变体时，您将获取颜色字段值并将其应用于样本。

<强>优点：

• 创造更多色彩的漂亮而动态的方式
• 选择特定颜色的好方法
• 您不创建新图片
• 您不会弄乱资产文件夹
• 您不需要管理员进入编辑器

<强>缺点：

• 当颜色太多时，很难找到正确的颜色