【圖文教程】如何在Shopify商店中創(chuàng)建自定義公告欄？

如何向訪客“廣而告之”Shopify商店的重大促銷(xiāo)活動(dòng)和消息通知？這點(diǎn)在即將到來(lái)的“黑五”“網(wǎng)一”大促面前顯得尤為重要。

Shopify公告欄就是一種簡(jiǎn)單而有效的方法，確?？蛻粼谶M(jìn)店時(shí)能夠及時(shí)看到商店的促銷(xiāo)活動(dòng)和折扣代碼。

此外，公告欄在其他情況下也很實(shí)用，例如顯示重要的發(fā)貨信息、展示新的會(huì)員計(jì)劃以及賣(mài)家想要呈現(xiàn)給客戶的任何內(nèi)容。

本文將以圖文的形式向你演示如何使用Liquid來(lái)構(gòu)建公告欄，從而擴(kuò)展自定義主題的功能或提供客戶服務(wù)。

創(chuàng)建新的公告欄

在開(kāi)始創(chuàng)建公告欄之前，你需要確定公告欄中需要包含的元素類(lèi)型（如文本、標(biāo)題等）。以下是你可以在其中添加的一些元素：

?文本

?超鏈接

?顏色

?字體大小

?復(fù)選框

此教程展示的公告欄涉及選擇背景、文本顏色、添加文本以及嵌入超鏈接的設(shè)置。通過(guò)使用Liquid（一門(mén)開(kāi)源的模板語(yǔ)言，由 Shopify創(chuàng)造并用 Ruby 實(shí)現(xiàn)。它被稱為“Shopify主題的骨骼”，并且被用于加載店鋪系統(tǒng)的動(dòng)態(tài)內(nèi)容）的會(huì)話對(duì)象，你可以進(jìn)入主題編輯器進(jìn)行設(shè)置，包括標(biāo)題文本、鏈接URL并選擇你要顯示的圖像。

首先，你需要在主題的/sections目錄中創(chuàng)建一個(gè)名為“announcement-bar.liquid”的新文件，從而得到一個(gè)位于標(biāo)題上方的新的會(huì)話。

創(chuàng)建此會(huì)話文件后，你可以添加包含公告消息以及與會(huì)話設(shè)置相對(duì)應(yīng)的if語(yǔ)句的基本標(biāo)記：

以下操作實(shí)現(xiàn)的是一個(gè)“當(dāng)訪客執(zhí)行特定操作時(shí)才會(huì)展示的公告欄”。如果你希望你的公告欄僅在網(wǎng)站主頁(yè)出現(xiàn)，那么你還可以添加一個(gè)復(fù)選框，因?yàn)榭蛻艨赡懿⒉幌Ｍ讼⒊霈F(xiàn)在商店的每個(gè)頁(yè)面上。在你已經(jīng)添加HTML的下方，添加以下模式標(biāo)記和JSON：

如圖所示，JSON數(shù)組中的ID 與你在標(biāo)記中看到的對(duì)象相對(duì)應(yīng)。例如section.settings.show_announcement在模式標(biāo)記中具有相應(yīng)的值，該值在兩個(gè)元素之間創(chuàng)建連接并指示主題編輯器哪些屬性可用。

在這種情況下，主題編輯器上將出現(xiàn)一個(gè)復(fù)選框，如果選中該復(fù)選框，將顯示公告內(nèi)的元素和消息。此外，還將出現(xiàn)第二個(gè)復(fù)選框，使你可以在非主頁(yè)頁(yè)面上隱藏公告欄。

公告欄內(nèi)容的調(diào)整

如果你希望在公告欄中出現(xiàn)文本和超鏈接，你可以添加支持訪問(wèn)文本字段和URL值的對(duì)象。同樣，如果你不需要它們，你可以使用if語(yǔ)句來(lái)隱藏這些內(nèi)容：

一旦你在schema標(biāo)簽中創(chuàng)建了相應(yīng)的值，這兩個(gè)新的section.settings對(duì)象將使你能夠創(chuàng)建用于添加文本和URL的選項(xiàng)。兩者都有特定的輸入類(lèi)型，分別是text和url，它們將在主題編輯器中生成對(duì)應(yīng)選項(xiàng)：

你在本會(huì)話中要添加的最后一項(xiàng)是為公告欄添加用于選擇背景和文本顏色的選項(xiàng)。而且，你可以根據(jù)架構(gòu)標(biāo)記中的值來(lái)調(diào)整主題的CSS。例如，你可以創(chuàng)建“color（顏色）”設(shè)置，該設(shè)置會(huì)將選定的顏色值發(fā)送到CSS屬性。

以本文為例，將出現(xiàn)如下所示的會(huì)話設(shè)置：

你可以將公告欄選定默認(rèn)的黑色，當(dāng)你在主題編輯器上查看時(shí)，你將看到一個(gè)顏色選擇器工具。announcement_bar_color ID將被會(huì)話中的<style>標(biāo)記所引用：

現(xiàn)在，由主題編輯器上的顏色選擇器選擇的十六進(jìn)制代碼是通過(guò)section.settings.announcement_bar_color屬性值表示的，因此你能夠輕松調(diào)整顏色。設(shè)置公告欄文本的顏色也可以采用相同的方法。

然后，你還可以在你的<style>標(biāo)簽中添加一些CSS，以確保文本能夠正確放置。創(chuàng)建完整個(gè)會(huì)話后，你將看到以下內(nèi)容：

添加到主題布局

最后一步是將以上會(huì)話添加到主題布局中。如果你希望此會(huì)話在網(wǎng)站的每個(gè)頁(yè)面上都可用，你需要將其添加到主題布局文件夾內(nèi)的theme.liquid文件中。

要將會(huì)話文件導(dǎo)入布局文件，你需要使用會(huì)話主題標(biāo)簽（section theme tag），并引用Liquid文件名。如果你希望此會(huì)話出現(xiàn)在標(biāo)題上方，那么請(qǐng)你查找{% section "header" %}并將其放在{% section "announcement-bar" %}上方的行中。

此時(shí)，當(dāng)你進(jìn)入主題編輯器時(shí)，你將看到用于對(duì)公告欄進(jìn)行自定義的選項(xiàng)：

點(diǎn)擊【Shopify】獲取更多Shopify高級(jí)自定義工具及主題功能開(kāi)發(fā)教程。

【特別聲明】未經(jīng)許可同意，任何個(gè)人或組織不得復(fù)制、轉(zhuǎn)載、或以其他方式使用本網(wǎng)站內(nèi)容。轉(zhuǎn)載請(qǐng)聯(lián)系：editor@cifnews.com