Shopify Dev：如何控制架构中的框阴影颜色？答案

【问题标题】：Shopify Dev: How I can control the box shadow color in schema?Shopify Dev：如何控制架构中的框阴影颜色？
【发布时间】：2020-12-30 15:42:49
【问题描述】：

我想使用主题定制器控制 shopify 架构 中的框阴影颜色。

这是我的代码：

.test {
  box-shadow: 0 0 4px 2px rgba({{ section.settings.example_shadow }}, 0.1);
}

{% schema %}
{
  "name": "Example Shcema",
  "settings": [
    {
      "type": "color",
      "id": "example_shadow",
      "label": "Shadow Color",
      "default": "#000000"
    }
  ]
}

当我提交此代码时，它会显示此错误消息：

"默认必须是 CSS 颜色"

这个问题来源于"default": "#000000"

我的问题是如何将默认的十六进制颜色转换为 rgb 颜色？？？

【问题讨论】：

标签： css json shopify shopify-template

【解决方案1】：

您可以使用默认的液体标签color_to_rgb将颜色转换为rgb颜色，例如。

{{ '#7ab55c' | color_to_rgb }}

阅读更多关于滤色器的信息here

【讨论】：

【解决方案2】：

请使用color_modify: 'alpha', 0.1 我是创建示例而不是回答你。

.test {
  box-shadow: 0 0 4px 2px {{ section.settings.example_shadow | color_modify: 'alpha', 0.1 }}
}

{% schema %}
{
  "name": "Example Shcema",
  "settings": [
    {
      "type": "color",
      "id": "example_shadow",
      "label": "Shadow Color",
      "default": "#000000"
    }
  ]
}

【讨论】：