Express 區段

佈景主題內容是使用區段建立而成的。區段即是可以決定網路商店中各頁面版面配置和外觀的可自訂內容方塊。您可以使用新版佈景主題編輯器新增、編輯和自訂區段

Shopify 的佈景主題包含下列類型的區段:

  • 靜態區段:顯示於網路商店中預定地點的區段,您無法移除或重新排列這些區段。靜態區段可能包含頁首、頁尾、導覽區段,或像產品頁面、商品系列頁面等頁面中的內容區段。例如,「產品」區段會決定網路商店中每個產品頁面的外觀。
  • 動態區段:可用於自訂首頁版面配置的選用區段。 您可以在商店首頁新增重新排列移除動態區段,以建立頁面版面配置。您可以在首頁上新增最多 25 個動態區段。

您可以瞭解Express的獨特區段集和如何按照公司風格自訂這些區段的方法。

秘訣:如果您使用 Shopify 的免費佈景主題,若要查看其區段和設定的詳細說明,您可以前往 Shopify 的免費佈景主題並按一下您的佈景主題名稱。

若要瞭解付費佈景主題中的區段和設定,請參閱佈景主題的說明文件

靜態區段

Express 包含下列靜態區段:

動態區段

Express 包含下列動態區段:

標頭

您佈景主題的標頭是顯示在商店每個頁面頂部的區段。

您可以在標頭中自訂以下項目:

  • 商標
  • 公告列
  • 選單
  • 搜尋
  • 頁首樣式

新增自訂標誌

您可以將自訂標誌圖片新增至商店的頁首。最佳格式是有透明背景的 .png 檔案。標誌的最大寬度為 180px。您可以藉由增加或縮減寬度來調整標誌圖片的大小。

若您不想新增標誌圖片,則會改為顯示您的商店名稱文字。您可以在 Shopify 管理介面的「一般設定」頁面中變更商店名稱。

  • 自訂標誌寬度:標誌的寬度。 - 標誌對齊:頁首中標誌的對齊方式。選取靠左置中

新增並設定標誌

  1. 點擊「頁首」。2. 在「標誌圖片」區域中,點擊「選取圖片」,然後執行下列任一操作:* 若要選取已上傳到 Shopify 管理介面中的圖片,請點擊「圖庫」分頁。* 若要從本機電腦中選取圖片,請點擊「圖庫」>「上傳」。3. 使用此設定來自訂標誌的尺寸和位置。4. 點擊「儲存」。

新增公告列

您可以在頁首新增公告列,以向顧客顯示訊息。訊息內容可以自訂,可包含聯絡資訊、商店活動或促銷相關資訊,還有商店標語。

  1. 點擊「標頭」。
  2. 在「公告列」區域中,勾選「顯示公告」。
  3. 輸入公告文字。
  4. 選用:輸入網址以新增公告連結。(版本 1.11.0+)
  5. 選用:在「圖示」選單中,選取圖示以顯示於公告列。圖示會使用與公告文字相同的顏色。
  6. 若要變更公告列背景的顏色,請點擊「」顏色色樣並選擇顏色。
  7. 若要變更公告文字的顏色,請點擊「文字」顏色色樣並選擇顏色。
  8. 點擊「儲存」。

新增選單

您可以將選單新增至頁首。這樣會在頁首顯示所有選單上的連結,用來凸顯顧客想要存取的常見頁面。例如,您可以新增連結至商品系列的選單。

  1. 點擊「標頭」。

  2. 若要選取選單,請點擊「變更」。從清單中選取選單或點擊「建立選單」來建立新選單。

  3. 若要編輯選單中,請點擊「編輯選單」。

  4. 點擊「儲存」。

啟用搜索

您可以在標頭新增搜尋選項,可讓顧客可以在您的商店快速找到商品。

  1. 點擊「標頭」。
  2. 請勾選「顯示搜尋」。
  3. 點擊「儲存」。

針對頁首使用次要顏色

您可以選取啟用次要背景和文字顏色,以在頁首使用次要背景和文字顏色

頁尾

