網路商店功能

您可以使用區段，為網路商店的任何頁面新增功能。您可以選擇、新增和設定包含圖片、文字、品牌顏色等的區段。

某些頁面將具有預設區段，例如公告列、頁首和頁尾。這些區段會顯示在每個頁面上。

公告列

公告列可讓您透過任何頁面向顧客傳達重要資訊，並自訂多達 12 個不同的公告區塊。您還可以將語言選擇器、國家/地區選擇器及社群媒體圖示加到公告列。

如果您有多項公告，可以選擇要自動輪播公告，還是讓顧客使用 ＞ 形箭頭按鈕手動瀏覽您的公告。

區段設定

公告列區段的設定

設定	說明
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
顯示不同行	顯示一行，以視覺方式區分公告列和頁面的內容。
社群媒體圖示	顯示連結至您社群媒體帳號的社群媒體圖示。
自動輪播公告	啟用以自動輪播公告。
變更投影片的頻率	選擇公告的輪播頻率。
啟用國家/地區選擇器	新增選擇器，讓顧客選擇您在付款設定中啟用的國家/地區，以便顧客以他們所選擇的幣別來查看商品價格。
啟用語言選擇器	新增選擇器，讓顧客選擇您在語言設定中啟用的國家/地區，以便顧客以他們所選擇的語言瀏覽您的商店。

「公告」區塊

您可以新增公告區塊的文字和連結，顧客便可點擊該區塊前往特定頁面。

公告列區段的公告區塊設定

設定	說明
文字	您想要向顧客顯示的公告。
連結	您希望顧客點擊公告列時前往的連結。

頁首

頁首會顯示在網路商店的所有頁面上。

區段設定

標題區段的相關設定

設定	說明
電腦版標誌位置	當顧客在大螢幕上瀏覽網站時，標誌會顯示在頁首的位置。系統會自動最佳化標誌位置，以符合行動裝置。 中央左側 - 畫面顯示的標誌內嵌於主選單，垂直置中並靠左對齊。 左上角 - 在主選單上方顯示標誌，並將標誌和選單項目靠左對齊。 頂部中央 (預設) - 在主選單上方顯示標誌，並將標誌和選單項目置中對齊。
選單	作為主選單的選表。按一下變更以選取其他選單。
電腦版選單類型	使用下拉式選單選擇電腦版選單類型： 下拉式選單：顯示第二層選單內容；在點擊相應的第二層選項之前，第三層選單內容會收合。選單類型會自動調整為適合行動裝置的格式。 大型選單：首次點擊時顯示所有第二層和第三層選單內容。選單類型會自動調整為適合行動裝置的格式。 隱藏式選單：點擊漢堡選單圖示可顯示隱藏式選單。點擊後將顯示所有第一層選單項目，而點擊這些選單項目則會開啟更多層導覽區 (第二層和第三層)。
固定式頁首	選擇是否要使用固定式頁首以及其顯示方式。 無：頁首不會隨著顧客動作一起捲動。 向上捲動時：顧客向上捲動頁面時，頁首便會顯示。 一律顯示：顧客向上或向下捲動頁面時，頁首都會顯示。 永遠顯示，縮小標誌尺寸：顧客向上或向下捲動頁面時，頁首都會顯示。顧客捲動頁面時，標誌尺寸會減少 25%。
顯示不同行	顯示一行，以視覺方式區分頁首和頁面的內容。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
啟用國家/地區選擇器	新增選擇器，讓顧客選擇您在付款設定中啟用的國家/地區，以便顧客以他們所選擇的幣別來查看您的產品價格。
啟用語言選擇器	新增選擇器，讓顧客選擇您在語言設定中啟用的國家/地區，以便顧客以他們所選擇的語言瀏覽您的商店。
行動版標誌位置	選擇標誌在行動裝置上顯示的位置。 置中：標誌顯示在頁首的中央。 靠左：標誌顯示在頁首的左側。
間距	在頁首下方加入間距。使用範圍滑桿，在頁首下方加入 0 像素到 100 像素的空間。
區段邊框間距	在頁首上方或下方加入間距。使用範圍滑桿，在頁首上方或下方加入 0 像素到 100 像素的空間。

頁首區塊

您可以在頁首區段中新增以下區塊。

頁首區段中應用程式區塊的相關設定

設定	說明
應用程式	新增與 Online Store 2.0 相容的應用程式。最多可新增 3 個應用程式。這些應用程式將位於購物車圖示的左側，尺寸限制為 44 x 44px。

頁尾

頁尾會顯示在佈景主題的所有頁面上。

區段設定

頁尾區段的相關設定

設定	說明
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
顯示電子郵件訂閱	加入電子郵件訂閱表單，供顧客訂閱您的電子報和行銷資料。
標題	「顯示電子郵件訂閱」表單的標題。如果未啟用「顯示電子郵件訂閱」，則不會顯示此內容。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
在 Shop 上追蹤	為 Shop 應用程式上的店面顯示追蹤按鈕。深入瞭解在 Shop 上追蹤。
社群媒體圖示	顯示您在佈景主題設定中已輸入個人檔案連結的所有社群媒體平台圖示。
啟用國家/地區選擇器	新增選擇器，讓顧客選擇您在付款設定中啟用的國家/地區，以便顧客以他們所選擇的幣別來查看您的產品價格。
啟用語言選擇器	新增選擇器，讓顧客選擇您在語言設定中啟用的國家/地區，以便顧客以他們所選擇的語言瀏覽您的商店。
顯示付款圖示	為商店中已啟用的付款方式顯示圖示。若付款服務供應商尚未註冊付款方式的圖示，該付款方式可能就沒有可用的圖示。顧客造訪您的商店時，系統會篩選這些圖示，以便僅顯示支援目前顧客所在地區及所用幣別的付款方式。
顯示政策連結	在著作權資訊旁顯示政策連結圖示。政策連結可透過 Shopify 管理介面的「設定」>「政策」產生。深入瞭解如何新增商店政策。
間距	在頁尾上方加入間距。使用範圍滑桿，在頁尾上方加入 0 像素到 100 像素的空間。
區段邊框間距	在頁尾上方或下方加入間距。使用範圍滑桿，在頁尾上方或下方加入 0 像素到 100 像素的空間。

