Express 區段

佈景主題內容是使用區段建立而成的。區段即是可以決定線上商店中各頁面版面配置和外觀的可自訂內容方塊。

靜態區段即是顯示在線上商店中預定地點的區段,您無法移除或重新排列這些區。靜態區段可能包含頁首、頁尾、導覽區段,或像產品頁面、商品系列頁面等頁面中的內容區段。例如,「產品」區段會決定線上商店中每個產品頁面的外觀。

動態區段是可用於自訂首頁版面配置的選用區段。 您可以在商店首頁新增重新排列移除動態區段,以建立頁面版面配置。您可以在首頁上新增最多 25 個動態區段。

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

靜態區段

Express 包含下列靜態區段:

  • 標頭
  • 頁尾
  • 產品
  • 商品推薦

動態區段

Express 包含下列動態區段:

  • 精選商品系列
  • 精選產品
  • 自訂內容
  • 附文字的圖片

標頭

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

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

  • 商標
  • 公告列
  • 選單
  • 搜尋

新增自訂標誌

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

  1. 點擊「標頭」。
  2. 在「標誌圖片」區域,點擊「選擇圖片」,然後執行下列任一操作: - 若要選擇已上傳至「Shopify 管理員」的圖片,請按一下「圖庫」索引標籤。
    • 若要從電腦本機中選取圖片,請點擊「圖庫」>「上傳」。
  3. 使用「自訂標誌寬度」滑桿來自訂標誌寬度。
  4. 點擊「儲存」。

新增公告列

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

  1. 點擊「標頭」。
  2. 在「公告列」區域中,勾選「顯示公告」。
  3. 輸入公告文字。
  4. 選用:輸入網址以新增公告連結。
  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. 選取「產品頁面」。

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

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

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

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

精選商品系列

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

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

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

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

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

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

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

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

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

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

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

  6. 請重複步驟 3 到步驟 5,以新增更多商品系列至該區段。

  7. 點擊「儲存」。

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

精選產品

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

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

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

新增精選產品區段

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

自訂內容

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

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

  • 標題 - 區段的標題。

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

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

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

秘訣:您可以使用各的拖放式控制代碼 ⋮⋮ 來重新排列區塊。

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

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

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

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

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

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

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

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

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

圖片

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

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

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

產品

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

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

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

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

商品系列

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

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

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

選單

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

標題 - 為選單加上標題。

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

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

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

將自訂內容新增至首頁

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

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

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

  4. 點擊「儲存」。

附文字的圖片

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

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

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

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

版面配置選項

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

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

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

  6. 使用設定自訂區段。

  7. 點擊「儲存」。

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

免費試用