如何在Shopify Liquid文件中获取当前URL（page.url/request.url失效）

之前方案失效的原因 #

• 直接调用window对象失效：Liquid是服务端渲染语言，模板解析阶段浏览器API还未加载，且Shopify 2.0主题默认支持站内无刷新跳转，仅在页面首次加载时读取window.location无法捕获路由变化。
• 用page.url/request.url取值错误：page.url仅在渲染page类型模板（也就是商家自建的详情页，比如关于我们、售后政策页）时才会返回有效值，首页、商品页、集合页、购物车页下该字段为空；request.url会携带完整查询参数、跟踪参数，直接做字符串匹配很容易匹配失败。

方案1：服务端Liquid直接输出对应样式（无样式闪烁，适合路由规则固定的场景） #

使用全局通用的request.path字段做路由判断，该字段在所有页面模板下都会返回不含域名、不含查询参数的纯路径值，直接在全局模板里输出条件CSS即可：

<style>
/* 模态框全局基础样式 */
.custom-modal {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  /* 其余通用样式自行补充 */
}

/* 根据路由输出差异化样式 */
{% if request.path == '/' %}
  /* 首页生效样式 */
  .custom-modal {
    top: 12vh;
    max-width: 600px;
    border-radius: 12px;
  }
{% elsif request.path contains '/collections/' %}
  /* 所有集合页生效样式 */
  .custom-modal {
    top: 18vh;
    max-width: 900px;
    background: #f7f7f7;
  }
{% elsif request.path contains '/products/' %}
  /* 所有商品页生效样式 */
  .custom-modal {
    top: 20vh;
    max-width: 480px;
    border: 1px solid #eee;
  }
{% endif %}
</style>

注意：路径判断统一用斜杠开头的相对路径，精确路由匹配用==，同前缀的模糊匹配用contains即可。

方案2：前端JS动态监听路由更新（适配无刷新跳转，兼容所有场景） #

如果需要兼容站内点击链接触发的无刷新跳转，用JS监听路由变化事件，通过给模态框增删class的方式切换样式，代码放在主题layout/theme.liquid文件的</body>标签前即可：

<script>
function updateModalStyle() {
  const modal = document.querySelector('.custom-modal');
  if (!modal) return;
  const currentPath = window.location.pathname;
  // 先清除所有路由相关的样式类
  modal.classList.remove('modal-home', 'modal-collection', 'modal-product');

  // 按当前路由匹配对应样式类
  switch(true) {
    case currentPath === '/':
      modal.classList.add('modal-home');
      break;
    case currentPath.startsWith('/collections/'):
      modal.classList.add('modal-collection');
      break;
    case currentPath.startsWith('/products/'):
      modal.classList.add('modal-product');
      break;
  }
}

// 首次页面加载完成执行
document.addEventListener('DOMContentLoaded', updateModalStyle);
// 监听浏览器前进/后退触发的路由变化
window.addEventListener('popstate', updateModalStyle);
// 监听Shopify主题无刷新跳转完成事件
document.addEventListener('shopify:section:load', updateModalStyle);
document.addEventListener('shopify:route:complete', updateModalStyle);
// 兼容页面从缓存加载的场景
window.addEventListener('pageshow', updateModalStyle);
</script>

提前在全局CSS里定义好modal-home、modal-collection等类对应的样式即可，该方案不受SSR限制，所有路由切换场景都能正常触发。 #

新手避坑提示 #

• 不要在Liquid代码块里直接调用window等浏览器API，Liquid解析运行在Shopify服务端，无法访问浏览器环境的对象
• 不要依赖page.url做全站点路由判断，该字段仅在page类型模板下有值
• 全局生效的模态框相关代码不要放在单个页面模板（比如product.liquid、collection.liquid）里，要放在全局布局文件theme.liquid中，避免其他页面加载不到逻辑

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