先判断问题出现在哪里
在旧时代，商家安装一个“商品评论”插件，插件会自动修改 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 的阻塞。
FAQ
AppBlock集成应该先检查什么？
先在测试主题或测试页面中操作，并保留修改前版本和验证记录。不要同时改很多位置，先记录当前页面和数据，再处理最明确的问题。
需要马上安装新的 Shopify App 吗？
不一定。先判断主题现有功能、后台字段和少量代码能否解决。只有需要持续同步数据或复杂自动化时，再评估 App 的费用、脚本负担和卸载影响。
修改后怎么验证是否有效？
记录修改日期、页面 URL 和改动内容，再用实际页面、移动端、Google Search Console、Bing Webmaster Tools 或 GA4 检查结果。技术修改还要保留测试记录和回滚版本。
哪些情况不建议马上修改？
数据量太少、追踪没有配置、问题还没有复现，或者正在进行大型主题更新时，不建议一次性重做。先把问题拆开，确认影响范围后再改。