「選單」區塊

頁尾區段的選單區塊相關設定

設定	說明
標題	區塊的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
選單	要顯示於區塊的選單。頁尾僅會顯示頂層的選單項目，因此下拉式選單類型不會如預期顯示。

品牌資訊區塊

您可至佈景主題設定管理品牌資訊。深入瞭解品牌資訊。

頁尾區段中品牌資訊區塊的設定

設定	說明
顯示社群媒體圖示	顯示您在佈景主題設定中已輸入個人檔案連結的所有社群媒體平台圖示。

文字區塊

文字區塊可用來凸顯重要資訊，例如商店詳細資訊、促銷活動或聯絡資訊。

頁尾區段的文字區塊相關設定

設定	說明
標題	區塊的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
子文字	希望在此區塊中顯示的文字。

「圖片」區塊

頁尾區段的圖片區塊相關設定

設定	說明
圖片	您想要在此區塊顯示的圖片。
圖片寬度	設定圖片的寬度，可以是 5 的任何倍數 (介於 50 像素至 200 像素之間)，預設值為 100 像素。
大螢幕上的圖片對齊方式	在區塊中對齊圖片： 靠左 - 將圖片對齊區塊的左側。 置中 (預設) - 將圖片對齊區塊中央。 靠右 - 將圖片對齊區塊的右側。

網誌文章

如果您的 Shopify 商店有網誌，可以使用網誌文章區段來凸顯該網誌的文章。網誌文章區段的每篇文章都會顯示文章摘錄的前 55 個字。如果網誌文章沒有摘錄，則會顯示文章的前 30 個字。

區段設定

網誌文章區段的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
部落格	您想要顯示的網誌文章所屬的網誌來源。預設為網誌頁面上依字母順序排列的第一個網誌。
部落格文章	您想要在此區段顯示的網誌文章數量(上限為 4 篇)。
電腦版的欄數	桌上型電腦所顯示的欄數。最小值為 1，最大值為 4。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
顯示主要圖片	顯示網誌文章的主要圖片。建議圖片寬高比：3：2。
顯示日期	顯示網誌文章的建立日期。
顯示作者	顯示網誌文章的作者。
若網誌中仍有未顯示的網誌文章，請啟用「檢視全部」按鈕	如果該網誌的網誌文章多於網誌文章欄位中所設定的數量，系統就會顯示「檢視全部」按鈕，並將顧客導向該網誌的頁面。
區段邊框間距	在網誌文章區塊的上方或下方加入間距。使用範圍滑桿，在網誌文章區塊的上方或下方加入 0 像素到 100 像素的空間。

選擇網誌

1. 在佈景主題編輯器中，點擊網誌文章區段的標題。
2. 在「網誌」區段中，點擊「變更」。
3. 選取「網誌」。
4. 點擊「選取」，然後點擊「儲存」。

拼貼

您可建立圖片、商品、商品系列和影片拼貼。每個「拼貼」區段都包含三個區塊。依預設，區段會包含圖片、商品和商品系列區塊。移除其中一個區塊，即可新增影片區塊。

若要建立超過三個區塊的拼貼，請於第一個區塊下面新增其他拼貼區段，但不要在下方拼貼區段加入「標題」值。拼貼區段將合併顯示為單一區段。

此區段中所有圖片的建議寬高比為 2:3 或 1:1。

區段設定

拼貼區段的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
電腦版版面配置	拼貼多媒體檔案在電腦版的顯示方式。 左側大型區塊 (預設) - 畫面左側區段所顯示的第一個區塊，且該區塊大於所有區塊。 右側大型區塊：區段的最後一個區塊顯示在右側，且大於其他區塊。
行動版版面配置	區塊在行動版的顯示方式。 拼貼 - 以拼貼版面配置顯示圖片： 如果已在「電腦版版面配置」啟用了「左側大型區塊」，則第一個區塊會顯示於頂部，且大於其他區塊。 如果已在「電腦版版面配置」啟用了「右側大型區塊」，則最後一個區塊顯示於底部，且大於任何其他區塊。 欄：在欄中顯示所有相同尺寸的多媒體檔案。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
區段邊框間距	在拼貼區塊上方或下方加入間距。使用範圍滑桿，在區塊的上方或下方加入 0 像素到 100 像素的空間。

「影片」區塊

拼貼區段影片區塊的相關設定

設定	說明
封面圖片	在顧客播放影片前，畫面所顯示的圖片。您可以在 Shopify 管理介面中上傳自訂封面圖片。
網址	YouTube 或 Vimeo 影片的連結。影片必須設為公開顯示。影片將在彈出式視窗中播放。
影片替代文字	影片的替代文字。為使用螢幕助讀程式的顧客說明影片的相關背景和用途。

「產品」區塊

拼貼區段的產品區塊相關設定

設定	說明
產品	您想要顯示的產品。
游標暫留時顯示次要圖片	當顧客將游標停留在產品圖片上時，顯示產品的次要圖片 (若有的話)。

「商品系列」區塊

拼貼區段的商品系列區塊相關設定

設定	說明
商品系列	您想要顯示的商品系列。

「圖片」區塊

