設定 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 | RTF 文字 |
stats | Fabric stat 清單 |
views_heading、views_note、face_title、face_tag、back_title、back_tag | 單行文字 |
views_body、face_body、back_body | RTF 文字 |
face_image、back_image | 檔案（圖片） |
how_heading | 單行文字 |
how_body | RTF 文字 |
steps | Fabric step 清單 |
charts | Fabric chart 清單 |
note | 多行文字 |
Fabric stat：value、unit、label、prefix（皆為單行文字）。顯示為一排大數字，例如 value 90、unit g/㎡、label 重量。
Fabric step：image（檔案）、title（單行文字）、body（RTF 文字）。三個步驟組成「運作原理」的橫條。
Fabric chart：title（單行文字）、body（RTF 文字）、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 只在需要更多語言時使用；訂閱應用程式只在您販售訂閱時才需要。