Shopify 知识点
📜 一、Liquid模板语言（核心基础）
-
语法结构
• 输出变量：{{ product.title }} 动态显示商品标题。• 逻辑控制：{% if product.available %}…{% endif %} 条件渲染。
• 循环遍历：{% for item in collection.products %} 处理商品列表。
• 空白符控制：{%- … -%} 消除渲染后多余空格。
-
对象与数据
• 常用对象：product（商品）、collection（分类）、cart（购物车）、customer（用户）。• 过滤器：{{ price | money }} 格式化价格，{{ content | truncatewords: 30 }} 截断文本。
🎨 二、前端技术栈（HTML/CSS/JavaScript）
-
HTML与Liquid融合
• 在.liquid文件中混合HTML和Liquid标签，实现动态页面。• 示例：通过{{ link.url }} 动态生成导航菜单。
-
CSS模块化与响应式
• CSS变量：定义主题色等全局变量（如 --primary-color: #FF5722;）。• 响应式设计：媒体查询适配移动端（如 @media (max-width: 768px)）。
• 布局方式：流式布局（Flexbox/Grid）结合绝对定位。
-
JavaScript交互
• 原生JS优先：避免框架依赖，直接操作DOM（如 document.querySelector）。• LocalStorage应用：存储用户临时数据（如购物车状态）。
• 动画效果：CSS动画（@keyframes）或JS实现淡入/滑动等交互。
🧩 三、Shopify主题架构（模块化开发）
-
核心目录结构
• sections/：可拖拽区块（如轮播图、商品推荐）。• snippets/：复用组件（按钮、价格卡片）。
• templates/：页面模板（商品页 product.liquid、首页 index.liquid）。
-
Online Store 2.0特性
• 区块动态配置：通过Schema定义设置项，允许商家后台自定义区块内容。示例：
{% schema %}
{
“name”: “自定义横幅”,
“settings”: [{ “type”: “color”, “id”: “bg_color”, “label”: “背景色” }]
}
{% endschema %}
⚙️ 四、开发工具与流程
-
调试工具
• 浏览器开发者工具：检查Liquid渲染结果及网络请求。• {{ variable | json }}：输出对象结构辅助调试。
-
版本控制与部署
• Shopify CLI：本地开发、主题上传和同步。• Git集成：管理代码版本，支持团队协作。
🚀 五、性能优化与最佳实践
-
加载速度优化
• 图片懒加载（loading=“lazy”）。• 减少第三方脚本阻塞渲染。
-
SEO友好设计
• 语义化HTML标签（<h1>~<h6>）。• 动态生成 title 与 meta 描述（{{ page.title }}）。
-
安全实践
• 避免XSS攻击：对用户输入内容转义（{{ user_input | escape }}）。
六、常见场景示例
• 商品折扣标：
{% if product.compare_at_price > product.price %}
限时折扣！
{% endif %}
• 多语言支持：
结合 {{ ‘greeting’ | t }} 与Shopify多语言插件。