拼貼區段的圖片區塊相關設定

設定	說明
圖片	區段的圖片。按一下選取圖片以選擇圖片，或按一下變更按鈕來變更或移除圖片。
編輯替代文字	新增圖片的簡短說明以改善搜尋引擎最佳化 (SEO)，並為使用螢幕助讀程式的顧客說明圖片。

可摺疊的內容

可折疊內容區段支援可收合或展開的橫列，以檢視其中的內容，以及可放在可折疊內容左側或右側的圖片。

區段設定

可折疊內容區段的設定

設定	說明
說明	可折疊內容區段的選用說明；顯示於區段標題上方。
標題	可收合內容區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
標題對齊方式	選擇區段標題的對齊方式。可選擇靠左、置中 (預設)，或靠右。
版面配置	選取可折疊內容的版面配置： 沒有容器 (預設) 橫列容器：每個可折疊的橫列都包含在陰影方塊中 區段容器：在陰影方塊中包含完整的可折疊內容區段
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
容器顏色配置	您可套用至容器的一組顏色。深入瞭解顏色配置。「版面配置」選項設為「橫列式」或「區段」容器時，系統才會顯示所選顏色配置。
開啟第一個可折疊的橫列	依預設，勾選後會展開可折疊內容的第一列。
圖片	區段的圖片。按一下選取圖片以選擇圖片，或按一下變更按鈕來變更或移除圖片。
編輯替代文字	新增圖片的簡短說明以改善搜尋引擎最佳化 (SEO)，並為使用螢幕助讀程式的顧客說明圖片。
圖片比例	區段圖片的圖片比例： 依圖片調整 (預設)：使用圖片本身的寬高比，可避免圖片遭到裁剪。 小型 大型
電腦版版面配置	選擇要先顯示圖片或可折疊橫列。預設設定為先顯示文字。在行動版上，一律先顯示圖片。
區段邊框間距	在可收合內容的上方或下方加入間距。使用範圍滑桿，在可收合內容的上方或下方加入 0 像素到 100 像素的空間。

可摺疊橫列的區塊

可折疊橫列區塊的相關設定

設定	說明
標題	可折疊橫列的標題。
圖示	從下拉式清單中選擇要顯示在可折疊內容前的圖示。依預設會選取勾號圖示。
橫列內容	可折疊橫列的內容。可以格式化內容或包含網址連結。此功能可與橫列內容同時使用。此功能可與橫列內容頁面頁面同時使用。
橫列內容頁面	您可以將其他頁面的現有內容插入可折疊的橫列。點擊「變更」以選取或移除頁面。此功能可與橫列內容同時使用。

商品系列清單

您可以為想要主打的商品系列新增清單。您最多可以新增 16 個商品系列區塊至單一商品系列清單中。

區段設定

商品系列清單區段的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
圖片比例	商品系列主要圖片的圖片比例： 依圖片調整 - 使用圖片本身的寬高比，可避免圖片遭到裁剪。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 (預設) - 使用 1:1 的比例裁剪圖片。
電腦版的欄數	桌上型電腦所顯示的欄數。最小值為 1，最大值為 5。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
若清單中包含未顯示的商品系列，請啟用「檢視全部」按鈕	顯示「查看全部」按鈕，讓顧客連結至商品系列的完整清單。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
啟用行動裝置的滑動功能	將行動版畫面的欄變更為列，這樣顧客便能向側邊滑動以查看更多商品系列區塊。
區段邊框間距	在商品系列清單的上方或下方加入間距。使用範圍滑桿，在商品系列的上方或下方加入 0 像素到 100 像素的空間。

選擇商品系列

1. 在佈景主題編輯器中，點擊您要將商品系列新增至哪一個商品系列區塊。
2. 點擊「選取商品系列」。
3. 點擊某個商品系列，然後點擊「選取」。

聯絡表單

您的聯絡表單會將所有提交的內容傳送至商店的寄件者電子郵件地址。您可以在 Shopify 管理介面的「通知」設定頁面中，變更寄件者電子郵件地址。

此表單包含下列欄位：

• 名稱
• 電子郵件 (必填)
• 電話號碼
• 留言

區段設定

聯絡表單區塊的設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
區段邊框間距	在聯絡表單的上方或下方加入間距。使用範圍滑桿，在聯絡表單區塊的上方或下方加入 0 像素到 100 像素的空間。

自訂 Liquid

您可以新增自己的 Liquid 程式碼來建立自訂區段。

• 從您已下載應用程式的說明中新增應用程式程式碼片段，即可將應用程式加至您的頁面。
• 直接在編輯器中新增自訂 Liquid 程式碼。

區段設定

自訂 Liquid 區塊的設定

設定	說明
自訂 Liquid	新增應用程式程式碼片段或其他自訂 Liquid 碼以建立進階自訂內容。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
區段邊框間距	在自訂 Liquid 區塊的上方或下方加入間距。使用範圍滑桿，在自訂 Liquid 區塊的上方或下方加入 0 像素到 100 像素的空間。

電子郵件訂閱橫幅

您可以在密碼頁面中新增區段，讓顧客輸入電子郵件地址，以在商店開始營運時收到通知。每個電子郵件訂閱會建立一個顧客帳號。

此區段包含三個預設區塊：

• 標題
• 子標題
• 電子郵件表單

區段設定

電子郵件訂閱橫幅區段的相關設定

