根据 Shopify 中的值更改 css 的更好方法？
Better way of changing css based on value in Shopify?
我正在为我在 Shopify 中的产品创建色样选择。
样本仅在变体名称等于 'Colour' 时显示。
这很好并且可以正常工作。
我只是想知道是否有更好的方法来指定样本颜色，而不是手动为每个颜色名称输入十六进制代码。
目前我的产品-template.liquid 文件中有以下代码。
<label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}" id="swatch-{{ value }}"{% unless variant_label_state %} class="disabled"{% endunless %}/>
因此，如果颜色值设置为红色，则 id 的输出将为色板-红色。现在我的问题是，在 CSS 中，我目前想到的唯一方法是手动输入：
#swatch-Red { background-color: red; }
但我必须为很多颜色做这个。谁能想到一种更有效的方法来做到这一点？
另一件要记住的事情是我有称为 'Gunmetal' 和 'Pewter' 的颜色。这些是深灰色和浅灰色，显然这些颜色在 CSS.
中无法识别
如有任何建议，我们将不胜感激！
这里有几个选项。
1) 许多高级主题使用的不好的
使用与变体名称相同的颜色图像。因此，例如红色，您的资产文件夹中将有一个名为 red.jpg 的图像。
我不太喜欢这个解决方案，因为您需要客户端为每种颜色上传一张图片，并且您用大量图片填充了您的资产文件夹。
优点：
- 您可以添加多种颜色
缺点：
- 您需要管理员进入代码编辑器才能上传图片
- 您必须为每种颜色创建一个图像
- 你的资产文件夹里堆满了图片
- 管理员必须以特定方式调用图像
2) 不是很好的解决方案，但比 1)
创建一个导航，您可以在其中将颜色名称设置为 link 标题并将十六进制值设置为 link url。
这样用一点液体就可以设置色板的颜色。
优点：
- 您可以添加多种颜色
- 您保持资产文件夹干净
- 您不会为每种颜色创建新图像
- 管理员不需要修改主题编辑器
缺点：
- 您要求管理员手动输入十六进制值
3) 最佳方法
用块创建一个部分。
每个块都有一个 color 字段和 text 字段。文本字段将作为颜色名称的占位符。
因此，当您循环变体时，您会获取颜色字段值并将其应用于样本。
优点：
- 创建额外颜色的漂亮而动态的方式
- 选择特定颜色的好方法
- 您没有创建新图像
- 您不会弄乱您的资产文件夹
- 您不需要管理员进入编辑器
缺点：
- 当颜色太多时，很难找到正确的颜色
我正在为我在 Shopify 中的产品创建色样选择。 样本仅在变体名称等于 'Colour' 时显示。 这很好并且可以正常工作。
我只是想知道是否有更好的方法来指定样本颜色，而不是手动为每个颜色名称输入十六进制代码。
目前我的产品-template.liquid 文件中有以下代码。
<label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}" id="swatch-{{ value }}"{% unless variant_label_state %} class="disabled"{% endunless %}/>
因此，如果颜色值设置为红色，则 id 的输出将为色板-红色。现在我的问题是，在 CSS 中，我目前想到的唯一方法是手动输入：
#swatch-Red { background-color: red; }
但我必须为很多颜色做这个。谁能想到一种更有效的方法来做到这一点？ 另一件要记住的事情是我有称为 'Gunmetal' 和 'Pewter' 的颜色。这些是深灰色和浅灰色，显然这些颜色在 CSS.
中无法识别如有任何建议，我们将不胜感激！
这里有几个选项。
1) 许多高级主题使用的不好的
使用与变体名称相同的颜色图像。因此，例如红色，您的资产文件夹中将有一个名为 red.jpg 的图像。
我不太喜欢这个解决方案，因为您需要客户端为每种颜色上传一张图片，并且您用大量图片填充了您的资产文件夹。
优点：
- 您可以添加多种颜色
缺点：
- 您需要管理员进入代码编辑器才能上传图片
- 您必须为每种颜色创建一个图像
- 你的资产文件夹里堆满了图片
- 管理员必须以特定方式调用图像
2) 不是很好的解决方案，但比 1)
创建一个导航，您可以在其中将颜色名称设置为 link 标题并将十六进制值设置为 link url。
这样用一点液体就可以设置色板的颜色。
优点：
- 您可以添加多种颜色
- 您保持资产文件夹干净
- 您不会为每种颜色创建新图像
- 管理员不需要修改主题编辑器
缺点：
- 您要求管理员手动输入十六进制值
3) 最佳方法
用块创建一个部分。
每个块都有一个 color 字段和 text 字段。文本字段将作为颜色名称的占位符。
因此，当您循环变体时，您会获取颜色字段值并将其应用于样本。
优点：
- 创建额外颜色的漂亮而动态的方式
- 选择特定颜色的好方法
- 您没有创建新图像
- 您不会弄乱您的资产文件夹
- 您不需要管理员进入编辑器
缺点：
- 当颜色太多时，很难找到正确的颜色