免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學習·2000+直播課程 
免費加入·15萬+賣家交流群 
2019-11-25 10:19
如何向訪客“廣而告之”Shopify商店的重大促銷活動和消息通知？這點在即將到來的“黑五”“網一”大促面前顯得尤為重要。
Shopify公告欄就是一種簡單而有效的方法，確保客戶在進店時能夠及時看到商店的促銷活動和折扣代碼。
此外，公告欄在其他情況下也很實用，例如顯示重要的發貨信息、展示新的會員計劃以及賣家想要呈現給客戶的任何內容。
本文將以圖文的形式向你演示如何使用Liquid來構建公告欄，從而擴展自定義主題的功能或提供客戶服務。
在開始創建公告欄之前，你需要確定公告欄中需要包含的元素類型（如文本、標題等）。以下是你可以在其中添加的一些元素：
?文本
?超鏈接
?顏色
?字體大小
?復選框
此教程展示的公告欄涉及選擇背景、文本顏色、添加文本以及嵌入超鏈接的設置。通過使用Liquid（一門開源的模板語言，由 Shopify創造并用 Ruby 實現。它被稱為“Shopify主題的骨骼”，并且被用于加載店鋪系統的動態內容）的會話對象，你可以進入主題編輯器進行設置，包括標題文本、鏈接URL并選擇你要顯示的圖像。
首先，你需要在主題的/sections目錄中創建一個名為“announcement-bar.liquid”的新文件，從而得到一個位于標題上方的新的會話。
創建此會話文件后，你可以添加包含公告消息以及與會話設置相對應的if語句的基本標記：
以下操作實現的是一個“當訪客執行特定操作時才會展示的公告欄”。如果你希望你的公告欄僅在網站主頁出現，那么你還可以添加一個復選框，因為客戶可能并不希望此消息出現在商店的每個頁面上。在你已經添加HTML的下方，添加以下模式標記和JSON：
如圖所示，JSON數組中的ID
在這種情況下，主題編輯器上將出現一個復選框，如果選中該復選框，將顯示公告內的元素和消息。此外，還將出現第二個復選框，使你可以在非主頁頁面上隱藏公告欄。
如果你希望在公告欄中出現文本和超鏈接，你可以添加支持訪問文本字段和URL值的對象。同樣，如果你不需要它們，你可以使用if語句來隱藏這些內容：
一旦你在schema標簽中創建了相應的值，這兩個新的section.settings對象將使你能夠創建用于添加文本和URL的選項。兩者都有特定的輸入類型，分別是text和url，它們將在主題編輯器中生成對應選項：
你在本會話中要添加的最后一項是為公告欄添加用于選擇背景和文本顏色的選項。而且，你可以根據架構標記中的值來調整主題的CSS。例如，你可以創建“color（顏色）”設置，該設置會將選定的顏色值發送到CSS屬性。
以本文為例，將出現如下所示的會話設置：
你可以將公告欄選定默認的黑色，當你在主題編輯器上查看時，你將看到一個顏色選擇器工具。announcement_bar_color ID將被會話中的<style>標記所引用：
現在，由主題編輯器上的顏色選擇器選擇的十六進制代碼是通過section.settings.announcement_bar_color屬性值表示的，因此你能夠輕松調整顏色。設置公告欄文本的顏色也可以采用相同的方法。
然后，你還可以在你的<style>標簽中添加一些CSS，以確保文本能夠正確放置。創建完整個會話后，你將看到以下內容：
最后一步是將以上會話添加到主題布局中。如果你希望此會話在網站的每個頁面上都可用，你需要將其添加到主題布局文件夾內的theme.liquid文件中。
要將會話文件導入布局文件，你需要使用會話主題標簽（section theme tag），并引用Liquid文件名。如果你希望此會話出現在標題上方，那么請你查找{% section "header" %}并將其放在{% section "announcement-bar" %}上方的行中。
此時，當你進入主題編輯器時，你將看到用于對公告欄進行自定義的選項：
點擊【Shopify】獲取更多Shopify高級自定義工具及主題功能開發教程。
【特別聲明】未經許可同意，任何個人或組織不得復制、轉載、或以其他方式使用本網站內容。轉載請聯系：editor@cifnews.com
