如何在Shopify Liquid中导入外部API以接入自研个性化推荐系统

下面是可直接落地的完整操作步骤：

1. 移除原生推荐模块 #

• 进入Shopify后台「在线商店」-「主题」，点击当前使用主题的「自定义」按钮
• 在可视化编辑器里找到所有自带推荐模块（包括产品页底部相关推荐、首页热门推荐、购物车页猜你喜欢等位置），直接删除或设置为隐藏，避免和自定义模块重复
• 如果你使用的是Shopify 2.0主题，也可以直接在主题代码的sections目录下找到原生推荐对应的liquid文件，注释掉加载逻辑，避免无效的资源请求

2. 开发自定义推荐轮播组件 #

• 在主题代码的snippets目录下新建custom-recommendation-carousel.liquid代码片段，编写轮播的HTML结构和CSS样式，适配PC、移动端的展示要求
• 如果你已经熟悉原有原生推荐轮播的交互逻辑，可以直接复用原生的JS交互代码，仅替换数据源部分即可，减少重复开发工作量

3. 对接自研推荐API #

首先处理跨域问题，Shopify前端直接调用外部API会触发跨域限制，有两种成熟的解决方案：

• 方案1：在你自研API的服务端配置CORS规则，把你的Shopify店铺域名添加到允许的访问来源列表中，前端可直接发起请求
• 方案2：如果无法修改API的CORS配置，可以使用Shopify自带的App Proxy做请求中转，前端先把请求发到Shopify的代理路径，再转发到你的自研API，完全规避跨域问题

对接逻辑：

• 在轮播组件的JS代码中写入API请求逻辑，根据当前页面场景传递对应的参数：比如产品页传递当前产品ID、登录用户ID，首页传递用户浏览历史、用户标签，购物车页传递购物车内的产品ID列表
• 拿到API返回的推荐产品ID列表后，调用Shopify的Storefront API批量拉取这些产品的完整信息（标题、主图、售价、跳转链接等），填充到轮播的HTML结构中完成渲染

4. 补充埋点上报（可选但建议配置） #

• 在轮播组件中加入曝光、点击事件的埋点逻辑，把用户和推荐位的交互数据异步上报到你的自研推荐系统，用于迭代优化ML模型的推荐效果
• 埋点逻辑要做成非阻塞的异步请求，避免影响店铺的加载速度和用户体验

5. 测试上线 #

• 先在主题预览模式下测试全站点不同页面的推荐展示效果，验证API请求是否正常、推荐产品加载是否正确、交互逻辑是否流畅
• 上线初期可以先做小流量灰度，仅给部分用户展示自定义推荐，和原生推荐的转化数据做AB测试，确认效果符合预期后再全量上线

注意事项 #

• 必须做API降级处理：如果自研API请求超时或返回异常，要自动 fallback 到Shopify原生推荐的产品列表，避免推荐位空白影响店铺转化
• 推荐请求尽量做懒加载：不要在页面首屏加载阶段就发起推荐接口请求，等页面核心内容加载完成、或者用户滚动到推荐位附近时再发起请求，降低对页面首屏速度的影响
• 如果需要在全站多个位置部署推荐，可以把API请求逻辑封装成公共的JS工具方法，多个推荐位复用同一套逻辑，减少冗余代码

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