設定	說明
背景圖片	電子郵件訂閱橫幅的背景圖片。點擊「變更」以取代或移除圖片。移除圖片後，會顯示佈景主題隨附的圖片。取消勾選「顯示背景圖片」核取方塊以隱藏此圖片。
編輯替代文字	點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字，並為使用螢幕助讀程式的顧客說明圖片。
圖片疊加層透明度	使用疊加層讓電子郵件訂閱的橫幅圖片變暗。使用控制橫桿來設定疊加層的不透明度。預設為 0%。
顯示背景圖片	勾選此方塊以在電子郵件訂閱橫幅上顯示背景圖片。
橫幅高度	使用下拉式選單設定電子郵件訂閱橫幅圖片的高度。選擇配合圖片、小型、中型 (預設) 或大型。
電腦版內容位置	設定桌上型電腦的電子郵件訂閱橫幅位置。選擇靠上、中央或靠下以及靠右、靠左或置中。預設為中間置中。 在電腦版上，文字方塊會遮蓋部分圖片。在行動版上，文字方塊會顯示於圖片下方。
在電腦版顯示容器	將電子郵件訂閱橫幅圖片文字放在圖片上方的文字方塊中，以供使用桌上型電腦購物的顧客使用。
電腦版內容對齊方式	設定桌上型電腦圖片橫幅文字的對齊方式，選擇靠右、靠左或置中 (預設)。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。 在電腦版選取「在電腦版顯示容器」時才能看見所選顏色配置。在行動版選取「在行動版圖片下方顯示內容」時才能看見所選顏色配置。
行動版內容對齊方式	設定行動裝置圖片橫幅文字的對齊方式，選擇靠右、靠左或置中 (預設)。
在行動版顯示下方內容	內容將顯示在行動裝置的電子郵件訂閱橫幅圖片下方。

標題區塊

電子郵件訂閱區段標題區塊的相關設定

設定	說明
標題	此區段的標題。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。

子標題區塊

電子郵件訂閱區段子標題區塊的相關設定

設定	說明
說明	此區段的說明。
文字樣式	變更電子郵件訂閱區段的文字樣式。選擇內文 (預設) 或副標題。

電子郵件訂閱

您可以新增區段，供顧客輸入電子郵件地址並訂閱您的電子報或行銷活動。顧客訂閱後，系統即會於 Shopify 管理介面中建立顧客帳號。

此區段包含三個預設區塊：

• 標題
• 子標題
• 電子郵件表單

區段設定

電子郵件訂閱區段的相關設定

設定	說明
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
讓區段以全寬度呈現	將該區段設為瀏覽器視窗的全寬度。

標題區塊

電子郵件訂閱區段標題區塊的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。

子標題區塊

商品系列清單區段的子標題區塊相關設定

設定	說明
說明	此區段的說明。

電子郵件表單

「電子郵件表單」區塊會顯示一個欄位，供顧客輸入電子郵件地址，以註冊並挑選您的行銷活動。此區塊未提供可自訂的設定選項。

精選商品系列

您可以新增一個區段，用於顯示單一商品系列的各項產品。

區段設定

精選商品系列區段的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。點擊動態來源按鈕可插入動態來源作為區段標題。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
說明	輸入精選商品系列的說明文字。您可以將文字格式設為粗體、斜體或加入連結。點擊「動態來源」按鈕以插入精選商品系列說明的動態來源。
顯示管理介面的商品系列說明	勾選此方塊後，系統會使用您在 Shopify 管理介面為商品系列新增的商品系列說明，而非上方「說明」欄位中輸入的任何文字。
說明樣式	使用下拉式選單來選擇精選商品系列說明的樣式。選項為「內文 (預設)」、「副標題」或「大寫」。
商品系列	您想要顯示其產品的商品系列。點擊「變更」，以儲存您對商品系列的變更。
產品數量顯示上限	商品系列顯示的商品數量。最小值：2，最大值：25。
電腦版的欄數	桌上型電腦所顯示的欄數。最小值為 1，最大值為 5。
讓產品以全寬度呈現	無論頁面寬度設定為何，只要勾選方塊，就能以視窗的全寬度顯示產品。
若商品系列中包含未顯示的產品，請啟用「檢視全部」按鈕	如果商品系列的產品超過「產品顯示上限」欄位中所設定的數量，則系統會顯示「檢視全部」按鈕，將顧客帶至該商品系列頁面。
「檢視全部」樣式	選擇「連結」、「純色按鈕」或「外框按鈕」。
在電腦版啟用輪播廣告	勾選方塊後，即可在寬度超過 989 像素的螢幕上以輪播廣告顯示產品。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
圖片比例	產品圖片的圖片比例： 依圖片調整 (預設) - 使用圖片本身的寬高比，可避免圖片遭到裁切。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 - 使用 1:1 的比例裁剪圖片。
圖片形狀	為您的商品圖片選擇下列其中一種圖片形狀： 預設：將商品圖片變更為長方形。 拱形：使商品圖片頂端呈現弧形。 斑點：將商品圖片顯示為六個隨機斑點形狀的其中一個形狀，停留時會顯示獨特的動畫。 ＞ 形箭頭向左：將商品圖片變更為向左的 ＞ 形箭頭。 ＞ 形箭頭向右：將商品圖片變更為向右的 ＞ 形箭頭。 菱形：將商品圖片變更為菱形四邊形。 平行四邊形：將商品圖片變更為由兩組平行線組成的形狀。 圓形：將商品圖片顯示為圓形或橢圓形，停留時會顯示獨特的動畫。
游標暫留時顯示次要圖片	當顧客將游標停留在產品圖片上時，顯示產品的次要圖片 (若有的話)。
顯示廠商	顯示產品的廠商。
顯示產品評等	顯示商品的平均星級評等，並在括號中顯示評論數，例如：★★★★★ (8)。同時也需要產品評論應用程式 (如 Shopify Product Reviews)，以及 reviews.rating_count 的中繼欄位定義和 reviews.rating。
啟用「快速新增」按鈕	「快速新增」按鈕能讓顧客從產品卡將品項新增至購物車。若產品具有子類選項，則按鈕會顯示「選擇選項」，並在彈出式視窗中顯示產品詳細資訊。顧客可以從中選取想要的子類選項、新增品項到購物車，並使用「立即購買」快速結帳，或是點擊檢視品項的完整資訊。請注意，此設定取決於您是否在產品頁面中啟用「立即購買」按鈕而定。如果您並未在產品範本中啟用「立即購買」按鈕，顧客仍可新增產品到購物車，但無法採用快速的「立即購買」結帳流程。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
啟用行動裝置的滑動功能	將行動版畫面的欄變更為列，這樣顧客便能向側邊滑動以查看更多產品。
區段邊框間距	在精選商品系列區塊的上方或下方加入間距。使用範圍滑桿，在精選商品系列區塊的上方或下方加入 0 像素到 100 像素的空間。

