Shopify怎么添加自定义HTML代码

Shopify添加自定义HTML代码首先需要备份主题，然后打开Shopify独立站的主题代码编辑器选择想要自定义的部分，这决定了商家是打开layout中的theme.liquid文件，还是Sections或Templates文件，亦或者是新创建一个liquid文件，接着把HTML代码粘贴到自己希望它出现的位置，最后点击保存并预览即可。

第一步：备份Shopify主题

在向主题文件添加HTML进行Shopify二次开发之前，务必先备份主题。

Shopify主题备份

为了备份Shopify主题，执行的操作有：

Shopify后台中进入在线商店-主题。
找到当前的主题，点击三个点，然后选择复制。
此时Shopify就会创建主题副本。

第二步：打开主题代码编辑器

在上面的主题页面，再次点击三个点，然后选择编辑代码。

打开shopify主题代码编辑器

这一步会打开Shopify内置的代码编辑器，在这里可以查看并编辑主题文件。

第三步：选择合适的文件（模块、模板等）

在哪里添加 HTML，取决于商家想更改什么：

对于全站元素（如追踪码或验证标签），编辑layout文件夹中的theme.liquid文件。
对于特定页面或区域，可以在 Sections 或 Templates 文件夹中查找（例如 product-template.liquid、footer.liquid，或创建新版块如 custom-html.liquid）。
对于自定义版块，点击“添加新版块”并命名，Shopify会为创建一个空白的 liquid 文件。

选择合适的文件

第四步：插入HTML并保存

现在把HTML代码粘贴到你希望它出现的位置，如果想在所有的collection页面上添加自定义的HTML banner或小部件：

在主题代码编辑器中，点击“添加新模板”。
在下拉菜单中选择“集合”作为模板类型。
选择格式（大多数独立站Shopify主题都用“liquid”）。

添加并编辑新模板

Shopify平台会创建一个新文件，通常名为 collection.liquid 或 collection.json。

这里有一个示例代码，可以在产品上方添加一个简单的HTML banner：

<!-- Custom HTML Banner for Collection Page -->
<div style="background:#f7f7f7; padding:20px; text-align:center; margin-bottom:30px;">
<h2>Shop Our Latest Collections!</h2>
<p>Enjoy free shipping on orders over $50.</p>
</div>

把这个代码粘贴到新建的 collection.liquid 文件里，就在主产品grid代码的上方（找 {% section ‘collection-template %} 或类似的）。

代码粘贴