Shopify草稿产品404页动态获取元字段实现自定义重定向

问题背景 #

现有稳定方案：当页面返回404时，通过JavaScript执行条件重定向。当前需求是让管理员无需调用Shopify API、无需使用Shopify自带重定向功能，直接在产品编辑页通过自定义元字段redirect_url为草稿状态的产品配置重定向地址。

已完成操作 #

• 成功配置自定义元字段custom.redirect_url，管理员可在产品编辑页输入目标重定向URL
• 产品详情页可正常输出元字段值：{{ product.metafields.custom.redirect_url.value }}
• 可将元字段值传递至JavaScript：const redirect_url = "{{ product.metafields.custom.redirect_url.value }}";（控制台输出正确URL）

遇到的问题 #

当产品设为草稿导致访问其URL触发404时，无法直接获取该产品的元字段。尝试通过当前404页的{{ handle }}动态获取时，错误使用嵌套Liquid标签写法：

const redirect_url = "{{ product['{{ handle }}'].metafields.custom.redirect_url.value }}";

该写法导致代码报错，输出混乱字符串，原因是Liquid标签不支持嵌套解析。

解决方案 #

Liquid中直接使用变量作为对象键即可实现动态匹配，无需嵌套标签。具体步骤如下：

代码实现 #

在404页面的Liquid模板中添加以下代码：

{% comment %} 从当前404页面的handle匹配对应产品 {% endcomment %}
{% assign target_product = products[handle] %}
<script>
// 获取元字段值，为空时默认赋值空字符串避免JS报错
const redirectUrl = "{{ target_product.metafields.custom.redirect_url.value | default: '' }}";

// 保留原有稳定重定向逻辑，仅在获取到有效URL时执行
if (redirectUrl && redirectUrl !== '') {
  window.location.href = redirectUrl;
}
</script>

关键说明 #

1. 正确的动态匹配写法：products[handle]直接使用当前页面的handle变量作为集合键，无需嵌套{{ }}，Liquid会自动解析handle的值并匹配对应产品
2. 空值处理：通过default: ''确保元字段未设置时，传递给JS的是空白字符串，避免出现null或无效值导致重定向逻辑出错
3. 兼容性：确保products[handle]能正确获取到草稿产品（若Shopify默认限制访问草稿产品元字段，需确认产品曾发布过或主题有对应支持逻辑）

内容的提问来源于stack exchange，提问作者aequalsb