精選商品

您可以新增精選特定產品的區段。

區段設定

精選產品區段的相關設定

設定	說明
產品	希望在此區段凸顯的產品。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
顯示次要背景	以次要背景顏色顯示精選產品。
電腦版多媒體檔案寬度	選取小型、中型或大型媒體尺寸。圖片會自動調整為適合行動裝置的大小。
將多媒體檔案限制為螢幕高度	選取此選項以根據瀏覽器視窗高度，設定多媒體檔案高度上限。
多媒體檔案最適大小	選取「原始」以維持多媒體檔案的原始寬高比，或選取「填滿」以將多媒體檔案填滿其容器。
電腦版多媒體檔案位置	選取要將精選商品的多媒體檔案置於左側或右側。僅適用於使用桌上型電腦存取頁面的使用者。
圖片縮放	選擇圖片在桌上型電腦上的縮放方式： 開啟燈箱：開啟大型圖片。行動裝置的預設選項。 無縮放：停用圖片縮放效果。適合解析度不高的圖片。 點擊並將游標懸停：點擊以放大圖片，然後將游標懸停以檢視放大圖片的不同部分。使用者再次點擊放大的圖片或滑鼠游標離開圖片容器時，懸停放大功能將會停用。當使用者使用行動裝置且此設定已啟用時，圖片將以預設的互動視窗 (燈箱) 開啟。
隱藏其他子類多媒體檔案	若選取此選項，在選擇子類後，系統就會隱藏其他子類的多媒體檔案。
啟用影片循環播放功能	允許重播影片重播。顧客必須點擊才能開始重播。
區段邊框間距	在精選產品區塊的上方或下方加入間距。使用範圍滑桿，在此區塊的上方或下方加入 0 像素到 100 像素的空間。

區段的區塊

您可以在「精選產品」區段中新增以下區塊。

精選產品區段可用的區塊

區塊	設定
文字	為精選產品輸入文字： 文字：接受文字或動態來源。 文字樣式：選擇內文、副標題或大寫文字。
標題	標題大小：選擇小型、中型或大型標題。
價格	此區塊未提供可自訂的設定選項。
子類選擇器	在藥丸或下拉式選單中選擇。
數量選擇器	此區塊未提供可自訂的設定選項。
購買按鈕	勾選顯示動態結帳按鈕方塊，即可顯示您於付款設定中啟用的任何動態結帳選項。
分享	可點擊的文字，供顧客將此產品分享至他們的社群媒體。
產品評等	顯示商品的平均星級評等，並在括號中顯示評論數，例如：★★★★★ (8)。同時也需要商品評論應用程式 (如 Shopify Product Reviews)，以及下列兩項的中繼欄位定義：reviews.rating_count和 reviews.rating。
自訂 Liquid	新增自訂 Liquid 或 HTML 程式碼。
應用程式	新增與 Online Store 2.0 相容的應用程式。
附文字圖示	此區塊可顯示最多三個圖示，您可從預先安裝的圖示清單選取，或從您上傳的圖片中選擇。如果您選擇上傳圖片，則上傳的圖片會覆寫從下拉式選單選擇的圖示。針對圖示的版面配置，您可以選取垂直或水平。若要刪除圖示，請清除標題欄位。若要顯示超過三個圖示，請新增「**附文字圖示**」區塊。
存貨單位 (SKU)	子類具有相關聯的存貨單位 (SKU) 時，此區塊會顯示商品的 SKU。深入瞭解如何[從管理介面將存貨單位 (SKU) 數量新增至商品子類](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific)。

圖片橫幅

圖片橫幅區段支援一或兩張圖片，以及一個包含按鈕的文字方塊。在電腦版中，若使用兩張圖片，圖片會並排顯示；在行動版中，您可以選擇要將圖片並排顯示，或在欄位中顯示。

在電腦版上，文字方塊會遮蓋部分圖片。在行動版上，文字方塊會顯示於圖片下方。電腦版和行動版均可變更文字對齊方式 (靠右、靠左或置中)。

區段設定

圖片橫幅區段的相關設定