您佈景主題的頁尾是顯示在商店每個頁面底部的區段。 您可以在頁尾加入以下功能:

  • 付款圖示
  • 選單
  • 訂閱電子報
  • 文字區段包含有關您商家的資訊
  • 社交媒體圖示
  • 語言選擇器

新增付款圖示

您可以在頁尾顯示您接受的付款方式圖示。此區域會顯示與付款服務供應商相關聯的圖示,您已在管理員介面中的「付款設定」區段中將其啟用。

  1. 點擊「頁尾」。

  2. 勾選「顯示付款圖示」。

  3. 點擊「儲存」。

新增選單、訂閱電子報或文字

  1. 點擊「頁尾」。

  2. 若要新增內容區塊,請在「內容」區域,點擊「新增內容」。從以下選項中選取區塊類型:

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text

您最多可以新增 4 個內容區塊。

若要移除內容區塊,請點擊該區塊,然後點擊「移除內容」。

若要自訂內容區塊,請點擊區塊並編輯其設定。

  1. 點擊「儲存」。

新增社群媒體圖示

  1. 點擊「佈景主題設定」。

  2. 點擊「社交媒體」。

    1. 若要上傳社群分享圖片,請在「社群分享圖片」區域中,點擊「選取圖片」或「探索免費圖片」。
  3. 若要為您的產品和部落格文章新增社群分享按鈕,請勾選下列任一選項或所有選項:

- 分享至 Facebook - 在 Twitter 上發佈推文 - 在 Pinterest 上收藏為釘圖 (不適用於部落格貼文分享)

  1. 若要新增您社群媒體帳號的連結,請在「帳號」底下顯示的欄位輸入您的帳號連結。請輸入完整的連結,例如:https://instagram.com/shopifyhttps://twitter.com/shopify

    1. 若要變更分享按鈕的樣式,請從「按鈕樣式」選單中選取「完整品牌標記」或「僅限標誌」。
  2. 點擊「儲存」。

新增語言選擇器

如果您已啟用多個商店語言,則只應新增一個語言選擇器。

  1. 點擊「區段」。

  2. 點擊「頁尾」。

  3. 在「語言選擇器」下方,選取「顯示語言選擇器」。

  4. 點擊「儲存」。

產品

買家點擊一項精選商品系列中的產品時,即會顯示產品頁面。此頁面會顯示產品說明、價格、子類和圖片。您可以選擇將使用者導向新頁面,或在首頁使用疊加層顯示產品詳細資訊。此設定由佈景主題設定管控。若啟用「在疊加層中顯示產品頁面」功能,顧客從精選商品系列選取產品後,產品頁面即會以疊加層的形式顯示。

如果您已啟用到店取貨,並已停用以疊加層顯示產品頁面,則此區段也會顯示產品的取貨服務供應情況

「產品」區段包括以下設定:

  • 顯示數量選擇器 - 讓使用者指定要新增至購物車的數量。
  • 顯示廠商 - 在產品頁面中顯示產品品牌或廠商。如要展示品牌或廠商,您需要為產品新增廠商
  • 顯示動態結帳按鈕 - 讓顧客可以略過購物車,並從精選產品區段直接前往結帳頁面。
  • 使用疊加層顯示產品頁面 - 選取此選項,即可在當前頁面使用疊加層顯示產品詳細資訊。顧客選取一項精選商品系列中的產品時,即會顯示此疊加層。
  • 顯示社群分享按鈕 - 顯示顧客可用來將產品分享至社群媒體的按鈕。這些按鈕是由「佈景主題設定」所控制。

編輯產品設定

  1. 按一下「產品」。
  2. 使用設定來自訂您的產品頁面。
  3. 點擊「儲存」。

顯示取貨服務供應情況

版本 1.11.0+

Express 可讓您向顧客顯示您線上商店中的某件產品是否提供到店取貨服務。在每個產品頁面上,取貨服務供貨情況區段會顯示該產品是否開放到店取貨和取貨所需的預估時間範圍。 此資訊僅在以疊加層顯示產品頁面停用時出現。

