顏色配置

您可以選擇佈景主題設定中所設定的顏色配置,並將其套用於佈景主題中的不同區段 (例如 RTF 文字、圖片橫幅和商品系列清單)。佈景主題會採用預設顏色配置,您隨時可以在佈景主題編輯器中進行變更。若能新增品牌顏色,便可確保網路商店擁有一致的色調。

部分允許選擇顏色配置的設定亦允許使用漸層。舉例來說,佈景主題「Dawn」中,您可以設定品牌顏色的漸層,並將其用於代替標準的強調色和背景色選項。

顏色設定

圖片背景和圖片邊框間距可以在您的佈景主題編輯器中設定。您可以在佈景主題編輯器的預覽面板中預覽所選的顏色配置。使用下拉式選單選擇以下顏色設定:

設定 說明
純色按鈕標籤 前景按鈕文字顏色和強調色使用的顏色。
色調 1 可套用顏色以調整按鈕和部分區段的背景。
強調色 1 (漸層效果) 選取預設漸層,或使用漸層選擇器自訂強調漸層。
色調 2 可套用顏色以調整按鈕和部分區段的背景。
色調 2 (漸層) 選取預設漸層,或使用漸層選擇器自訂強調漸層。
文字 您可以將顏色套用至區段或區塊文字。
外框按鈕 次要按鈕外框使用的顏色,也是文字連結使用的顏色。
背景 1 可套用顏色以調整按鈕和部分區段的背景。
背景 1 (漸層效果) 選取預設漸層,或使用漸層選擇器自訂背景漸層。
背景 2 可套用顏色以調整按鈕和部分區段的背景。
背景 2 (漸層) 選取預設漸層,或使用漸層選擇器自訂背景漸層。

管理顏色配置

您可以在佈景主題設定中設定商店的顏色配置。

  1. 點擊濕畫筆圖示以存取佈景主題設定
  2. 點擊「顏色」。
  3. 若要變更佈景主題中的顏色,請點擊顏色並使用顏色選擇器,或在文字欄位中輸入新顏色的值。
  4. 點擊「儲存」。

如需要使用純色,請使用顏色選擇器選擇新顏色,或在文字欄位中輸入顏色值。此欄位接受顏色名稱 (例如: redblackblue)、RBG 或十六進位顏色值。

漸層

您可以在部分佈景主題中設定顏色漸層,讓視覺上獲得更加生動的背景選項。color_background 設定用於自訂 CSS 背景屬性。

漸層選擇器可供您選取漸層的顏色、漸層樣式、角度、位置和不透明度。在佈景主題編輯器中可即時預覽在漸層選擇器中選取的選項。您還可以使用 CSS 程式碼 (包含驗證檢查器) 來建立一個漸層背景。

設定漸層效果

  1. 點擊濕畫筆圖示以存取佈景主題設定
  2. 點擊「顏色」。
  3. 選取其中一個顏色漸層選項。

  4. 調整以下任一漸層設定:

  • 您可以選擇線性放射狀漸層。使用按鈕來選擇您偏好的漸層樣式。
  • 您可使用上下箭頭來設定線性漸層的角度。點擊向上或向下符號,角度會隨之增加或降低五個百分點。
  • 使用滑桿選取漸層位置,或在欄位中輸入數值。
  • 使用「+」或「-」按鈕來新增色標。此功能會在控制橫桿中新增固定顏色,供您選擇。
  • 您可以輸入特定的十六位進位顏色代碼,或使用顏色滑桿選擇色調。最近選取的顏色會顯示在漸層選項面板底部。
  • 若您希望漸層不透明,請使用右側滑桿選擇漸層的透明度。您也可以在十六進位顏色代碼旁的欄位中輸入百分比。
  1. 點擊「儲存」。

佈景主題編輯器中的漸層選擇器

使用 CSS 設定漸層

大部分的 CSS background 屬性值皆可用於設定背景顏色。您可以將此欄位用於純色 (例如 #000000blackrgb(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))。您也可以重複使用漸層效果。

步驟:

  1. 點擊濕畫筆圖示以存取佈景主題設定
  2. 點擊「顏色」。
  3. 點擊要編輯的漸層。
  4. 點擊[漸層」旁的箭頭,然後選取 CSS
  5. 在「CSS 程式碼」欄位中,輸入或貼上漸層代碼。佈景主題編輯器預覽會在適當的位置顯示您的漸層。
  6. 點擊「儲存」。
    Gradient CSS Code field in the theme editor

移除漸層

若要重設或移除漸層:

  1. 點擊濕畫筆圖示以存取佈景主題設定
  2. 點擊「顏色」。
  3. 點擊要編輯的漸層。
  4. 點擊「移除漸層
  5. 點擊「儲存」。

準備好開始透過 Shopify 銷售商品了嗎?

免費試用