設定	說明
第一張圖片	橫幅的主要圖片。若您在此區段新增兩張圖片，則該圖片可能顯示在左側或上方，依顧客使用的應用程式為電腦版或行動版而定。
編輯替代文字	點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字，並為使用螢幕助讀程式的顧客說明圖片。
第二張圖片	橫幅的次要圖片。若您在此區段新增兩張圖片，則該圖片可能顯示在右側或下方，依顧客使用的應用程式為電腦版或行動版而定。
圖片疊加層透明度	為橫幅圖片新增一個疊加層。使用控制橫桿來設定疊加層的不透明度。預設為 0%。
橫幅高度	使用下拉式選單來設定橫幅圖片的高度。 配合第一張圖片：將區段高度設為第一張圖片的高度。 小型圖片：桌上型為 420 像素，行動版為 280 像素 中型圖片 (預設)：桌上型為 560 像素，行動版為 340 像素 大型圖片：桌上型為 720 像素，行動版為 390 像素
電腦版內容位置	設定電腦版圖片橫幅位置。選擇靠上、中央或靠下以及靠右、靠左或置中。
在電腦版顯示容器	將橫幅圖片文字放在橫幅圖片上方的文字方塊中，以供使用桌上型電腦購物的顧客使用。
電腦版內容對齊方式	設定桌上型電腦圖片橫幅文字的對齊方式，選擇靠右、靠左或置中。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。只有在您選取「在電腦版顯示文字方塊」選項時，系統才會顯示所選顏色配置。
動畫	為圖片選取動畫： 無 (預設) 緩慢移動：緩慢移動圖片在容器內的位置。 固定背景位置：顧客捲動頁面時，文字和按鈕等前景元素會以相同速度移動，而背景則保持固定不動。 捲動時放大：顧客捲動頁面時，文字和按鈕等前景元素會以相同速度移動，而背景保持固定且圖片放大。
行動版內容對齊方式	設定行動裝置圖片橫幅文字的對齊方式，選擇靠右、靠左或置中。
在行動裝置上堆疊圖片	若此區段已新增兩張圖片，則圖片會在固定欄位顯示，而非並排顯示。
在行動版顯示容器	將橫幅圖片文字放在橫幅圖片上方的文字方塊中，以供使用行動裝置購物的顧客使用。

標題區塊

圖片橫幅區段標題區塊的相關設定

設定	說明
標題	文字方塊標題的大型文字。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。

文字區塊

圖片橫幅區段的文字區塊相關設定

設定	說明
說明	顯示段落樣式文字。
文字樣式	變更圖片橫幅中的文字樣式。選擇內文、副標題和大寫。

按鈕區塊

圖片橫幅區段的按鈕區塊相關設定

設定	說明
第一個按鈕標籤	第一個按鈕上顯示的文字。
第一個按鈕連結	您想要與第一個按鈕連結的網址
使用外框按鈕樣式	將按鈕樣式調整為按鈕外框，而非純色背景。
第二個按鈕標籤	第二個按鈕上顯示的文字。
第二個按鈕連結	欲與第二個按鈕連結的網址
使用外框按鈕樣式	將按鈕樣式調整為按鈕外框，而非純色背景。

附文字圖像

您可以新增一個包含圖片和文字方塊的區段，並附上可將顧客導向新頁面的選項按鈕。搭配文字和圖片以突顯特定產品、商品系列或網誌文章。新增供貨情況、樣式等資訊，甚至可以提供相關評論。

區段設定

附文字圖像區段的相關設定

設定	說明
圖片	按一下選取圖片以選擇該區段的圖片。按一下變更按鈕以變更或移除圖片。
編輯替代文字	點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字，並為使用螢幕助讀程式的顧客說明圖片。
圖片高度	選擇圖片高度： 依圖片調整 (預設) 小型 中等 大型
電腦版圖片寬度	圖片寬度： 小型 中 (預設) 大型
電腦版圖片位置	選擇先顯示圖片或文字是先顯示。行動版的版面配置預設為先顯示圖片： 先顯示圖片 (行動版的預設值) 後顯示圖片
電腦版內容位置	容器中內容的垂直位置： 靠上 (預設) 置中 靠下
電腦版內容對齊方式	容器中文字的對齊方式： 靠左 (預設) 置中 靠右
內容版面配置	允許圖片和文字方塊彼此重疊。若選取不可重疊，內容會調整為配合文字和圖片。 可重疊 不可重疊 (預設)
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
動畫	為圖片選取動畫： 無 (預設) 緩慢移動：緩慢移動圖片在容器內的位置。 捲動時放大：顧客捲動頁面時，文字和按鈕等前景元素會以相同速度移動，而背景保持固定且圖片放大。
行動版版面配置	選擇行動裝置的內容對齊方式： 靠左 (預設) 靠右 置中
區段邊框間距	在附文字圖像區塊的上方或下方加入間距。使用範圍滑桿，在附文字圖像區塊的上方或下方加入 0 像素到 100 像素的空間。

標題區塊

附文字圖像區段的標題區塊相關設定

設定	說明
標題	區段的標題文字。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。

文字區塊

附文字圖像區段的文字區塊相關設定

設定	說明
內容	在此文字區段中顯示的段落樣式文字。
文字樣式	內容文字的樣式： 內文 (預設) 副標題

按鈕區塊

附文字圖像區段的按鈕區塊相關設定

設定	說明
按鈕標籤	按鈕上顯示的文字。
按鈕連結	欲與此按鈕連結的網址

說明區塊

附文字圖像區段字幕區塊的相關設定

設定	說明
文字	為圖片新增標語或說明。文字會顯示在附文字圖像區段的底部。
文字樣式	內容文字樣式： 大寫 (預設) 副標題
文字大小	內容文字的大小： 小型 中 (預設) 大型

多欄

您可以在欄版面配置使用多欄區段來顯示內容，並在欄下方新增按鈕將顧客導向新頁面。搭配文字和圖片，以突顯特定產品、商品系列或網誌文章。新增供貨情況、樣式等詳細資訊，或者提供相關評論。

區段設定