若要使用此功能,您必須設定「到店取貨」。如果啟用到店取貨,則此功能一律會顯示在產品頁面上,且無法停用。

啟用到店取貨服務後,產品頁面即會顯示到店取貨地點的產品是否可供取貨。此資訊僅會顯示於存放在一個以上取貨地點的產品,且該產品在「運送區段」的產品子類詳細資訊中,「這是實體產品」的選項已選取。

若要為產品子類選項選取「這是實體產品」,請執行下列操作:

  1. 在 Shopify 管理介面中,前往「產品」 > 「所有產品」。

  2. 選取產品

  3. 在「子類」下方,選取子類。

  4. 在「運送」下方,勾選「這是實體產品」。

  5. 點擊「儲存」。

若您僅在一個地點啟用到店取貨服務,則系統會顯示該地點的位置以及取貨服務供應情況。顧客可以點擊「檢視商店資訊」以深入瞭解取貨地點資訊。

若您有多個地點啟用到店取貨服務,則系統會根據顧客的 IP 位址,在取貨服務供應情況區段中顯示距離顧客最近地點的位置和取貨服務供應情況。若顧客點擊「查看其他商店的供應情況」,則會顯示取貨地點清單,並按照距離顧客所在地點遠近排序。

若系統無法從顧客的 IP 位址判斷顧客所在地點,則取貨服務供應情況區段會按照地點的字母順序 (判斷順序依序為城市、地點),列出地點和取貨服務供應情況。例如,假設您有三個取貨地點:多倫多 (Toronto)「Queen Street」、多倫多「Front Street」和渥太華 (Vancouver)「Alberni Street」,則在取貨服務供應情況區段會顯示多倫多「Front Street」的詳細資訊。

商品推薦

您可以在產品頁面顯示推薦產品,讓客戶輕鬆發掘其他符合興趣的產品。

若您已在產品頁面啟用「使用疊加層顯示產品頁面」,則在存取此區段時,產品即會以疊加層的形式於當前頁面顯示。

啟用產品推薦功能

  1. 選取「產品頁面」。

  2. 點擊「產品推薦」區段。

  3. 勾選「顯示動態推薦的應用程式」以在產品頁面上顯示推薦產品。

  4. 選用:若要變更推薦產品上方顯示的標題,請在「標題」欄中輸入新標題。

    1. 選用:若您希望顧客從「產品推薦」區塊中直接將產品加入購物車,請選取「啟用「快速購買」按鈕」。
    2. 選用:若要在產品說明中顯示或隱藏廠商,請使用「顯示廠商」核取方塊。
  5. 點擊「儲存」。

商品系列範本

商品系列範本」區段是商品系列頁面的主要可自訂區段。

「商品系列範本」區段包含下列設定:

  • 顯示商品系列圖片 - 在商品系列頁面最上方顯示商品系列圖片。
  • 顯示商品系列說明 - 在商品系列頁面最上方顯示商品系列說明。(版本 1.11.0+)
  • 顯示產品廠商 - 在產品卡上顯示產品品牌或廠商。

自訂您的商品系列頁面

  1. 選取「商品系列」。
  2. 點擊「商品系列範本」區段。
  3. 使用此設定來自訂商品系列範本區段。
  4. 點擊「儲存」。

橫幅

版本 1.11.0+

您可以建立橫幅,其中包含自訂圖片、文字和連結到商店中其它位置的按鈕。您可以使用橫幅凸顯您的品牌、精選特定商品系列或宣傳促銷活動。

設定

  • 圖片 - 新增圖片至此區段。您可以上傳圖片、使用之前上傳的圖片,或從 Burst 中選取免費的圖庫圖片。
  • 標題 - 將主要文字新增至橫幅。
  • 標題大小 - 選取標題文字的大小。
  • 說明 - 將說明新增至橫幅。
  • 按鈕標籤 - 新增要顯示在按鈕上的文字。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在橫幅中加上按鈕,請將此欄位保留空白。

