Express 區段

區段即是可以決定您線上商店中各頁面版面配置,並可由您自訂的內容方塊。

您可以新增、重新排列或移除區段以建立版面配置。您可以在頁面上新增最多 25 個區段,另外再加上頁首和頁尾區段。無法移除或重新排列頁首和頁尾區段。

您也可以使用區段來決定商店中元素的外觀。舉例來說,產品頁面區段就會決定線上商店中各項產品的外觀。

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

標頭

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

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

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

新增自訂標誌

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

  1. 按一下 區段 旁邊的「自訂」。

  2. 點擊「標頭」。

  3. 在「標誌圖片」區域,點擊「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。 - 如要使用 Burst 中的免費圖庫圖片,請點擊「免費圖片」。 - 若要從電腦本機中選取圖片,請點擊「圖庫」>「上傳」。

  1. 使用「自訂標誌寬度」滑桿來自訂標誌寬度。

  2. 點擊「儲存」。

新增公告列

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 按一下 **區段** 旁邊的「**自訂**」。
  1. 點擊「區段」。

  2. 點擊「標頭」。

  3. 在「公告列」區域中,勾選「顯示公告」。

  4. 在「文字」欄位中輸入您的公告文字。

    1. 選用:在「圖示」選單中,選取圖示以顯示於公告列。圖示會使用與公告文字相同的顏色。
  5. 若要變更公告列背景的顏色,請點擊「」顏色色樣並選擇顏色。

  6. 若要變更公告文字的顏色,請點擊「文字」顏色色樣並選擇顏色。

  7. 點擊「儲存」。

新增選單

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 點擊 **區段** 旁邊的「**自訂**」。
  1. 點擊「標頭」。

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

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

  4. 點擊「儲存」。

啟用搜索

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 按一下 **區段** 旁邊的「**自訂**」。
  1. 點擊「區段」。

  2. 點擊「標頭」。

  3. 請勾選「顯示搜尋」。

頁尾

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

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

顯示兩個文字區塊和訂閱電子報的網站頁尾區段。

新增付款圖示

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

  1. 點擊 區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 點擊「頁尾」。

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

  5. 點擊「儲存」。

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 點擊 **區段** 旁邊的「**自訂**」。
  1. 點擊「區段」。

  2. 點擊「頁尾」。

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

  • 選單
  • 電子報
  • 文字 您最多可以新增 4 個內容區塊。

    若要移動內容區塊,請點擊 ⋮⋮ 圖示,並將區塊拖曳至其他位置。

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

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

  1. 點擊「儲存」。

新增社群媒體圖示

  1. 點擊 區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 點擊「頁尾」。

  4. 點擊「佈景主題設定」區段。

  5. 在相關的社群媒體欄位中,輸入您個人檔案的 URL。

  6. 點擊「儲存」。

新增語言選擇器

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

  1. 點擊 區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 點擊「頁尾」。

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

  5. 點擊「儲存」。

精選商品系列

您可以在首頁上的單一區段中展示多個精選商品系列。由於 Express 的頁首不包含選單,使用此佈景主題展示產品最簡單的方式就是透過精選商品系列與精選產品。

在每個精選商品系列區段中,您可以顯示多個商品系列。商品系列會顯示為買家可以來回導覽的索引標籤。

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

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

新增精選商品系列區段

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 點擊 **區段** 旁邊的「**自訂**」。
  1. 點擊「區段」>「新增區段」。

  2. 點擊「精選商品系列」,然後點擊「新增」。

  3. 在「商品系列清單大小」下拉式選單中,您可以選擇預設的產品顯示數量。此設定適用於所有「精選商品系列」區段中的商品系列。

- - 6 項產品 - - 18 項產品 - - 36 項產品

  1. 在「圖片樣式」下拉式選單中,為商品系列中的產品圖片選取圖片裁剪樣式。此設定會套用至「精選商品系列」區段中的所有商品系列。

  2. 在內容區域中,選取一個「商品系列」區塊,或點擊「新增商品系列」。

  3. 點擊「選取商品系列」。

  4. 在「商品系列」清單中,選取您要顯示於索引標籤中的商品系列,然後點擊「選取」。

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

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

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

  6. 點擊「儲存」。

新增商品系列至精選商品系列區段

  1. 點擊 區段 旁邊的「自訂」。

  2. 點擊「區段」。

  3. 選取您要修改的「精選商品系列」區段。

  4. 在內容區域中,選取一個「商品系列」區塊,或點擊「新增商品系列」。

  5. 點擊「選取商品系列」。

  6. 在「商品系列」清單中,選取您要顯示於索引標籤中的商品系列,然後點擊「選取」。

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

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

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

  8. 點擊「儲存」。

提示:

若要變更區段中商品系列索引標籤的順序,請重新排列「內容」區域中的商品系列。請點擊商品系列的 ⋮⋮ 圖示,並將區塊拖曳至其他位置。

精選產品

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

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

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

新增精選產品區段

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



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

產品頁面

買家點擊一項精選商品系列中的產品時,即會顯示產品頁面。此頁面會顯示產品說明、價格、子類選項和圖片。您可以選擇將使用者導向新頁面,或在首頁使用疊加層顯示產品詳細資訊。顧客可以直接在頁面中將產品加入購物車。

產品頁面區段包括下列設定:

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

編輯產品頁面設定

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 點擊 **區段** 旁邊的「**自訂**」。
  1. 點擊「區段」。

  2. 點擊「產品頁面」。

  3. 使用設定來自訂您的產品頁面。

  4. 點擊「儲存」。

附文字的圖片

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

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

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

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

版面配置選項

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

新增附文字圖像區段

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌上版</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 管理員中,前往<strong>「線上商店」</strong> &gt; <strong>「佈景主題」</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 應用程式</a>中,點一下<strong>「商店」</strong>。
</li><li>在<strong>銷售管道</strong>畫面上,點一下<strong>「線上商店」</strong>。
</li><li>點一下<strong>「管理佈景主題」</strong>。
</li></ol></div>
</div>



1. 點擊 **區段** 旁邊的「**自訂**」。
  1. 點擊「區段」>「新增區段」。
  2. 點擊「附文字的圖片」,然後點擊「新增」。
  3. 在「圖片」區域,點擊「選擇圖片」,然後執行下列任一操作: - 若要選擇已上傳到 Shopify 管理員的圖片,請點擊「圖庫」索引標籤。

    • 如要使用 Burst 中的免費圖庫圖片,請點擊「免費圖片」。
    • 若要從電腦本機中選取圖片,請點擊「圖庫」>「上傳」。
  4. 使用設定自訂區段。

  5. 點擊「儲存」。

購物車導覽匣

Express 的購物車功能可讓買家快速檢視其購物車內容,然後繼續購物。

使用 Express 佈景主題,您可以在購物車導覽匣上啟用訂單備註,讓顧客輸入訂單說明

啟用購物車中的訂單備註

  1. 將產品新增至購物車,即可導覽至佈景主題編輯器中的購物車導覽匣。

  2. 點擊「區段」索引標籤。

  3. 點擊「購物車頁面」區段。

  4. 請勾選「顯示購物車備註」。

  5. 點擊「儲存」。

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

免費試用