咨询Shopify商店用户登录成功后运行custom script的实现方法

方案1：主题端监听事件实现（无代码App依赖，轻量快捷） #

• 适用场景：使用Shopify原生登录页面，无需跨主题通用的场景
• 实现逻辑：通过监听登录表单提交、登录成功事件，结合登录态判断触发脚本，直接把以下代码添加到主题的theme.liquid文件的</body>标签前即可：

// 适配新版Shopify顾客账户的登录事件监听
document.addEventListener('customer:loggedin', () => {
  // 替换为你的自定义脚本逻辑
  console.log('用户登录成功');
  yourCustomFunction();
});

// 旧版主题兼容逻辑：标记登录提交状态，跳转后校验触发
const loginForm = document.querySelector('form[action="/account/login"]');
if (loginForm) {
  loginForm.addEventListener('submit', () => {
    sessionStorage.setItem('just_finish_login', '1');
  });
}

// 页面加载时判断是否刚完成登录
window.addEventListener('load', () => {
  // 通过Liquid渲染的用户ID判断当前是否处于登录态
  const isLogged = '{{ customer.id }}' !== '';
  const justLogin = sessionStorage.getItem('just_finish_login') === '1';
  if (isLogged && justLogin) {
    yourCustomFunction();
    sessionStorage.removeItem('just_finish_login');
  }
});

方案2：App端注入Script Tag + Webhook校验（通用可控，适合多店铺/跨主题场景） #

• 适用场景：你通过Shopify App提供功能，需要在所有安装App的店铺的用户登录时触发脚本的场景
• 实现步骤：
  1. 调用Shopify的Script Tag API将你的自定义脚本全局注入到店铺所有页面
  2. 在你的App后端注册Shopify的customers/login Webhook，用户登录成功后Shopify会主动推送事件到你的后端服务
  3. 前端脚本检测到登录态后，携带用户标识请求你的后端接口，和Webhook收到的登录事件做校验，确认是有效登录后再触发核心逻辑，避免恶意伪造触发

方案3：自定义登录流程拦截（可控性最高，适合自研登录页的场景） #

• 适用场景：你没有使用Shopify原生登录页面，自研了自定义登录入口的场景
• 实现逻辑：你调用Shopify Customer Account API的login mutation或者原生登录接口拿到成功返回结果时，直接调用你的自定义脚本即可，不存在事件漏听、兼容性的问题

注意事项 #

• 核心业务逻辑不要完全放到前端实现，涉及权益发放、数据统计的场景必须配合后端做登录态校验
• 测试时需要关闭浏览器的第三方Cookie拦截，避免sessionStorage、登录态标记失效
• Shopify Plus店铺可以直接在顾客账户扩展配置中注入脚本，无需修改主题代码，兼容性更强

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