版面配置選項

  • 橫幅高度 - 選取橫幅區段的高度。
  • 橫幅寬度 - 選取橫幅區段的寬度。
  • 圖片對齊方式 - 選取圖片在區段中的對齊方式。
  • 文字方塊對齊方式 - 選取文字方塊在區段中的對齊方式。

    如果文字方塊是靠左或靠右對齊,文字就會靠左對齊。如果文字方塊是置中對齊,則文字也是置中對齊。

顏色設定

  • 文字方塊背景 - 選取文字方塊的顏色。
  • 文字 - 選取橫幅中標題和按鈕的顏色。橫幅說明使用您佈景主題的內文文字顏色,可以在佈景主題設定中修改此設定。

新增橫幅區段

  1. 按一下「新增區段」。
  2. 點擊「橫幅」,然後點擊「選取」。
  3. 使用此設定來自訂橫幅區段。
  4. 點擊「儲存」。

精選商品系列

您可以在首頁的單一區段中,展示多個商品系列。商品系列會以分頁形式顯示,顧客可以在不同分頁來回導覽。

顧客將一或多個產品從精選商品系列加入購物車時,產品已新增的數量會以徽章形式顯示在產品上。

包含多個商品系列的精選商品系列區段。商品系列名稱會在區段上方顯示為可點擊的索引標籤。

精選商品系列區段包含下列設定:

  • 商品系列 - 選擇要包含在精選商品系列中的商品系列。
  • 商品系列清單大小 - 選擇要依照預設顯示產品數量。此設定適用於所有在「精選商品系列」區段中的商品系列。 - - 6 項產品

    • - 18 項產品
    • - 36 項產品
  • 圖片樣式 - 選擇商品系列中的產品圖片的圖片裁剪樣式。此設定適用於所有區段中的商品系列。

  • 啟用「快速購買」按鈕 - 新增選項讓顧客可以直接從「精選商品系列」區段將產品加入購物車。

  • 顯示商品系列圖片 - 在精選商品系列分頁最上方顯示商品系列圖片。(版本 1.11.0+)

  • 顯示商品系列說明 - 在精選商品系列分頁最上方顯示商品系列說明。(版本 1.11.0+)

秘訣:若顧客點擊某項產品的「精選商品系列」區段,則會在首頁上開啟疊加層。如需深入瞭解更多資訊,請參閱 變更的產品頁面的樣式

將精選商品系列區段新增至首頁

  1. 按一下「新增區段」。
  2. 點擊「精選商品系列」,然後點擊「選取」。
  3. 在內容區域中,選取一個「商品系列」區塊,或點擊「新增商品系列」。
  4. 點擊「選取商品系列」。
  5. 在「商品系列」清單中,選取您要顯示於分頁中的商品系列,然後點擊「選取」。

    如要新增商品系列,請點擊「新增商品系列」連結,即可在新分頁中開啟「建立商品系列」頁面。

    若要從所選商品系列中新增或刪除產品,請點擊「編輯商品系列」連結,即可在新分頁中打開「商品系列」頁面。

  6. 重複上列步驟,以新增更多商品系列至此區段。

  7. 點擊「儲存」。

秘訣:若要變更區段中商品系列分頁的順序,請重新排列「內容」區域中的商品系列。請點擊商品系列的「拖放式控制代碼」⋮⋮,並將該區塊拖曳至其他位置。

精選產品

您可以在首頁上展示商品。展示產品是宣傳新產品或促銷產品的好方式。顧客可使用圖片下方的左右箭頭檢視其他產品圖片。

精選產品區段包括下列設定:

  • 產品 - 選取要在首頁展示的精選產品。
  • 顯示數量選擇器 - 讓使用者指定要新增至購物車的數量。
  • 顯示廠商 - 在精選產品區段顯示產品品牌或廠商。若要顯示品牌或廠商,您必須為產品新增廠商
  • 顯示動態結帳按鈕 - 讓顧客可以略過購物車,並從「精選產品」區段直接前往結帳頁面。
  • 顯示社群分享按鈕 - 顯示顧客可用來將產品分享至社群媒體的按鈕。這些按鈕是由「佈景主題設定」所控制。
  • 圖片樣式 - 選擇將精選產品圖片以方形或圓形裁剪。