多欄區段的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
圖片寬度	新增至欄的圖片寬度。 欄位的全寬度 (預設) - 圖片寬度是欄位的完整尺寸。 欄位的一半寬度 - 圖片寬度是欄位尺寸的一半。 欄位的三分之一寬度 - 圖片寬度是欄位尺寸的三分之一。
圖片比例	此圖片的圖片比例： 依圖片調整 (預設) - 使用圖片本身的寬高比，可避免圖片遭到裁剪。 縱向 - 使用 2:3 的比例裁剪圖片。 正方形 - 使用 1:1 的比例裁剪圖片。 圓圈 - 裁剪圖片以在圓圈中顯示
電腦版的欄數	使用範圍刻度來選取桌上型電腦所顯示的欄位數量，最小值為 2，最大值為 6。
欄位對齊	圖片和文字在欄位中的對齊方式： 靠左 (預設) - 將圖片和文字靠左對齊。 置中 - 將圖片和文字置中對齊。
次要背景	選擇無以隱藏次要背景，或選擇以欄背景顯示以變更欄位容器顏色。
按鈕標籤	按鈕上顯示的文字。
按鈕連結	欲與此按鈕連結的網址
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
行動版的欄數	設定行動裝置特定欄位的版面配置。請在 1 欄和 2 欄之間擇一。
啟用行動裝置的滑動功能	將行動版畫面的欄變更為列，這樣顧客便能向側邊滑動以查看更多商品系列區塊。
區段邊框間距	在多欄區塊的上方或下方加入間距。使用範圍滑桿，在多欄區塊的上方或下方加入 0 像素到 100 像素的空間。

「欄」區塊

單一區段最多包含 12 個欄。若您的欄區塊為 1-3 個，電腦版會以一列的形式並排顯示。若您的欄區塊為 4 個以上，則電腦版會以兩欄形式顯示。在行動版中，除非開啟「啟用行動裝置的滑動功能」，否則欄區塊一律以單欄形式顯示。

多欄區段的直欄區塊相關設定

設定	說明
圖片	欲顯示的圖片。
標題	欄的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
說明	此欄中的段落文字。
連結標籤[選用]	新增在欄區塊下方的連結文字。如果您沒有新增連結，請略過此欄位。
連結	連結的網址。若無連結則請略過。

多列

您可以新增一個包含多列的區段，每列有圖片、文字，並可選擇加上按鈕。搭配文字和圖片，以突顯特定商品、商品系列或網誌文章。您可以加上有關供貨情況、樣式的資訊，甚至可以提供使用心得。

您還可以透過動態來源顯示 metaobject 內容。若要顯示 metaobject 項目，您需要先建立 metaobject 和項目，然後確保 metaobject 具有店面存取權，才能在多列區段中使用。

區段設定

多列區段的設定

設定	說明
圖片高度	選擇圖片高度： 配合圖片 小型 中型 (預設) 大型
電腦版圖片寬度	圖片寬度： 小型 中 (預設) 大型
標題大小	變更標題文字的大小。選擇「小型」、「中型」或「大型」標題。
文字樣式	變更文字樣式。選擇「內文」(預設) 和「副標題」。
按鈕樣式	選擇純色按鈕或外框按鈕。
電腦版內容位置	容器中內容的垂直位置： 靠上 置中 (預設) 靠下
電腦版內容對齊方式	容器中文字的對齊方式： 靠左 (預設) 置中 靠右
電腦版圖片位置	選擇圖片的位置。行動版的圖片會自動調整位置： 從左側開始交叉顯示 (預設) 從右側開始交叉顯示 靠左對齊 靠右對齊
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
容器顏色配置	您可套用至容器的一組顏色。深入瞭解顏色配置。
行動版版面配置	選擇行動裝置的內容對齊方式： 靠左 (預設) 靠右 置中
區段邊框間距	在多列區段的上方或下方加入間距。使用範圍滑桿，在附文字圖像區段的上方或下方加入 0 像素到 100 像素的間距。

列區塊

多列區段中列區塊的設定

設定	說明
圖片	點擊「選取圖片」以選擇列的圖片。點擊「變更」按鈕以變更或移除圖片。點擊來源按鈕以連結動態來源。
編輯替代文字	點擊以設定搜尋引擎最佳化 (SEO) 的圖片替代文字，並為使用螢幕助讀程式的顧客說明圖片。
說明	為圖片加上標語或說明。
標題	列的標題文字。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
文字	在該列中顯示的段落樣式文字。
按鈕標籤	按鈕上顯示的文字。
按鈕連結	欲與此按鈕連結的網址

頁面

您可以選擇在區段顯示自訂頁面的內容。系統會將頁面內容全數帶入此區段，但不會從任何範本帶入任何 Liquid 程式碼。

區段設定

頁面區段的相關設定

設定	說明
頁面	您想要在網路商店中顯示的頁面。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
區段邊框間距	在頁面區塊的上方或下方加入間距。使用範圍滑桿，在頁面區塊的上方或下方加入 0 像素到 100 像素的空間。

RTF 文字

您可以新增包含標題、說明、文字和按鈕的 RTF 文字區段，供顧客連結至新頁面。

區段設定

RTF 文字區段的相關設定

設定	說明
電腦版內容位置	選擇 RTF 文字容器的位置。使用下拉式選單選取靠左、置中 (預設) 或靠右。內容會自動針對行動裝置進行最佳化調整。
內容對齊	此設定會影響 RTF 文字區段內所有區塊的文字對齊方式。使用下拉式選單選取靠左、置中 (預設) 或靠右。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
讓區段以全寬度呈現	區段預設為全寬度。
區段邊框間距	在 RTF 文字區塊的上方或下方加入間距。使用範圍滑桿，在 RTF 文字區塊的上方或下方加入 0 像素到 100 像素的空間。
連結至動態來源	使用 RTF 文字分區段中的動態來源參考中繼欄位或 metaobject 等資訊。您甚至可以使用清單參考資料來輸出佈景主題中的文字清單。舉例來說，中繼欄位清單 (即使參考的 metaobject 上也有提供) 可用於輸出佈景主題 RTF 文字設定中的文字清單。

