範本
範本是一組已設定好的 sections,可讓您的網路商店維持一致的設計與風格。範本中可用的區段取決於您的佈景主題。在佈景主題編輯器中,您可以查看各頁面套用的範本,並編輯範本,自訂要向顧客顯示的資訊。
您的佈景主題包含不同內容類型的範本。這些範本類型包含區段與區塊,會從 Shopify 管理介面相應的區域動態擷取內容。例如,佈景主題的商品頁面範本會為 Shopify 管理介面商品區段中已發佈至網路商店的每項商品建立一個頁面。
當您編輯範本時,變更會套用到所有使用該範本的頁面。例如,若您在商品系列範本中新增訂閱電子報表單,所有使用預設商品系列範本的商品系列頁面都會顯示該訂閱電子報表單。
您可以在佈景主題編輯器的選單列中使用頁面選擇器,存取佈景主題的所有範本。

預設範本
每個預設範本都有自己的預設區段與設定,您可以在 佈景主題編輯器 中編輯與自訂。舉例來說,產品頁面預設包含 產品資訊 區段與 相關產品 區段。各個佈景主題的可用自訂設定取決於佈景主題的開發人員與佈景主題版本。進一步瞭解如何查詢您的 佈景主題版本。
這些範本在您的佈景主題中預設可用。
產品
佈景主題的產品頁面會顯示您在商店販售的 商品 資訊,也是顧客購買商品的頁面。
在佈景主題編輯器中,產品頁面預設包含 產品資訊 區段與 相關產品 區段。
產品資訊 區段會顯示您的商品詳情,例如標題、說明、價格和圖片。您可以在 Shopify 管理介面的 產品 頁面管理商品。
商品系列
您的佈景主題商品系列頁面會顯示您在 Shopify 管理介面中「產品」>「商品系列」頁面上所建立的商品系列。
在佈景主題編輯器中,商品系列頁面預設包含 商品系列橫幅 區段與 產品網格 區段。
商品系列清單
商品系列清單頁面會顯示所有已在「線上商店」銷售管道中提供的商品系列。例如,若您經營珠寶商店,您可以在選單中加入一個指向商品系列清單頁面的連結,讓顧客依珠寶類型 (例如戒指或項鍊) 瀏覽。您需要為每個類別建立對應的商品系列。
禮品卡
當您建立 禮品卡,或顧客訂購禮品卡商品時,禮品卡的各項詳情(例如面額或餘額與兌換代碼)都會顯示在禮品卡頁面中。
禮品卡頁面屬於您的佈景主題的一部分。您可以 自訂佈景主題,以新增或調整禮品卡頁面的樣式與資訊。
禮品卡面額與兌換代碼無法自訂。
頁面
您可以在 Shopify 管理介面中建立自訂 頁面,為顧客提供內容,例如 關於我們頁面,或提供商品的額外資訊。
購物車頁面
網路商店中的購物車頁面是顧客檢視已加入購物車品項的地方。
在佈景主題編輯器中,購物車頁面預設包含 品項 區段與 小計 區段。
網誌
網路商店中的網誌頁面是您在 Shopify 管理介面建立之各個 網誌 的首頁,並會顯示該網誌中所有已發佈的文章。
在佈景主題編輯器中,網誌頁面預設包含 網誌文章 區段。
網誌文章
網路商店中的網誌文章頁面會顯示您在 Shopify 管理介面的 內容 > 部落格貼文 頁面建立的 網誌文章 內容。預設情況下,網誌文章頁面在佈景主題編輯器中包含 網誌文章 區段。
搜尋頁面
搜尋頁面是顧客在您的網路商店中搜尋並找到特定商品、頁面或網誌文章的地方。
在佈景主題編輯器中,搜尋頁面預設包含 搜尋結果 區段。
除了 搜尋結果 區段的設定外,您也可以檢視並自訂部分 與搜尋行為相關的佈景主題設定,也可以新增自己的 區段專用 自訂 CSS。
密碼頁面
您可以在 Shopify 管理介面的 線上商店 > 偏好設定 頁面將商店設為受密碼保護。若商店已啟用密碼保護,訪客進入您的網路商店時會看到 密碼頁面。密碼頁面範本具有專屬的頁首與頁尾。您可以在佈景主題編輯器中自訂密碼頁面範本。
404 頁面
當顧客嘗試造訪您網站上不存在的連結時,會顯示 404 頁面,例如連到您已從商店刪除之商品的產品頁面。
此頁面沒有可自訂的設定,但您可以在佈景主題編輯器中為 404 頁面新增自己的 區段專用 自訂 CSS。
編輯您的範本
您可以編輯範本,將區段加入網路商店。部分區段包含可進一步自訂的區塊,但不是每個 區段或區塊 都有可編輯的設定或內容。當您編輯範本時,變更會即時顯示在佈景主題編輯器的預覽畫面中。
步驟:
電腦版
在 Shopify 管理介面中,前往 線上商店 > 佈景主題。
找到要編輯的佈景主題,然後按一下 編輯佈景主題。
按一下 首頁 下拉式選單,然後選取要編輯的範本。
若要在該範本中新增區段,按一下 新增區段,然後為範本選取要加入的新區段。
選用:若要在新區段中新增區塊,按一下 新增區塊,然後為該區段選取新的區塊。
按一下新區段與區塊,查看其設定與選項,然後進行變更。
按一下儲存。
行動裝置
在 Shopify app 中,點選
圖示。
在銷售管道區段中,點選網路商店。
點選管理所有佈景主題。
找到您要編輯的佈景主題,然後點選編輯佈景主題。
點選首頁下拉式選單,然後選取您要編輯的範本。
若要在範本中加入新區段,點選區段 > 新增區段,選取要用於範本的新區段,然後點選新增。
選用:若要在新區段中加入區塊,點選新增區塊,然後選取要用於該區段的新區塊。
點選新區段與區塊,查看其設定與選項,然後進行變更。
點選儲存或✓。
建立新範本的注意事項
在 create a new template 之前,請先檢視以下注意事項:
- 商品、商品系列、頁面、網誌與網誌文章都可以擁有多個範本,但總數最多為 1,000 個範本。
- 僅能使用 compatible theme 建立新範本。
- 所有佈景主題都包含商品系列、商品、網誌、網誌文章與頁面的預設範本。除非您建立替代範本,商店中的資源與內容會使用這些預設範本顯示。
- 您對範本所做的任何變更都會影響所有使用該範本的頁面。若您希望某類型中的部分頁面有不同的呈現方式,可以以佈景主題中的既有範本為基礎建立新範本。
- 從既有範本建立新範本時,新範本會自動載入與現有範本相同的區段。接著您可視需要移除、加入或隱藏區段,並編輯其內容,而不影響使用現有範本的頁面顯示。
建立新範本
電腦版
在 Shopify 管理介面中,前往 線上商店 > 佈景主題。
找到要編輯的佈景主題,然後按一下 編輯佈景主題。
按一下首頁下拉式選單,選取範本類型,然後按一下建立範本。
在建立範本對話方塊中,請執行下列步驟:
- 在名稱欄位中,輸入新範本的唯一名稱。
- 在根據下拉式選單中,選取要作為新範本基礎的既有範本。
按一下建立範本。
行動裝置
在 Shopify app 中,點選
圖示。
在銷售管道區段中,點選網路商店。
點選管理所有佈景主題。
找到您要編輯的佈景主題,然後點選編輯佈景主題。
點選首頁下拉式選單,選取範本類型,然後點選建立範本。
在建立範本對話方塊中,請執行下列步驟:
- 在名稱欄位中,輸入新範本的唯一名稱。
- 在根據下拉式選單中,選取要作為新範本基礎的既有範本。
點選建立範本。
建立新範本後,您可以 apply the template 到要使用的網路商店頁面。
為 metaobject 建立範本
您可以為 metaobject 建立網頁範本。若要使用此功能,請完成以下步驟:
- Create a metaobject definition,並啟用 Storefront access,且可選擇 activate the Web pages feature manually。建立佈景主題範本時,佈景主題編輯器會啟用 Web pages 功能。
- 請 Create entries for the metaobject definition。
現在您可以 create a metaobject template in the theme editor。
預覽範本
您可以使用範本預覽,查看套用不同範本後,網路商店資源 (例如商品與頁面) 呈現給顧客的方式。
範本會在商品、商品系列、頁面、網誌或網誌文章的層級進行指派。您可在佈景主題編輯器中 create 與 edit 範本,但需在 Shopify 管理介面中 change a resource's assigned template。
預覽範本的注意事項
在為網路商店中的各類資源預覽範本時,請留意以下細節:
- 在佈景主題編輯器中預覽商品範本時,您可以使用狀態為啟用或草稿的商品,但無法預覽狀態為封存的商品。
- 在佈景主題編輯器中預覽商品系列範本時,您需要確保該商品系列已啟用「線上商店」作為銷售管道。如果商品系列未將「線上商店」啟用為銷售管道,則您無法在佈景主題編輯器中使用任何商品系列範本預覽該商品系列。
- 在佈景主題編輯器中預覽頁面範本時,您可以使用可見度設為可見或隱藏的頁面。
- 在佈景主題編輯器中預覽網誌文章範本時,您可以使用可見度設為可見或隱藏的網誌文章。
網誌沒有不同的狀態或可見度參數,因此您可以使用網誌範本預覽網路商店中任何已發佈的網誌。
預覽其他範本
您可以預覽商品、商品系列、頁面、網誌或網誌文章在套用不同範本後的顯示方式。
步驟:
電腦版
在 Shopify 管理介面中,前往 線上商店 > 佈景主題。
找到您要用來預覽範本的佈景主題,然後按一下編輯佈景主題。
按一下首頁下拉式選單,然後選取您要使用的範本。
在佈景主題編輯器側邊欄的預覽區段中,按一下變更。
按一下您要以所選範本預覽的資源。
行動裝置
在 Shopify app 中,點選
圖示。
在銷售管道區段中,點選網路商店。
點選管理所有佈景主題。
找到您要用來預覽範本的佈景主題,然後點選編輯佈景主題。
點選首頁下拉式選單,然後選取您要使用的範本。
若要選取要用此範本預覽的資源,請再次點選下拉式選單。
在 搜尋線上商店 欄位中,輸入您要使用所選範本預覽的資源名稱。
在搜尋結果清單中選取該資源。
預覽特定資源
您可以預覽範本在商店中任何相容資源上的顯示效果。例如,若您正在檢視商品範本,就能以商店中的任一商品進行測試。
您仍需在 Shopify 管理介面中將範本指派給該資源。
您也可以透過頁面選擇器中的 搜尋 列、新增區段 或 新增區塊 工具,或在 應用程式嵌入 中搜尋範本與資源。
步驟:
在 Shopify 管理介面中,前往 線上商店 > 佈景主題。
在要編輯的佈景主題旁,按一下 編輯佈景主題。
在範本選單中,選取要預覽的範本。
在側邊欄選單的 預覽 區域,按一下 變更。
在 選取 選單中,選取要預覽的資源。
套用新範本
您可以在已發佈的佈景主題中,變更下列類型所指派的範本:
- 頁面
- 商品
- 商品系列
- 網誌
- 網誌文章
您需要在 Shopify 管理介面中變更已指派的範本。畫面僅會顯示您當前佈景主題中可用的範本選項。
商品與商品系列的範本可針對單一品項指派,或使用 Bulk editor 同時指派給多個品項。
將新範本套用到頁面
電腦版
在 Shopify 管理介面中,前往 線上商店 > Pages。
按一下要套用新範本的頁面。
在 線上商店 區域,按一下 佈景主題範本 下拉式選單,然後選取要套用到頁面的範本。
按一下儲存。
行動裝置
在 Shopify app 中,點選
圖示。
在銷售管道區段中,點選網路商店。
點選 頁面。
點選要套用新範本的頁面。
在 線上商店 區域,點選 佈景主題範本 下拉式選單,然後選取要套用到頁面的範本。
點選儲存或✓。
將新範本套用到商品
電腦版
在 Shopify 管理介面中,前往 Products。
按一下要套用新範本的商品。
在 佈景主題範本 區域中,按一下下拉式選單,然後選取要套用到商品的範本。
按一下儲存。
行動裝置
- 在 Shopify app 中,點選
圖示 .
- 點選要套用新範本的商品。
- 點選 線上商店範本。
- 選取要套用到商品的範本。
- 點選儲存或✓。
將新範本套用到商品系列
在 Shopify 管理介面中,前往 商品 > Collections。
按一下要套用範本的商品系列。
在 佈景主題範本 區域中,按一下下拉式選單,然後選取要套用到商品系列的範本。
按一下儲存。
將新範本套用到網誌
電腦版
- 在 Shopify 管理介面中,前往 內容 > Blog posts。
- 按一下 管理網誌。
- 按一下要套用範本的網誌。
- 在 線上商店 區域,按一下 佈景主題範本 下拉式選單,然後選取要套用到網誌的範本。
- 按一下儲存。
行動裝置
在 Shopify app 中,點選
圖示。
在 內容 選單中,點選
圖示,然後點選 網誌文章。
點選
或
> 管理網誌。
點選要套用範本的網誌。
在 線上商店 區域,點選 佈景主題範本 下拉式選單,然後選取要套用到網誌的範本。
點選儲存或✓。
將新範本套用到網誌文章
電腦版
在 Shopify 管理介面中,前往 內容 > Blog posts。
按一下要套用範本的網誌文章。
在 線上商店 區域,按一下 佈景主題範本 下拉式選單,然後選取要套用到網誌的範本。
按一下儲存。
行動裝置
在 Shopify app 中,點選
圖示。
在 內容 選單中,點選
圖示,然後點選 網誌文章。
點選要套用範本的網誌文章。
在 線上商店 區域,點選 佈景主題範本 下拉式選單,然後選取要套用到網誌文章的範本。
點選儲存或✓。
大量套用新範本到商品或商品系列
您可以使用 Bulk editor,一次將新範本套用到多個商品或商品系列。
大量套用新範本到商品
在 Shopify 管理介面中,前往 Products。
若要同時編輯多個商品,請採取下列其中一種方式:
- 若要逐一選取商品,請勾選每個商品的核取方塊。
- 若要選取一段範圍的商品,先按一下一個商品以選取,然後按住 Shift 鍵再按一下另一個商品。系統會選取您按的第一個與最後一個商品,以及兩者之間的所有商品。
- 若要選取此頁面上的所有商品,請勾選產品清單頂端的核取方塊。
- 若要選取商店中的所有商品,請勾選產品清單頂端的核取方塊,然後按一下 選取此商店中的所有商品。
按一下 大量編輯。
在大量編輯器中,按一下 欄 下拉式選單,然後在 一般 區段中選取 範本。
按一下 範本 欄的第一個欄位,然後按住 Shift 鍵,再按一下 範本 欄的最後一個欄位。系統會在您選取的項目周圍顯示藍色陰影。
按一下您選取的第一個欄位,從下拉式選單選取您要的範本,然後按一下 儲存。
將新範本批次套用至商品系列
在 Shopify 管理介面中,前往 商品 > Collections。
若要同時編輯多個商品系列,請採用下列其中一種方式:
- 若要逐一選取商品系列,請勾選每個商品系列的核取方塊。
- 若要選取一段範圍的商品系列,先按一下以選取其中一個商品系列,接著按住 Shift 鍵並按一下另一個商品系列。系統會選取您按下的第一個和最後一個商品系列,以及中間的全部商品系列。
- 若要選取頁面上的所有商品系列,請勾選商品系列清單頂端的核取方塊。
- 若要選取商店中的所有商品系列,請勾選商品系列清單頂端的核取方塊,然後按一下 在此商店全部選取。
按一下 大量編輯。
在大量編輯器中,按一下 欄 下拉式選單,然後在 一般 區段中選取 範本。
按一下 範本 欄的第一個欄位,然後按住 Shift 鍵,再按一下 範本 欄的最後一個欄位。系統會在您選取的項目周圍顯示藍色陰影。
按一下您選取的第一個欄位,從下拉式選單選取您要的範本,然後按一下 儲存。
管理您的範本
若要重新命名或刪除範本,您需要使用 程式碼編輯器。編輯範本檔案可能會對您的網路商店造成問題。
刪除範本後,凡是已指定使用該範本的網路商店資源,都會改為顯示預設範本,直到您指定其他範本為止。
重新命名範本
在 Shopify 管理介面中,前往 線上商店 > 佈景主題。
找出包含您要重新命名之範本的佈景主題,然後按一下 … > 編輯程式碼。
在程式碼編輯器中,找到 templates 資料夾。
在您要重新命名的範本檔案上按一下滑鼠右鍵,從下拉式選單選取 重新命名...。
輸入檔案的新名稱。
在鍵盤上按下
Enter。
刪除範本
在 Shopify 管理介面中,前往 線上商店 > 佈景主題。
找出您要從中刪除範本的佈景主題,然後按一下 … > 編輯程式碼。
在程式碼編輯器中,找到 templates 資料夾。
在您要刪除的範本檔案上按一下滑鼠右鍵,從下拉式選單選取 永久刪除。
按一下 刪除。