颜色选择器到文本模式

color picker to text schema

我正在尝试添加颜色选择器来更改标题的颜色,但我不知道如何在标题和颜色选择器之间添加关系。

当前未保存为无效 Json,但这是我添加到部分 > hero.liquid 文件

的内容
  {
    "type": "text",
    "id": "title",
    "label": "Heading",
    "default": "Image with text overlay"
    "settings": [
     {
      "type": "color",
      "id": "color_title",
      "label": "Heading color",
      "default": "#FFFFFF"
     }      
    ]
  },

如果我将颜色选择器包含在它显示的设置之外但与任何元素无关

您不是在架构中而是在液体本身中创建关系。

正确的语法是:

{
  "type": "text",
  "id": "title",
  "label": "Heading",
  "default": "Image with text overlay"
},
{
  "type": "color",
  "id": "color_title",
  "label": "Heading color",
  "default": "#FFFFFF"
}

然后你可以这样做:

<h2 style="color: {{settings.color_title}}">{{ settings.title }}</h2>

 "settings": [ {
   "type": "color",
   "id": "user_color",
   "label": "Color",
   "default": "#000"
 },
] 

然后在schema标签外,输出颜色到shopify:

<h2 style="color: {{ section.settings.user_color }}">Kols might be the king</h2>

user_color 是颜色选择器的 id。 此语法输出 Kols might be the king 黑色文本,这是架构设置中的默认颜色。