標題區塊

RTF 文字區段最多可有 3 個標題區塊。

RTF 文字區段的標題區塊相關設定

設定	說明
標題	區段的標題。您可使用按鈕將文字設為粗體或斜體，也可以新增連結。點擊來源按鈕即可連結動態來源。
標題大小	變更標題文字的大小：選擇小型、中型、大型或超大型標題。

文字區塊

「文字」區塊是向顧客分享品牌資訊的好方法。您可以描述產品優點、發佈公告、歡迎顧客光臨您的商店，或闡述您的品牌價值。

RTF 文字區段最多可有 3 個文字區塊。

RTF 文字區段的文字區塊相關設定

設定	說明
說明	此區段主要內容的段落樣式文字。點擊來源按鈕即可連結動態來源。

說明區塊

RTF 文字區段最多可有 3 個說明區塊。

RTF 文字區段的文字區塊相關設定

設定	說明
文字	為 RTF 文字區段加上簡短標語。
文字樣式	使用下拉式選單選取副標題 (預設) 或大寫文字的文字樣式。
文字大小	使用下拉式選單來設定說明文字大小。您可以選取小型、中型 (預設) 或大型文字。

按鈕區塊

RTF 文字區段最多可有 2 個按鈕區塊。

RTF 文字區段的按鈕區塊相關設定

設定	說明
按鈕標籤	按鈕上顯示的文字。
按鈕連結	欲與此按鈕連結的網址
使用外框按鈕樣式	將按鈕樣式調整為按鈕外框，而非純色背景。

素材輪播

您可以新增素材輪播區段，在商店頁面上顯示最多 5 張圖片的輪播廣告。

區段設定

素材輪播區段的設定

設定	說明
版面配置	選擇「全寬度」(預設) 或「網格」。「全寬度」會顯示素材輪播區段的完整寬度，而「網格」會顯示兩側的邊框。
投影片高度	素材輪播的高度： 配合第一張圖片：所有圖片的高度和輪播圖片中第一張圖片的高度相同。 小型 中型 (預設) 大型
分頁樣式	顯示在圖片下方的素材輪播導覽樣式。 圓點 計數器 (預設) 數字
自動旋轉投影片	勾選此方塊以自動旋轉素材輪播中的圖片。如果未勾選此方塊，則顧客為素材輪播手動換頁前，素材輪播會持續顯示靜態圖片。
變更投影片計時器	使用來設定素材輪播的自動旋轉時間。最短 3 秒，最長 9 秒。
動畫	為圖片選取動畫： 無 (預設) 緩慢移動：緩慢移動圖片在容器內的位置
行動版版面配置	勾選此方塊以在行動版圖片下方顯示內容。
可存取性	為視力受損的顧客新增素材輪播說明。

圖片投影片設定

素材輪播區段圖片的相關設定

設定	說明
圖片	為素材輪播選擇靜態或動態圖片。您可以點擊「選取圖片」檢視多媒體檔案庫，或點擊來源按鈕以連結動態來源。選取圖片後，只要點擊「變更」按鈕即可移除、變更或刪除圖片。
編輯替代文字	為使用螢幕助讀程式的顧客說明素材輪播的圖片並提供相關背景。
標題	圖片的選用標題文字。文字會個別新增至每張圖片。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	選擇小型、中型 (預設) 或大型標題。
子標題	圖片的選用副標題文字。文字會個別新增至每張圖片。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
按鈕標籤	輸入按鈕的文字，或保留空白以完全隱藏按鈕。
按鈕連結	您想讓按鈕連結的網址。點擊來源按鈕即可將動態來源新增為網址。
使用外框按鈕樣式	點擊核取方塊以切換實線或外框按鈕。
電腦版內容位置	內容方塊在圖片上的位置。選擇靠上、中央或靠下以及靠左、置中或靠右。預設設定為中間置中。
在電腦版顯示容器	勾選此方塊以顯示內容方塊。
電腦版內容對齊方式	對齊容器中的文字。可從向左對齊、置中 (預設) 或向右對齊中挑選。
圖片疊加層透明度	使用控制橫桿調整圖片疊加層的不透明度。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。此設定需顯示容器，才能套用至素材輪播圖片。
行動版版面配置	選擇內容在行動裝置上的顯示方式。選擇靠左、置中 (預設) 或靠右。

影片

您可以新增影片區段，以便在您的商店頁面嵌入 YouTube 或 Vimeo 影片。

區段設定

影片區段的相關設定

設定	說明
標題	區段的標題。使用按鈕可將文字設為粗體或斜體，也可以新增連結。
標題大小	變更標題文字的大小：選擇小型、中型或大型標題。
循環播放影片	若勾選此選項，影片會在結束後重新開始。
影片	在區段中新增或選取自己的影片。您可以編輯影片以使用自訂的封面圖片，也可以新增一些替代文字。如果新增的是 Shopify 代管影片，則透過下一個設定中的影片網址使用該影片。
網址	YouTube 或 Vimeo 影片的連結。影片必須設為公開顯示，且只有在上一個設定中未新增 Shopify 代管影片時才會顯示。
封面圖片	在顧客播放影片前，畫面所顯示的圖片。
影片替代文字	影片的替代文字。為使用螢幕助讀程式的顧客說明影片的相關背景和用途。
讓區段以全寬度呈現	移除預設邊框間距，讓區段以頁面的全寬度呈現。
顏色配置	您可套用至此區段的一組顏色。深入瞭解顏色配置。
區段邊框間距	在影片的上方或下方加入間距。使用範圍滑桿，在影片區塊的上方或下方加入 0 像素到 100 像素的空間。