1. 创建 connect-button.liquid Section 文件

<!-- sections/connect-button.liquid -->

<section class="connect-button-section">

  <div class="connect-button">

    <button>{{ section.settings.button_text }}</button>

  </div>

</section>

2. 定义可视化编辑器的 Schema

{% schema %}

{

  "name": "Connect Button",

  "settings": [

    {

      "type": "text",

      "id": "button_text",

      "label": "Button Text",

      "default": "Connect"

    }

  ],

  "presets": [

    {

      "name": "Connect Button"

    }

  ]

}

{% endschema %}

3. 在主题编辑器中使用

完成以上步骤后，你的connect-button.liquid就可以在Shopify的主题编辑器中使用了。

• 打开Shopify后台，进入“在线商店” > “主题” > “自定义”。

• 在可视化编辑器的左侧面板中，点击“添加节”。

• 你应该能够看到一个名为“Connect Button”的选项。

• 选择它并添加到页面中，然后根据需要配置按钮文本。

4. 添加更多设置（可选）

你可以根据需要扩展schema，添加更多可配置的选项，例如按钮链接、颜色等。

liquid

{% schema %}
{
  "name": "Connect Button",
  "settings": [
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Connect"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link",
      "default": "#"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#000000"
    }
  ],
  "presets": [
    {
      "name": "Connect Button"
    }
  ]
}
{% endschema %}

在HTML部分，你需要相应地更新代码以应用这些设置：

liquid
<button style="background-color: {{ section.settings.button_color }};">
  <a href="{{ section.settings.button_link }}">
    {{ section.settings.button_text }}
  </a>
</button>