Shopify 知识点

📜 一、Liquid模板语言（核心基础）

1. 语法结构
   • 输出变量：{{ product.title }} 动态显示商品标题。

   • 逻辑控制：{% if product.available %}…{% endif %} 条件渲染。

   • 循环遍历：{% for item in collection.products %} 处理商品列表。

   • 空白符控制：{%- … -%} 消除渲染后多余空格。

2. 对象与数据
   • 常用对象：product（商品）、collection（分类）、cart（购物车）、customer（用户）。

   • 过滤器：{{ price | money }} 格式化价格，{{ content | truncatewords: 30 }} 截断文本。

🎨 二、前端技术栈（HTML/CSS/JavaScript）

1. HTML与Liquid融合
   • 在.liquid文件中混合HTML和Liquid标签，实现动态页面。

   • 示例：通过{{ link.url }} 动态生成导航菜单。

2. CSS模块化与响应式
   • CSS变量：定义主题色等全局变量（如 --primary-color: #FF5722;）。

   • 响应式设计：媒体查询适配移动端（如 @media (max-width: 768px)）。

   • 布局方式：流式布局（Flexbox/Grid）结合绝对定位。

3. JavaScript交互
   • 原生JS优先：避免框架依赖，直接操作DOM（如 document.querySelector）。

   • LocalStorage应用：存储用户临时数据（如购物车状态）。

   • 动画效果：CSS动画（@keyframes）或JS实现淡入/滑动等交互。

🧩 三、Shopify主题架构（模块化开发）

1. 核心目录结构
   • sections/：可拖拽区块（如轮播图、商品推荐）。

   • snippets/：复用组件（按钮、价格卡片）。

   • templates/：页面模板（商品页 product.liquid、首页 index.liquid）。

2. Online Store 2.0特性
   • 区块动态配置：通过Schema定义设置项，允许商家后台自定义区块内容。

   示例：
   {% schema %}
   {
   “name”: “自定义横幅”,
   “settings”: [{ “type”: “color”, “id”: “bg_color”, “label”: “背景色” }]
   }
   {% endschema %}

⚙️ 四、开发工具与流程

1. 调试工具
   • 浏览器开发者工具：检查Liquid渲染结果及网络请求。

   • {{ variable | json }}：输出对象结构辅助调试。

2. 版本控制与部署
   • Shopify CLI：本地开发、主题上传和同步。

   • Git集成：管理代码版本，支持团队协作。

🚀 五、性能优化与最佳实践

1. 加载速度优化
   • 图片懒加载（loading=“lazy”）。

   • 减少第三方脚本阻塞渲染。

2. SEO友好设计
   • 语义化HTML标签（<h1>~<h6>）。

   • 动态生成 title 与 meta 描述（{{ page.title }}）。

3. 安全实践
   • 避免XSS攻击：对用户输入内容转义（{{ user_input | escape }}）。

六、常见场景示例

• 商品折扣标：
{% if product.compare_at_price > product.price %}
限时折扣！
{% endif %}

• 多语言支持：

结合 {{ ‘greeting’ | t }} 与Shopify多语言插件。