编辑模板

您可以编辑模板以自定义在线商店的内容、布局、版式和颜色。每个模板都提供了一些分区和设置，可供您用于更改商店的外观，而无需编辑任何代码。

自定义模板前的准备工作

在自定义模板之前，最好执行以下任务：

• 复制您的模板以创建一个备份副本。这使您在需要时能够轻松地放弃更改并重新开始进行自定义。

• 确保您了解可用的支持级别。

• 了解上传图片的要求和最佳做法。

模板编辑器

模板编辑器会在树形图中显示您当前在侧边栏中查看的模板的所有内容。您可以使用展开图标 ? 来展开分区结点以查看其中的块，还可以使用折叠图标 ? 将其折叠来隐藏块。您可以点击任何分区或块来查看其设置。

侧边栏模式

模板编辑器提供两种模式来利用屏幕上的所有空间。

双侧边栏模式适合较宽的浏览器窗口和较大的屏幕，而单侧边栏模式适合较窄的浏览器窗口和较小的屏幕。侧边栏模式决定了设置面板在编辑器中的显示位置。

双侧边栏模式

如果您的屏幕宽度大于 1600 像素并且浏览器窗口已完全展开，或者您的浏览器窗口已扩展到至少 1600 像素宽度，此时将显示两个侧边栏。左侧的侧边栏包含导航面板，右侧的侧边栏包含设置面板。

单侧边栏模式

较窄的浏览器窗口仅显示一个侧边栏来为模板预览留出空间。点击分区或块以对其进行编辑时，设置面板会在侧边栏中的导航面板顶部打开。

Shopify商户官网原文详情：

Editing your theme

You can edit your theme to customize your online store's content, layout, typography, and colors. Each theme provides sections and settings that allow you to change the look and feel of your store without editing any code.

Before you customize your theme

Before you customize your theme, it's a good idea to do the following tasks:

• Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

• Make sure that you understand what level of support is available.

• Learn about the requirements and best practices for uploading images.

Theme editor

The theme editor displays a tree view of all the content for the template that you're currently viewing in the sidebar. Expand a section node using the expand icon ? to view its blocks, or collapse it using the collapse icon ? to hide the blocks. You can click on any section or block to view its settings.

Sidebar modes

The theme editor offers two modes to make use of all of the space on your screen.

Doule sidebar mode is for wider browser windows and larger screens, and single sidebar mode is for narrower browser windows and smaller screens. The sidebar mode determines where the setting panel appears in the editor.

Double sidebar mode

If you have a screen larger than 1600 pixels wide and your browser window is fully expanded, or your browser window is expanded to at least 1600 pixels wide, then you'll have two sidebars. The left-hand sidebar contains the navigation panel, and the right-hand sidebar contains the setting panel.

Single sidebar mode

Narrower browsers only have one sidebar to conserve space for the theme preview. When you click on a section or block to edit it, the setting panel opens over top of your navigation panel in the sidebar.

文章内容来源：Shopify商户官方网站

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

Shopify模板包含header.liquid、footer.liquid、index.liquid等文件。header和footer都是整个网站共用的部分。index就是首页模板。还有collections、products等专门为某个页面设计的模板文件。

登录Shopify管理后台,进入“设计”---“模板”界面,可以看到当前主题包含的所有模板文件。我们可以直接在线编辑每个文件,或下载ZIP包后在本地编辑打补丁。编辑完成后点击“提交”即可发布生效。

要根据实际需求进行合理的模块划分,比如头部、导航、侧边栏、内容主体、底部等区域的代码应分离开来。文本要简洁明了,段落结构清晰。图片选择小而清晰。加载速度也要考虑进行图片和JS/CSS文件的优化。

Shopify模板使用Liquid模板语言进行开发。我们可以使用Liquid标签来输出动态数据,调用部分,进行if/unless条件判断等。比如{{product.title}}输出产品标题、{% include '文件' %}引入部分等。需要熟练掌握Liquid的语法规则。