新增精選產品區段

  1. 按一下「新增區段」。
  2. 點擊「精選產品」,然後點擊「選取」。
  3. 使用設定來自訂您的精選產品區段。
  4. 點擊「儲存」。

自訂內容

在「自訂內容」區段中,您可以將多個內容區塊集合在一起。也可以調整每個區塊的寬度和對齊方式,以建立自訂版面配置。

自訂內容」區段包含以下設定:

  • 標題 - 區段的標題。

  • 行動版的版面配置 - 透過行動裝置檢視您商店時的區塊版面配置。可選擇以下選項:

    • 格狀 - 寬度為 50% 以下的區塊會顯示在同一列。寬度超過 50% 的容器則會顯示在各自的資料列中。
    • 堆疊 - 每個區塊會顯示在各自的資料列中。
    • 投影播放器 - 區塊會收合至單一素材輪播樣式區段。顧客可以透過點擊導覽箭頭來檢視其他區塊。

您可以選擇以下區塊類型。

自訂內容區塊的類型
區塊類型 設定
文字

標題 - 為文字區塊加上標題。

文字 - 新增自訂文字並設定其格式。

按鈕標籤 - 將含有文字標籤的按鈕新增至區塊。

按鈕連結 - 新增要顯示在按鈕上的文字。

文字大小 - 設定文字的大小。

容器寬度 - 設定區塊的寬度。

垂直對齊 - 設定此區塊中內容的垂直位置。

水平對齊 - 設定區塊中內容的水平位置。

圖片

圖片 - 新增要顯示在此區塊中的圖片。您可以上傳圖片、使用之前上傳的圖片,或從 Burst 中選取免費圖庫圖片。

容器寬度 - 設定區塊的寬度。

垂直對齊 - 設定此區塊中內容的垂直位置。

產品

產品 - 選擇產品以將其加入區塊中的精選項目。在區塊上會顯示產品名稱、圖片和價格。若該產品沒有圖片,則會在區塊中顯示其標題。

容器寬度 - 設定區塊的寬度。

垂直對齊 - 設定此區塊中內容的垂直位置。

若您已在產品頁面啟用「使用疊加層顯示產品頁面」,則在存取此區段時,產品即會以疊加層的形式於當前頁面顯示。

商品系列

商品系列 - 選擇商品系列以將其加入區塊中的精選項目。在區塊上會顯示商品系列標題和主要圖片。若該商品系列沒有主要圖片,則會在區塊中顯示商品系列第一個產品的圖片。若該商品系列中所有產品皆無圖片,則會在區塊中顯示商品系列的標題。

容器寬度 - 設定區塊的寬度。

垂直對齊 - 設定此區塊中內容的垂直位置。

選單

選單 - 選取要在區塊中顯示的選單。

標題 - 為選單加上標題。

容器寬度 - 設定區塊的寬度。

垂直對齊 - 設定此區塊中內容的垂直位置。

水平對齊 - 設定區塊中內容的水平位置。

將自訂內容新增至首頁

  1. 按一下「新增區段」。

  2. 點擊「自訂內容」,然後點擊「選取」。

  3. 選取和設定要包含在區段中的內容區塊。

  4. 點擊「儲存」。

附文字的圖片

使用 Express 時,您可以新增圖片,並在圖片右側或左側顯示文字。您也可以新增按鈕連結至其他頁面。

您可以使用附文字圖像區段來宣傳特定產品或商品系列。

附文字圖片區段包括下列設定:

  • 圖片 - 新增圖片至此區段。您可以上傳圖片、使用之前上傳的圖片,或從 Burst 中選取免費圖庫圖片。
  • 標題 - 新增搭配圖片的主要文字。
  • 文字 - 新增搭配圖片的次要文字。這段文字會顯示於標題文字下方。
  • 按鈕標籤 - 新增要顯示在按鈕上的文字。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕,請將此欄位保留空白。

