區塊總覽

總覽 所有方案 2 分鐘閱讀

區塊是大型選單或分頁中的一個內容單元。區塊在同一列中並排顯示，每個區塊的 Width（寬度）決定它佔該列的比例。

連結與按鈕

連結清單一個標題加上一欄連結，可加上圖示、圖片與徽章。 懸停圖片連結連結旁有一張大圖片，滑鼠懸停時會跟著切換。 特色清單免運費等賣點，每一項都附有圖示。 按鈕一個行動呼籲按鈕，例如「Shop all」。

圖片與橫幅

圖片一張含標題與連結的橫幅或促銷圖片。 圖片輪播以輪播方式顯示多張圖片。Growth · Pro 促銷橫幅含標題、文字與按鈕的圖片。 品牌標誌品牌標誌格狀排列，每個標誌都有自己的連結。

商品與商品系列

商品清單一張商品卡片，或以格狀、清單、輪播顯示的商品。 Lookbook 熱點在照片中的商品上標示可點擊的圓點。 商品系列清單附圖片的商品系列。Growth · Pro 商品系列焦點商品系列名稱旁顯示其商品的格狀排列。Growth · Pro

內容與促銷

部落格文章最新或您親自挑選的部落格文章。Growth · Pro 聯絡表單顧客用來傳送訊息給您的表單。 電子報電子郵件訂閱表單。 倒數計時器倒數至指定日期的計時器。Growth · Pro 優惠碼顧客點一下即可複製的折扣碼。Growth · Pro 自訂 HTML任何 HTML：地圖、影片、嵌入內容。Pro

該使用哪一種？

區塊	適合用途	Select block（選擇區塊）中的分頁	方案
連結清單	分類、品牌、尺寸	Link list	所有方案；Badge（徽章）需要 Pro Navigation
懸停圖片連結	以圖片預覽分類	Link list	所有方案
特色清單	免運費、退貨、安全付款	Link list	所有方案
按鈕	「Shop all」行動呼籲	Link list	所有方案
圖片	季節性橫幅或促銷	Add custom image	所有方案
圖片輪播	在一個區塊中展示多個活動	Add custom image	Growth Navigation、Pro Navigation
促銷橫幅	附按鈕的特賣或新商品系列	Add custom image	所有方案
品牌標誌	「依品牌選購」	Add custom image	所有方案
商品清單	熱銷商品、新品、某個商品系列	Add product	Single product：所有方案。格狀、清單、輪播：Growth Navigation、Pro Navigation
Lookbook 熱點	「購買整套造型」	Add product	所有方案
商品系列清單	「依分類選購」圖塊	Collection	Growth Navigation、Pro Navigation
商品系列焦點	多個商品系列的商品	Collection	Growth Navigation、Pro Navigation
部落格文章	指南、Lookbook、新聞	Blogs	Growth Navigation、Pro Navigation
聯絡表單	不離開頁面就能提問	Contact form	所有方案
電子報	擴大您的電子郵件名單	Contact form	所有方案
倒數計時器	限時特賣與截止期限	Countdown	Growth Navigation、Pro Navigation
優惠碼	可複製的折扣碼	Coupon code	Growth Navigation、Pro Navigation
自訂 HTML	地圖、影片、嵌入內容	Add HTML to menu	Pro Navigation

另外兩個分頁新增的是結構，而不是單一區塊：

• Multi block（多重區塊）一鍵新增現成的組合，例如 3 Link lists + 1 Image 或 Map + Contact + Address。所需方案取決於其中包含的區塊。Group of items（項目群組）會將多個區塊疊放在同一欄中，請參閱瀑布流版面（Pro Navigation）。
• Tab（分頁）新增簡單或巢狀分頁，標題可位於左側、上方或右側。請參閱分頁式選單（Pro Navigation）。

新增區塊

1. 開啟面板

   在選單編輯器中，點擊含有大型選單的項目，開啟它的面板。點擊 Add block（新增區塊）。

   

   在開啟的大型選單面板中點擊 Add block。

2. 選擇分頁與版面

   在 Select block 中點擊一個分頁，例如 Multi block、Link list 或 Coupon code。將游標移到版面上，然後點擊 Select（選擇）。

   

   (1) 選擇分頁，(2) 將游標移到版面上並點擊 Select。

3. 設定區塊

   區塊的設定會在 Edit Item（編輯項目）中開啟。填入內容並選擇 Width。之後若要編輯，請在預覽中點擊該區塊。

   

   (1) 在預覽中點擊倒數計時器，(2) 設定它的 Width。

4. 儲存並發佈

   點擊 Save（儲存），然後點擊 Publish（發佈）。

注意

標有 Growth Navigation 或 Pro Navigation 徽章的版面不包含在您目前的方案中。它的按鈕會顯示 Upgrade to use（升級以使用），點擊後會前往 Pricing（定價）。

每個區塊都有的設定

Width（寬度）預設: 依版面而定

區塊佔該列的比例：Auto（自動），或 8.33% 到 100%。寬度加總超過 100% 的區塊會換到新的一列。若要等寬的欄，請使用 4 × 25%、3 × 33.33% 或 2 × 50%。

Hide on desktop / Hide on mobile（在桌面裝置隱藏 / 在行動裝置隱藏）預設: Off

位於 Visibility（顯示設定）下。在某一種裝置上隱藏區塊。

Hide when logged in / Only show when logged in（登入時隱藏 / 僅在登入時顯示）預設: Off

位於 Visibility 下。只對訪客顯示區塊，或只對已登入的顧客顯示。

Schedule publishing（排程發佈）預設: Off

位於 Visibility 下。只在 Start date / Start time（開始日期 / 開始時間）與 End date / End time（結束日期 / 結束時間）之間顯示區塊。請參閱排程選單。

Extra classname（額外類別名稱）預設: 空白

位於 Advanced（進階）下。加入您自己的 CSS 類別，讓您可以用自訂 CSS 設定區塊樣式。

Shopify 資料會自動更新

商品、商品系列與部落格區塊會即時從您的商店讀取標題、價格、圖片、庫存與新文章。區塊只會記住您選了哪些項目：如果您刪除其中一項或變更它的 handle（網址），請重新選擇。請參閱在 Shopify 後台所做的變更沒有出現在選單中。

相關頁面

• 大型選單以連結清單、圖片、商品與聯絡表單等區塊，建立寬版的子選單面板。
• 分頁式選單讓顧客在同一個子選單中切換不同的內容群組，例如男裝、女裝與童裝。
• 瀑布流版面與特殊選單將高度不同的區塊整齊地堆疊成欄，或顯示每個分類都有專屬面板的分類清單。
• 方案與帳單比較 Globo Mega Menu 的方案、開始免費試用，以及升級、降級或取消方案。

這個頁面有幫助嗎？

回報問題