设置 TOGE
TOGE 是为小型独立服装品牌设计的模板：每个产品一个故事、面料说明、FIELD 照片和 Drop（限量发售）。模板只能包含布局和示例文案。您的产品、照片、菜单和元字段都存放在您的商店里，所以刚安装时看起来是空的。本指南按照效果最明显的顺序，说明需要添加的内容。
以下所有操作都在 Shopify 后台完成，无需编写代码。属于 Shopify 常规操作的步骤，本指南不再重复，而是链接到 Shopify 帮助中心。
1. 本指南使用的术语
2. 最初的十分钟
- 上传模板：在线商店 → 模板 → 添加模板 → 上传 zip 文件。在主页看起来满意之前，先不要发布；通过“自定义”可以预览未发布的模板。
- Logo：模板编辑器 → 页眉。上传您的 Logo 图片，或留空以文字显示商店名称。（主页上的山形标志是 TOGE 自己的 Logo。要替换它，请编辑
snippets/logo.liquid，或在“主图”分区中关闭“在图片上显示 Logo”。） - 主菜单：内容 → 菜单 → 主菜单。页眉显示您在“页眉”分区中选择的菜单（默认：
main-menu）。嵌套菜单会以下拉菜单展开，最多三级。 - 主页主图：模板编辑器 → 主图。添加一张宽幅照片（2:1，2400 px 宽就足够了）。如果裁剪效果不理想，可为手机另外添加一张 4:5 的照片。如果照片较亮，请将“照片上的文字颜色”设为“墨色”。
这样您的商店看起来就已经很完整了。
3. 模板设置
模板编辑器 → 模板设置。这些设置作用于整个商店。
| 设置 | 作用 |
|---|---|
| 颜色 | 两套配色方案：方案 1 为浅色，方案 2 为深色。新闻通讯横条等分区会选用其中一套。每套方案都有背景、文字、边框、表面、强调色、链接和按钮的颜色。 |
| 排版 | 正文字体和标题字体。每种字体都会加载常规、中等和粗体三种字重。任何 Shopify 字体都可以使用。 |
| 布局 | 页面的最大宽度和两侧的边距。 |
| 输入框圆角 | 输入框和按钮的圆角大小。 |
| 网站图标 | 浏览器标签页上的小图标。正方形，32 px 或更大。 |
4. 模板会查找的菜单和页面
页脚和支持页面按 handle 读取内容。使用下列 handle 创建它们，它们就会自动显示。不创建的话，相应部分就不会显示。
| 内容 | 位置 | Handle |
|---|---|---|
| 页脚菜单栏 | 内容 → 菜单 | 任意菜单；在 页脚 → 块 中选择 |
| Journal | 博客文章 | 博客 news |
| 关于页面 | 页面，模板 page.about | about-us |
| 支持页面 | 页面，模板 page.support | support |
| 联系页面 | 页面，模板 page.contact | contact |
| 页脚中显示的法律页面 | 设置 → 政策 | 隐私、条款、退款、运输 |
| 额外的法律页面（日本） | 页面，模板 page.policy | tokushoho、cancellation |
要创建页面，请前往 在线商店 → 页面 → 添加页面。输入标题，在右侧的“模板”中选择模板，并在“搜索引擎列表”中检查 handle。
法律页面的内容来自 设置 → 政策；页脚只会链接到您已填写的政策。
tokushoho 和 cancellation 是日本法律要求网店提供的页面。如果您不在日本销售，可以跳过。page.policy 模板会以与政策相同的样式显示任何页面。
关于、支持和联系页面由分区组成，所以它们的文字和照片要在模板编辑器中编辑，而不是在页面本身。联系表单会发送到商店的发件人邮箱地址。通过新闻通讯横条订阅的人会带着 newsletter 标签加入“客户”。
5. 主页
| 分区 | 需要的内容 |
|---|---|
| 主图 | 一张照片（见上文）。标题、导语和链接是分区设置。 |
| 产品系列推荐（推荐横幅） | 打开了元字段 显示为主页推荐 的产品系列（见第 8 节）。一个产品系列时为静态横幅；两到五个时变为轮播。一个都没有时，分区使用自己的文本和照片设置。 |
| 新品上架 | 在分区中选择一个产品系列。桌面端显示三个产品，手机显示四个。 |
| 故事 | 一张照片，或一段短的循环视频（在 内容 → 文件 中上传的 mp4，静音播放）。文字叠加在图片上；关闭“文字叠加在图片上”可将文字放到图片下方。 |
| Journal | 选择博客。显示最新的三篇文章。 |
| 最近浏览 | 根据访客的浏览器自动填充。无需设置。 |
您可以通过“添加分区”在主页上添加更多分区：精选产品（一个产品，连同照片、选项和购物车按钮）、常见问题、支持指南、联系表单，以及另一个 故事、产品系列推荐、新品上架 或 Journal。新闻通讯横条属于页脚，所以会显示在每个页面上。
6. 产品
产品页面用普通的产品就能运行：标题、价格、照片、选项。下面的每一项都会为页面增加一个部分。所有内容都是可选的，页面会隐藏为空的部分。
页面上的内容
从上到下：主图和宣传语 → 产品名称、选项、价格、购物车和详情折叠面板 → 搭配推荐 → 产品照片 → 故事 → 面料章节 → 备注 → FIELD 照片 → 相关产品 → 最近浏览。从“搭配推荐”往下，每一项都是模板编辑器中独立的分区，可以重新排序或删除。
产品页面 分区的设置控制上半部分：
- 颜色和尺码 块：哪个选项是颜色、哪个是尺码（见下文）、“库存不多”的阈值、尺码标签，以及尺码指南页面。
- 数量 块：每笔订单最大数量（0 表示不限）和字段下方的说明。
- 购物车 块：动态结账按钮（Shop Pay 等）和礼品卡的收件人表单。
- 折叠面板 块：每一个都是详情中的一行。一行可以显示商店政策、产品描述、保养指南、尺码表，或材质和产地。
选项和照片
- 颜色和尺码按*位置*而不是按名称识别，所以选项可以叫 Color、Colour 或 颜色。如果您的位置不是 1 和 2，请在“产品页面”分区中设置“颜色选项位置”和“尺码选项位置”（1 到 3）。
- 第三个选项（长度、版型……）同样以按钮显示。无需设置。
- 颜色色块使用每种颜色第一个多属性的照片（竖版 4:5，1080 × 1350 效果很好）。同一颜色的所有多属性请使用同一张照片。
- 主图：顶部的大图是元字段 custom.hero_image，没有则使用产品的第一张照片。它应该是营造“世界观”的图片，而不是产品照。
- 图库：没有用作颜色色块的产品照片会排列在故事下方。添加到产品的视频、YouTube 和 Vimeo 链接以及 3D 模型也会显示在这里。
产品页面读取的元字段
在 设置 → 自定义数据 → 产品 → 添加定义 中创建。定义的名称可以自定；必须一致的是命名空间和键（在定义表单中以 命名空间.键 的形式输入）以及类型。创建定义后，每个产品的编辑页面底部都会出现对应的字段。
| 命名空间.键 | 类型 | 显示为 |
|---|---|---|
descriptors.subtitle | 单行文本（标准） | 主图下方的一句话宣传语 |
descriptors.care_guide | 多行文本（标准） | 详情折叠面板中的“保养” |
custom.hero_image | 文件（图片） | 顶部的主图；也是产品卡片的悬停照片 |
custom.hero_video | 文件（视频） | 代替主图播放，静音、循环 |
custom.gender | 单行文本 | 产品名称旁的小标签。如果有相同 handle 的产品系列且其中有产品，则链接到该产品系列 |
custom.gender_collection | 产品系列引用 | handle 不同时，标签改为链接到这里 |
spec.material | 单行文本 | 详情中的“材质” |
spec.origin | 单行文本 | 详情中的“产地” |
spec.size_table | 多行文本 | 尺码表。每行一条，单元格以 | 分隔。第一行是表头：尺码 | 衣长 | 胸宽 | 袖长，然后是 S | 66 | 50 | 20。按输入原样显示，不会转置 |
color.names | 单行文本 | 颜色的显示名称，以 代码:名称 的组合并用 | 分隔：SUMI:墨色|SAND:沙色。代码就是选项的值 |
drop.mode | 单行文本 | 尚未开始的 Drop 填 pre：购物车会隐藏，改为显示“到货通知”面板 |
drop.next_at | 日期 | 下一次 Drop 的日期，显示在“到货通知”面板上 |
drop.label、drop.qty、drop.note | 单行文本 | Drop 开始前的按钮文字和其下方的短句 |
drop.end_variants | 单行文本 | 已停产的组合，写成 颜色 / 尺码 并以 | 分隔：SAND / XS|SAND / XL |
nav.parent | 单行文本 | 要显示在面包屑导航中的产品系列 handle（见下文） |
story.gallery | 文件列表（图片） | “FIELD”照片：横向排列的生活场景照片 |
story.fabric | 元对象引用 → Fabric | 面料章节（见第 7 节） |
这些项目大多也是“产品页面”分区的设置（主图、宣传语、标题右侧（性别）、材质、产地、颜色名称、已停产的组合、销售状态）。分区设置作用于所有产品，而元字段会覆盖它，所以只有一两个产品的商店可以完全不用元字段。
产品名称上方的面包屑导航按以下顺序决定：标签 bread1-apparel、bread2-tops（模板会查找 handle 为 apparel 和 tops 的产品系列；没有时只显示文字，不带链接）→ 元字段 nav.parent → 产品所属的第一个产品系列。bread1- 标签也决定哪些产品出现在“相关产品”中。
故事本身就是产品描述。只需要标题（h3）、段落和图片；模板会根据标题在右侧生成目录。
7. 面料章节（元对象）
面料章节是产品页面中讲述一种面料故事的部分：名称和导语、一行大号数字（克重、厚度……）、正面和反面的照片、三个“工作原理”步骤，以及对比图表。每种面料一个元对象，可在多个产品之间共享。只有名称是必填的；其他部分在对应字段填写后才会出现。
在 设置 → 自定义数据 → 元对象 中用下列字段键创建定义。名称和定义本身的名称可以任意；模板会跟随产品的 story.fabric 引用，并按键读取字段。较大的定义会引用较小的定义，所以请先创建小的：Fabric row → Fabric chart、Fabric step、Fabric stat → Fabric。
Fabric（附加到产品上的那个）
| 键 | 类型 |
|---|---|
name、eyebrow、headline | 单行文本 |
lead | 富文本 |
stats | Fabric stat 列表 |
views_heading、views_note、face_title、face_tag、back_title、back_tag | 单行文本 |
views_body、face_body、back_body | 富文本 |
face_image、back_image | 文件（图片） |
how_heading | 单行文本 |
how_body | 富文本 |
steps | Fabric step 列表 |
charts | Fabric chart 列表 |
note | 多行文本 |
Fabric stat：value、unit、label、prefix（全部为单行文本）。显示为一行大号数字，例如 value 90、unit g/㎡、label 克重。
Fabric step：image（文件）、title（单行文本）、body（富文本）。三个步骤组成“工作原理”横条。
Fabric chart：title（单行文本）、body（富文本）、axes（单行文本列表）、rows（Fabric row 列表）、note（单行文本）。填写了 axes 时，图表为五点评分表；未填写时为水平条形图。
Fabric row：label（单行文本）、value（小数）、display（单行文本，用来代替原始数值显示的内容，例如 约 30 分钟）、scores（整数列表，每个轴一个，1 到 5）、highlight（布尔值，标记您自己的面料）。
图表在滚动到可见区域时会播放动画。数字会从零开始递增。
8. 产品系列
在 设置 → 自定义数据 → 产品系列 中：
| 命名空间.键 | 类型 | 显示为 |
|---|---|---|
toge.home_feature | 真/假 | 将此产品系列放到主页推荐横幅上 |
toge.feature_heading | 单行文本 | 横幅上和产品系列页面顶部的大标题 |
toge.feature_image | 文件（图片） | 横幅照片（如果与产品系列图片不同） |
toge.feature_video | 文件（视频） | 在横幅上代替照片播放 |
nav.parent | 单行文本 | 上级产品系列的 handle，用于面包屑导航（“所有产品”填 all） |
产品系列的描述是标题下方的短文本。筛选、排序和每页产品数是“产品系列”分区的设置。
9. 公告栏
最顶部的公告栏由博客文章驱动，所以您可以像写文章一样撰写、排期和下架公告。
- 在 设置 → 自定义数据 → 博客文章 中创建
toge.announce（真/假）和toge.announce_text（单行文本）。 - 在文章上打开 announce。公告栏显示
announce_text或文章标题，并链接到该文章。 - 以打开了该标记的最新文章为准。都没有时，不显示公告栏。
访客可以关闭公告栏。关闭后七天内保持关闭，或直到文本更改为止。
10. 自动出现的内容
模板的这些部分跟随您的商店设置，在模板中无需设置任何内容。
11. 图片尺寸
| 位置 | 尺寸 |
|---|---|
| 主页主图 | 2:1，2400 px 宽。手机会裁剪为 4:5，或使用单独的移动端图片 |
| 主页故事 | 2:1，2400 px 宽。手机会裁剪为 4:5 |
| 产品系列推荐横幅 | 16:9，1600 px 宽或更大。手机会裁剪为 4:3 |
产品主图（custom.hero_image） | 3:2，2000 px 宽。手机会裁剪为 4:5 |
| 多属性照片（颜色色块） | 4:5，1080 × 1350。产品卡片和图库按 4:5 显示；颜色色块从中央裁剪出正方形 |
| 产品照片（图库） | 4:5 |
FIELD 照片（story.gallery） | 2:3，竖版 |
| 面料正面和反面 | 比例不限，但两张形状相同；1200 px 宽 |
| 面料步骤 | 白色背景上的插图；白色会融入页面 |
| 博客文章图片 | Journal 列表中为 4:3，1600 px 宽或更大 |
| 网站图标 | 正方形，32 px 或更大 |
Shopify 会针对每种屏幕调整大小，所以图片大一些没关系。
12. 语言
模板中的所有示例文案均为英文。模板自身的标签（按钮、购物车、搜索）和模板编辑器提供英语、日语、德语、法语、西班牙语、葡萄牙语（巴西）、意大利语、繁体中文、简体中文和韩语；店面跟随商店的语言。
分区文本、产品和页面等您自己的内容，请使用 Shopify 的免费应用 Translate & Adapt 翻译。应用
13. 更新模板
发布新版本后，在线商店 → 模板 中的模板上会显示更新通知。更新会保留您在模板编辑器中的设置和内容。模板代码的修改不会保留，所以请在更新前记下您做过的更改。
14. 模板不包含的内容
- 照片和视频。 Shopify 模板不能附带媒体文件，演示照片也仅授权给演示站使用。缺少照片的地方会显示灰色的占位图。
- 产品、文章、页面、元字段定义。 这些是商店数据。本指南列出了模板可以使用的全部内容。
- 应用。 不需要任何应用。Translate & Adapt 仅在需要更多语言时使用；订阅应用仅在您销售订阅时才需要。