版面配置選項

  • 桌面 - 選擇以桌上型電腦檢視時,區段中的圖片要顯示在左側還是右側。若要在左側顯示圖片,請選取「先顯示圖片」。
  • 行動版 - 選擇行動裝置檢視時,區段中的圖片要顯示在第一位還是第二位。
  • 次要背景 - 選擇是否要新增次要背景顏色至此區段。選取「部分」便能將背景顏色新增至區段中的上五分之三處。此顏色可以在「佈景主題設定」中進行修改。
  • 文字大小 - 選擇此區段中標題和文字的相對大小。
  • 維持圖片比例 - 選取此選項可防止選取的圖片遭裁剪。如果您未勾選此選項,該圖片就會被裁剪成正方形。
  • 啟用次要文字顏色 - 選取此選項即可將次要背景文字顏色用於標題和文字。此顏色可以在「佈景主題設定」中進行修改。

將附文字圖像區段新增至首頁

  1. 按一下「新增區段」。
  2. 點擊「附文字圖像」,然後點擊「選取」。
  3. 在「圖片」區域中,點擊「選取圖片」,然後執行下列任一操作:- 若要選取已上傳至 Shopify 管理介面的圖片,請點擊「圖庫」分頁。
  4. 若要從 Burst 中選取圖庫圖片,請點擊「免費圖片」分頁。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。
  5. 若要從電腦本機中選取圖片,請點擊「圖庫」分頁,然後點擊「上傳」。

  6. 使用設定自訂區段。

  7. 點擊「儲存」。

多欄

版本 1.11.0+

使用 Express 時,您可以新增多欄內容的區段。您可以為每個多欄區段新增最多四個欄位。

多欄區段包含下列設定:

欄設定

  • 圖片 - 在此欄中新增圖片
  • 標題 - 將主要文字新增至此欄。
  • 文字 - 在此欄中新增次要文字。

區段設定

  • 標題 - 在此區段中新增主要文字。
  • 按鈕標籤 - 新增要顯示在按鈕上的文字。
  • 按鈕連結 - 設定按鈕要連結至哪個網址或頁面。請貼上網址或從選單中選取頁面。如果您不希望在此區段中加上按鈕,請將此欄位保留空白。

版面配置選項

  • 對齊 - 選取每個欄位中元素的對齊方式。
  • 行動版版面配置 - 選擇區段中的欄位在行動裝置上要以堆疊顯示或以網格顯示。
  • 圖片尺寸 - 選取圖片欄尺寸。
  • 維持圖片比例 - 選取此選項可防止選取的圖片遭裁剪。如果您未勾選此選項,該圖片就會被裁剪成正方形。
  • 啟用次要背景和文字顏色 - 選取這個選項即可使用標題和文字的次要背景文字顏色,及此區段的次要背景顏色。您可以在佈景主題設定中修改這些顏色。

將多欄區段新增至首頁

  1. 按一下「新增區段」。
  2. 點擊多欄 *,然後點擊 ** 選取
  3. 點擊「新增欄」,以在區段中新增欄。
  4. 點擊「內容」區段中的欄位,以在欄中新增內容。
  5. 使用設定自訂區段。
  6. 點擊「儲存」。

頁面

版本 1.10.0+

您可以在首頁上展示頁面的 RTF 文字內容,例如可以使用此區段來展示「商店政策」頁面或「關於我們」頁面的內容。

即使套用了不同的範本,此區段一定會使用預設頁面範本。舉例而言,如果您將使用 page.contact 範本的「聯絡我們」頁面新增至此區段,該範本的互動欄位就不會顯示在首頁上。任何您針對此頁面新增至「標題」和「內容」方塊中的資訊,都會顯示於此區段。

新增頁面區段至首頁

  1. 按一下「新增區段」。
  2. 點擊「地圖」,然後點擊「選取」。
  3. 在「頁面」區域中,點擊「選取頁面」。
  4. 選取您想要顯示其內容的頁面,然後點擊「選取」。您只能選取目前可見的頁面,如果您需要建立新頁面,請選取「建立頁面」。
  5. 點擊「儲存」。

準備好開始透過 Shopify 銷售商品了嗎?

免費試用