顏色配置
您可以在佈景主題設定中定義不同的顏色配置,然後使用顏色配置選擇器將顏色配置套用到網路商店的不同區段。顏色配置指的是一組顏色。您的佈景主題已套用一組預設的顏色配置,可供您隨時在佈景主題編輯器中變更。您可新增品牌顏色,確保網路商店擁有一致的色調。
範本不具單獨的顏色設定,因此您的網路商店設計可以在整個網站保持一致。範本視為商店的主頁或主要內容。在整個商店中使用不同的顏色配置可能會造成使用者體驗不佳,並讓顧客在未購買任何商品的情況下即離開商店。
此頁面上
顏色配置佈景主題設定
顏色配置是一種佈景主題設定,能以視覺呈現方式對元素及其個別顏色進行分組。您可使用擁有一致色調的顏色配置,將不同顏色指派給佈景主題的各種元素,並且可以使用顏色配置選擇器來進行。您最多可以設定 21 種顏色配置,還可預覽您的顏色在配置中呈現的樣子。
設定 | 說明 |
---|---|
背景 | 顏色會套用至部分區段的背景和外框按鈕背景。 |
背景 (漸層效果) | 漸層的顏色會套用至部分區段的背景。背景 (漸層效果) 將取代所有適用的背景。 |
文字 | 顏色會套用至區段或區塊文字。 |
純色按鈕背景 | 顏色會套用至主要按鈕背景。 |
純色按鈕標籤 | 顏色會套用至主要按鈕文字。 |
外框按鈕 | 顏色會套用至次要按鈕文字和邊框。 |
陰影 | 顏色會套用至陰影。 |
管理顏色配置
您可以在佈景主題設定中設定商店的顏色配置和顏色選項。如需要使用純色,請使用顏色選擇器選擇新顏色,或在文字欄位中輸入顏色值。顏色欄位接受下列顏色名稱和值:
- 各個顏色名稱,例如
red
、black
或blue
- RGB 顏色代碼
- 十六進位顏色值
步驟:
在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
在您要自訂的佈景主題旁邊點擊「自訂」。
點擊齒輪圖示,然後按一下「顏色」。
在「配置」區段中,點擊現有配置或「新增配置」以新增顏色配置。
點擊要變更之內容類型的顏色色樣。
若要設定顏色,請輸入十六進位顏色代碼或從顏色選擇器中挑選。若要將顏色設為透明,請在文字欄位中刪除十六進位代碼。
點擊「儲存」。
套用顏色配置
在佈景主題設定中定義顏色配置後,您可以使用顏色配置選擇器,在您佈景主題的區段和區塊中指派顏色配置。顏色配置選擇器僅適用於某些區段、區塊和一般佈景主題設定。
漸層
您可以在部分佈景主題中設定顏色漸層,讓視覺上獲得更加生動的背景選項。color_background
設定用於自訂 CSS 背景屬性。
漸層選擇器可供您選取漸層的顏色、漸層樣式、角度、位置和不透明度。在佈景主題編輯器中可即時預覽在漸層選擇器中選取的選項。您還可以使用 CSS 程式碼 (包含驗證檢查器) 來建立一個漸層背景。
設定漸層效果
在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
在您要自訂的佈景主題旁邊點擊「自訂」。
點擊齒輪圖示,然後按一下「顏色」。
在「配置」區段中,點擊您要編輯的現有配置。
點擊漸層顏色色樣選項,例如「背景 (漸層效果)」。
如果您先前從未設定任何漸層,則系統會顯示幾個預設選項供您選擇。請選取任何預設的漸層以開啟選項面板。
-
選取漸層選項:
- 選擇線性或放射狀漸層。使用按鈕來選取您偏好的漸層樣式。
- 使用上下箭頭來設定漸層的角度。點按向上或向下箭頭,角度會隨之增加或降低 5%。
- 使用滑桿選取漸層位置,或在欄位中輸入數值。
- 輸入特定的十六位進位顏色代碼,或使用顏色滑桿選擇色調。最近選取的顏色會顯示在漸層選項面板底部。
- 若您希望漸層不透明,請使用右側滑桿選擇漸層的透明度。您也可以在十六進位顏色代碼旁的欄位中輸入百分比。
點擊「儲存」。
使用 CSS 設定漸層
大部分的 CSS background
屬性值皆可用於設定背景顏色。您可以將此欄位用於純色 ( 例如 #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)
)。您也可以重複使用漸層效果。
步驟:
在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
在您要自訂的佈景主題旁邊點擊「自訂」。
點擊齒輪圖示,然後按一下「顏色」。
在「配置」區段中,點擊您要編輯的現有配置。
點擊要編輯的漸層。
點擊「漸層」旁的箭頭,然後選取「CSS」。
在「CSS 程式碼」欄位中,輸入或貼上漸層代碼。佈景主題編輯器預覽會在適當的位置顯示您的漸層。
點擊「儲存」。
移除漸層
在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
在您要自訂的佈景主題旁邊點擊「自訂」。
點擊齒輪圖示,然後按一下「顏色」。
在「配置」區段中,點擊您要編輯的現有配置。
點擊要移除的漸層。
點擊「移除漸層」。
點擊「儲存」。