您可以在模板設(shè)置中定義不同的配色方案,并使用配色方案選擇器將它們應(yīng)用于整個(gè)在線商店中的不同分區(qū)。配色方案是一組顏色。您的模板會(huì)應(yīng)用一組默認(rèn)配色方案,您隨時(shí)可在模板編輯器中進(jìn)行更改。您可以添加品牌顏色,以確保在整個(gè)在線商店中應(yīng)用一致的調(diào)色板。
配色方案是一種以視覺(jué)表現(xiàn)方式對(duì)元素及其相應(yīng)顏色進(jìn)行分組的模板設(shè)置。在配色方案選擇器可用時(shí),您可以在一個(gè)可應(yīng)用于您整個(gè)模板的一致配色方案中為不同元素應(yīng)用不同的顏色。您最多可有 21 種配色方案。您還可以在配色方案預(yù)覽中預(yù)覽配色的呈現(xiàn)效果。
您可以在模板設(shè)置中設(shè)置商店的配色方案和顏色選項(xiàng)。對(duì)于純色,請(qǐng)使用顏色選擇器選擇新顏色或在文本字段中輸入顏色的值。顏色字段接受以下顏色名稱和值:
顏色名稱,例如 red、black 或 blue RGB 顏色代碼 十六進(jìn)制顏色值
步驟:
在 Shopify 后臺(tái)中,轉(zhuǎn)至在線商店 > 模板。 在要自定義的模板旁邊,點(diǎn)擊自定義。 點(diǎn)擊齒輪圖標(biāo),然后點(diǎn)擊顏色。 在方案部分,點(diǎn)擊現(xiàn)有方案或點(diǎn)擊添加方案以添加新配色方案。 點(diǎn)擊要更改的內(nèi)容類型顏色的顏色樣本。 若要設(shè)置顏色,請(qǐng)輸入十六進(jìn)制顏色代碼或從顏色選擇器中選擇顏色。若要將顏色設(shè)置為透明,請(qǐng)從文本字段中刪除十六進(jìn)制代碼。 點(diǎn)擊保存。
應(yīng)用配色方案
在模板設(shè)置中定義配色方案后,您可以在模板的分區(qū)和塊中使用配色方案選擇器分配配色方案。配色方案選擇器僅適用于某些分區(qū)、塊和通用模板設(shè)置。
漸變
您可以在某些模板中設(shè)置顏色漸變以獲得視覺(jué)上有趣的背景選項(xiàng)。color_background 設(shè)置用于自定義 CSS 背景屬性。
若要詳細(xì)了解漸變和 CSS 背景,請(qǐng)參閱 Mozilla 的線性漸變和 CSS 背景文檔。
通過(guò)漸變選擇器,您可以選擇漸變的顏色、樣式、角度、位置和不透明度。在漸變選擇器中選擇的選項(xiàng)可在模板編輯器中實(shí)時(shí)預(yù)覽。您還可以使用 CSS 代碼創(chuàng)建漸變背景(包括驗(yàn)證檢查器)。
設(shè)置漸變 在 Shopify 后臺(tái)中,轉(zhuǎn)至在線商店 > 模板。 在要自定義的模板旁邊,點(diǎn)擊自定義。 點(diǎn)擊齒輪圖標(biāo),然后點(diǎn)擊顏色。 在方案部分,點(diǎn)擊要編輯的現(xiàn)有方案。 點(diǎn)擊漸變色樣本選項(xiàng),例如背景漸變。 如果您之前未設(shè)置漸變,則系統(tǒng)會(huì)顯示一些預(yù)設(shè)選項(xiàng)供您選擇。您可以選擇任何預(yù)設(shè)的漸變以打開(kāi)選項(xiàng)面板。 選擇您的漸變選項(xiàng): 在線性漸變或放射漸變之間進(jìn)行選擇。請(qǐng)使用按鈕選擇您的首選漸變樣式。 使用向上和向下箭頭設(shè)置漸變的角度。點(diǎn)擊向上或向下箭頭一次可將角度增大或減小 5%。 使用滑塊選擇漸變的位置,或在字段中輸入數(shù)值。 輸入特定顏色的十六進(jìn)制代碼,或使用顏色滑塊選擇色調(diào)。最近選擇的顏色會(huì)顯示在漸變選項(xiàng)面板的底部。 若要將漸變?cè)O(shè)置為不透明,請(qǐng)使用右側(cè)滑塊選擇漸變的透明度。您還可以在十六進(jìn)制顏色代碼旁邊的字段中輸入百分比值。 點(diǎn)擊保存。
使用 CSS 設(shè)置漸變
大多數(shù) CSS background 屬性值都可用于設(shè)置背景色。您可以將此字段用于顯示純色(例如 #000000、black、rgb(0,0,0,0)、rgba(0,0,0,0)、hsl(0, 0%, 0%) 和 hsla(0, 0%, 0%, 1) 都將生成純黑色背景),或用于顏色漸變(例如 linear-gradient(red, green)、radial-gradient(red, green) 或 conic-gradient(red, green))。漸變也可以重復(fù)。
步驟:
在 Shopify 后臺(tái)中,轉(zhuǎn)至在線商店 > 模板。 在要自定義的模板旁邊,點(diǎn)擊自定義。 點(diǎn)擊齒輪圖標(biāo),然后點(diǎn)擊顏色。 在方案部分,點(diǎn)擊要編輯的現(xiàn)有方案。 點(diǎn)擊要編輯的漸變。 點(diǎn)擊漸變旁邊的箭頭,然后選擇 CSS。 在 CSS 代碼字段中,鍵入或粘貼您的漸變代碼。模板編輯器預(yù)覽會(huì)在相應(yīng)位置顯示您的漸變。 點(diǎn)擊保存。
刪除漸變
在 Shopify 后臺(tái)中,轉(zhuǎn)至在線商店 > 模板。 在要自定義的模板旁邊,點(diǎn)擊自定義。 點(diǎn)擊齒輪圖標(biāo),然后點(diǎn)擊顏色。 在方案部分,點(diǎn)擊要編輯的現(xiàn)有方案。 點(diǎn)擊要?jiǎng)h除的漸變。 點(diǎn)擊刪除漸變 點(diǎn)擊保存。