Shopify模板编辑&Shopify模板代码更改教程

货源人·学电商3天前独立站

如何编辑Shopify模板？

一、编辑模板

编辑Shopify模板是自定义在线商店外观和布局的关键步骤。通过编辑模板，您可以添加分区，这些分区可能包含可进一步自定义的块。编辑时，所有更改都会实时反映在模板编辑器的预览中，让您即时看到效果。

桌面端编辑步骤：
1. 登录Shopify后台，导航至“在线商店” > “模板”。
2. 找到需要编辑的模板，点击“自定义”。
3. 点击“主页”下拉菜单，选择要编辑的模板页面。
4. 若要添加新分区，点击“添加分区”，选择适合的分区添加到模板。
5. 如需在新分区中添加块，点击“添加块”，选择相应的块。
6. 点击新分区和块，查看并更改设置和选项。
7. 完成编辑后，点击“保存”。

移动端编辑步骤（iPhone/Android）：
1. 打开Shopify应用，点击“…”按钮。
2. 在“销售渠道”部分，选择“在线商店”。
3. 点击“管理所有模板”。
4. 找到需要编辑的模板，点击“自定义”。
5. 点击“主页”下拉菜单，选择要编辑的模板。
6. 若要添加新分区，点击“分区” > “添加分区”，选择新分区后点击“添加”。
7. 如需添加块，点击“添加块”，选择新块。
8. 点击新分区和块，查看并更改设置和选项。
9. 完成编辑后，点击“保存”。

二、创建新模板的注意事项

在创建新模板之前，了解以下重要事项：
● 您可以为不同的页面类型设置多个模板，但总共限制为1000个模板。
● 只能基于Online Store 2.0模板创建新模板。
● 所有模板都包含默认的产品系列、产品、博客、博客文章和页面模板。除非创建了替代模板，否则商店的资源和内容将使用这些默认模板显示。
● 模板的任何更改都会影响使用该模板的所有页面。如果需要以不同方式显示特定页面，可以基于现有模板创建新模板。
● 创建新模板时，如果基于现有模板，新模板会自动填充与现有模板相同的分区。之后，您可以自由编辑分区内容，而不会影响使用现有模板的页面。

桌面端创建新模板步骤：
1. 在Shopify后台，导航至“在线商店” > “模板”。
2. 找到需要编辑的模板，点击“自定义”。
3. 点击“主页”下拉菜单，选择模板类型，然后点击“创建模板”。
4. 在创建模板对话框中，输入新模板的唯一名称或选择基于现有模板。
5. 点击“创建模板”。

移动端创建新模板步骤（iPhone/Android）：
1. 打开Shopify应用，点击“…”按钮。
2. 在“销售渠道”部分，选择“在线商店”。
3. 点击“管理所有模板”。
4. 找到需要编辑的模板，点击“自定义”。
5. 点击“主页”下拉菜单，选择模板类型，然后点击“创建模板”。
6. 在创建模板对话框中，输入新模板的唯一名称或选择基于现有模板。
7. 点击“创建模板”。

如何编辑Shopify模板代码？

作为Shopify商家，如果需要对在线商店进行更细致的更改，这通常涉及到编辑Shopify模板代码。Shopify模板主要由Liquid模板语言构成，同时包含HTML、CSS和JavaScript。在您对HTML和CSS有一定了解，并掌握Liquid基础知识后，便可以开始编辑Shopify模板代码。

编辑Shopify模板代码的具体步骤：

1. 访问模板编辑页面：登录Shopify后台，导航至“在线商店” > “模板”。
2. 进入代码编辑模式：在模板页面，点击“操作” > “编辑代码”。
3. 熟悉代码编辑器界面：代码编辑器左侧显示模板文件目录，右侧为文件查看和编辑区域。
4. 展开和折叠编辑器：
● 点击展开图标，代码编辑器将填充整个屏幕，方便您专注于代码编辑。
● 点击折叠图标，页面将恢复正常视图。
5. 打开和编辑文件：
● 在左侧目录中点击文件，它将在代码编辑器中打开。您可以同时打开多个文件进行编辑。
● 编辑过的文件会在文件名旁显示紫色圆点，帮助您跟踪更改。
6. 恢复旧版本：
● 如果需要撤销对文件的更改，打开文件后点击“旧版本”，选择要恢复的版本，然后点击“保存”。
7. 切换编辑器颜色方案：
● 当代码编辑器全屏时，可以通过点击页面底部的按钮在亮色和暗色模式间切换。

Shopify模板代码自定义教程：

可以遵循以下模板代码自定义教程。这些教程根据需要修改的页面或功能类型进行分类。
1. 页面或功能类型的教程：根据您的需求，选择相应的教程，例如首页、产品页面、博客页面等。
2. 逐步指导：每个教程都会提供详细的步骤，指导您如何修改代码以实现所需的功能或设计。
3. 代码示例：教程中通常会包含代码示例，帮助您理解如何编写或修改Liquid、HTML、CSS和JavaScript代码。
4. 测试更改：在编辑代码后，使用Shopify的预览功能测试更改，确保更改符合预期效果。
5. 保存和发布：确认更改无误后，保存并发布您的更改，使更新后的内容对顾客可见。