如何在Shopify Block Schema中创建含变量的动态链接？

阿华AIGC实验室

2026-6-16

问题解答

核心结论

不能在Block的schema中直接解析{{ shop.domain }}、{{ block.id }}这类Liquid动态变量。因为schema是用于定义区块配置结构的JSON格式代码，仅作用于Shopify后台的配置界面，不会执行Liquid渲染逻辑，写入的变量会被当作纯文本输出。

推荐替代方案

1. 前端Liquid模板中渲染动态链接（最适合公开页面场景）

在schema中仅定义按钮的静态配置项（如显示文本），实际的动态URL在区块的Liquid模板文件中拼接生成，这是你需要的前端公开页面场景的最优解。

示例代码：

schema部分（仅定义按钮文本）：

{
  "type": "block",
  "name": "应用设置按钮",
  "settings": [
    {
      "type": "text",
      "id": "button_label",
      "label": "按钮显示文本",
      "default": "打开应用设置"
    }
  ]
}

区块Liquid模板部分（生成动态链接）：

{% if block.settings.button_label %}
  <a href="https://你的应用域名.com/config?shop={{ shop.domain | url_encode }}&block_id={{ block.id }}" class="app-settings-btn">
    {{ block.settings.button_label }}
  </a>
{% endif %}

2. 后台配置界面用App Bridge生成动态链接（针对后台场景）

如果是想在Shopify后台的区块配置面板中添加跳转链接，其他应用常用的方式是借助Shopify App Bridge获取当前上下文的店铺域名和区块ID，动态生成链接。

示例代码（React环境）：

import { Redirect } from '@shopify/app-bridge/actions';
import { useAppBridge } from '@shopify/app-bridge-react';

function AppSettingsButton({ blockId, shopDomain }) {
  const app = useAppBridge();
  
  const handleRedirect = () => {
    Redirect.create(app).dispatch(
      Redirect.Action.APP,
      `/settings?shop=${shopDomain}&block_id=${blockId}`
    );
  };

  return <button onClick={handleRedirect}>打开应用设置</button>;
}