先判断问题出现在哪里
在旧时代，商家安装一个“商品评论”插件，插件会自动修改 product.liquid 的代码，强行插入一段 <div id="reviews"></div>。当商家卸载插件时，这段代码却成了永远的“牛皮癣”，导致页面报错、速度变慢。
核心逻辑是：无代码侵入的插件生态。
OS 2.0 引入了 App Blocks。第三方插件不再直接修改主题代码，而是把自己包装成一个“特殊的 Block”。只要你的主题声明了支持 App Blocks，商家就可以像拖拽普通文本区块一样，把“评论插件”拖到产品页的任何位置，卸载时也能一键干净移除。
实战步骤
步骤 1：在 Section 中声明支持 App Blocks
操作路径：修改 section 的 {% schema %}
- 告诉 Shopify：我这个 Section 允许插入第三方插件的 Block。
- 在
blocks数组中，添加一个特殊的类型@app："blocks": [ { "type": "@app" }, { "type": "text", ... } ] - 仅仅加这一行代码，你的 Section 就具备了强大的应用兼容能力！
步骤 2：在前端正确渲染 App Blocks
操作路径：在 HTML 的 for 循环中渲染
- 渲染逻辑与普通 Block 完全一致，Shopify 会自动处理插件代码的注入。
{% for block in section.blocks %} {% case block.type %} {% when '@app' %} <div class="app-block-wrapper" {{ block.shopify_attributes }}> {% render block %} </div> {% when 'text' %} ... {% endcase %} {% endfor %} -
注意：使用
{% render block %}而不是输出变量。Shopify 会在底层将插件的 HTML/JS/CSS 渲染到这个位置。
步骤 3：支持全屏级别的 App 注入 (App Embeds)
操作路径：不需要修改代码，只需确保 layout/theme.liquid 规范
- 有些插件（如右下角的客服聊天弹窗、全屏的雪花特效）不需要放在特定的 Section 里，它们是全局的。
- 这类插件被称为 App Embeds。
- 只要你的
layout/theme.liquid中正确包含了{{ content_for_header }}（通常在<head>内）和{{ content_for_layout }}，App Embeds 就能自动生效。商家可以在主题编辑器的“App embeds”侧边栏中一键开关它们。
常见误区与处理方法
误区一：给 App Block 的外层包裹了严格的 CSS 尺寸限制
规避方法：你在渲染 @app 时，为了保持页面整洁，给外层的 div 加了 overflow: hidden; height: 200px;。结果商家拖入了一个“商品评价列表”的 App Block，这个列表本来有 1000px 高，结果被你的 CSS 强行截断，用户根本看不到底部的评论。永远不要对 App Block 的外层容器施加严格的尺寸限制（尤其是高度）。 第三方插件的内容是动态的、不可预知的。你应该让 App Block 自由撑开容器，最多只限制最大宽度（max-width）以保持整体版面的居中对齐。
误区二：在不支持 Block 嵌套的旧版 Section 中强行插入 App
规避方法：有些老旧的 Section（比如一个写死的全屏 Banner）根本没有 blocks 循环逻辑。如果你只是在 Schema 里加了 "type": "@app"，但 HTML 里没有写 {% render block %}，商家在后台虽然能把插件拖进来，但前端页面上什么都不会显示。这会引发大量的客诉。声明支持 App Block 的前提，是你的 Section 必须是一个基于 Block 循环渲染的动态组件。 如果是静态 Section，请不要声明 @app 支持。
误区三：忽略了 App Block 带来的性能灾难
规避方法：虽然 App Block 解决了代码污染问题，但它并没有解决性能问题。商家可能会在一个产品页拖入 5 个不同的 App Block（评论、倒计时、信任徽章、尺码表、推荐商品）。每个 App 都会加载自己的外部 JS 和 CSS，导致页面请求数很快飙升，Lighthouse 评分跌至谷底。作为主题开发者，你无法控制商家安装什么插件，但你可以通过架构设计来缓解。 例如，在产品页的布局设计上，将非核心的 App Block（如长篇评论区）放置在页面最底部，利用浏览器的自然延迟加载特性，确保首屏（主图、价格、加购按钮）的渲染绝对不受第三方 App 的阻塞。
常见问题
学习「Shopify App Block 集成：让主题良好兼容第三方应用」前需要什么基础？
建议先熟悉 HTML、CSS、基础 JavaScript 和 Shopify 后台结构。涉及 Liquid、Section、Schema 或主题工作流的内容，可以边读边在测试主题里练习，不要直接改线上主题。
可以直接在正在使用的线上主题里操作吗？
不建议。主题开发和结构调整应先在复制主题、开发主题或本地环境中完成，确认移动端、产品页、购物车和关键模板正常后，再发布到线上主题。
修改主题前最应该备份什么？
至少保留当前主题副本，并用 Git 记录代码变化。如果文章涉及主题编辑器配置，还要注意模板 JSON 和 settings_data.json 这类配置文件是否需要同步。
遇到教程和后台界面不一致怎么办？
优先以当前 Shopify 后台、主题代码和官方文档为准。Shopify 后台和 CLI 会持续更新，旧截图可用于理解路径，但不能替代当前界面提示。
这类主题开发内容适合什么时候上线到正式店铺？
当改动已经在测试主题中完成移动端、桌面端、产品页、集合页、购物车和速度检查后，再安排上线。影响结账、价格、库存或应用兼容的改动要单独回归。