在跨境行業，越來越多的商家選擇用shopify建站開店，減少對平臺的依賴，操作更自由，今天分享的是shopify商店模板的漸變設置，來將你的店鋪設計的更加特別吧！

漸變

您可以在 Dawn 中設置顏色漸變以獲得視覺上有趣的背景選項。color_background 設置用于自定義 CSS 背景屬性。

提示:

若要詳細了解漸變和 CSS 背景，請參閱 Mozilla 的線性漸變和 CSS 背景文檔。

通過漸變選擇器，您可以選擇漸變的顏色、樣式、角度、位置和不透明度。在漸變選擇器中選擇的選項可在模板編輯器中實時預覽。您還可以使用 CSS 代碼創建漸變背景(包括驗證檢查器)。

備注

目前尚不接受將圖片作為背景色。

設置漸變

PC:

在 Shopify 后臺中，轉到在線商店 > 模板。

找到您要編輯的模板，然后點擊自定義。

點擊模板設置。

點擊顏色。

選擇其中一個漸變選項。

如果您之前未設置漸變，則系統會顯示一些預設選項供您選擇。您可以選擇任何預設的漸變以打開選項面板。

如果您已設置了漸變，點擊漸變選項即可直接打開選項面板。

選擇您的漸變選項：

您可以在線性漸變或放射漸變之間進行選擇。請使用按鈕選擇您的首選漸變樣式。

可通過向上和向下箭頭設置漸變角度。點擊向上或向下符號一次可將角度增大或減小 5%。

使用滑塊選擇漸變的位置，或在字段中輸入數值。

您可以輸入特定顏色的十六進制代碼，或使用顏色滑塊選擇色調。最近選擇的顏色會顯示在漸變選項面板的底部。

如果您想將漸變設置為不透明，請使用右側滑塊選擇漸變的透明度。您還可以在十六進制顏色代碼旁邊的字段中輸入百分比值。

點擊保存。

蘋果系統：

在 Shopify 應用中，輕觸商店。

在銷售渠道部分，輕觸在線商店。

輕觸管理模板。

找到您要編輯的模板，然后輕觸自定義。

輕觸編輯。

點擊模板設置。

點擊顏色。

選擇其中一個漸變選項。

如果您之前未設置漸變，則系統會顯示一些預設選項供您選擇。您可以選擇任何預設的漸變以打開選項面板。

如果您已設置了漸變，點擊漸變選項即可直接打開選項面板。

選擇您的漸變選項：

您可以在線性漸變或放射漸變之間進行選擇。請使用按鈕選擇您的首選漸變樣式。

可通過向上和向下箭頭設置漸變角度。點擊向上或向下符號一次可將角度增大或減小 5%。

使用滑塊選擇漸變的位置，或在字段中輸入數值。

您可以輸入特定顏色的十六進制代碼，或使用顏色滑塊選擇色調。最近選擇的顏色會顯示在漸變選項面板的底部。

如果您想將漸變設置為不透明，請使用右側滑塊選擇漸變的透明度。您還可以在十六進制顏色代碼旁邊的字段中輸入百分比值。

點擊保存。

安卓系統：

在 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))。漸變也可以重復。

步驟：

PC：

在 Shopify 后臺中，轉到在線商店 > 模板。

找到您要編輯的模板，然后點擊自定義。

點擊模板設置。

點擊顏色。

點擊要編輯的漸變。

點擊“漸變”旁邊的箭頭并選擇 CSS。

在 CSS 代碼字段中，鍵入或粘貼您的漸變代碼。模板編輯器預覽會在相應位置顯示您的漸變。

點擊保存。

蘋果系統：

在 Shopify 應用中，輕觸商店。

在銷售渠道部分，輕觸在線商店。

輕觸管理模板。

找到您要編輯的模板，然后輕觸自定義。

輕觸編輯。

點擊模板設置。

點擊顏色。

點擊要編輯的漸變。

點擊“漸變”旁邊的箭頭并選擇 CSS。

在 CSS 代碼字段中，鍵入或粘貼您的漸變代碼。模板編輯器預覽會在相應位置顯示您的漸變。

點擊保存。

安卓系統：

在 Shopify 應用中，輕觸商店。

在銷售渠道部分，輕觸在線商店。

輕觸管理模板。

找到您要編輯的模板，然后輕觸自定義。

輕觸編輯。

點擊模板設置。

點擊顏色。

點擊要編輯的漸變。

點擊“漸變”旁邊的箭頭并選擇 CSS。

在 CSS 代碼字段中，鍵入或粘貼您的漸變代碼。模板編輯器預覽會在相應位置顯示您的漸變。

點擊保存。

刪除漸變

若要重置或刪除漸變：

PC：

在 Shopify 后臺中，轉到在線商店 > 模板。

找到您要編輯的模板，然后點擊自定義。

點擊模板設置。

點擊顏色。

點擊要編輯的漸變。

點擊刪除漸變

點擊保存。

蘋果系統：

在 Shopify 應用中，輕觸商店。

在銷售渠道部分，輕觸在線商店。

輕觸管理模板。

找到您要編輯的模板，然后輕觸自定義。

輕觸編輯。

點擊模板設置。

點擊顏色。

點擊要編輯的漸變。

點擊刪除漸變

點擊保存。

安卓系統：

在 Shopify 應用中，輕觸商店。

在銷售渠道部分，輕觸在線商店。

輕觸管理模板。

找到您要編輯的模板，然后輕觸自定義。

輕觸編輯。

點擊模板設置。

點擊顏色。

點擊要編輯的漸變。

點擊刪除漸變

點擊保存。

以上便是shopify商店模板漸變設置的步驟分享，用shopify開店，需處理的事情是十分多的，想要將店鋪運營好，需要不斷地學習和積累經驗，相信最好的收獲也是極好的。

特別聲明：以上文章內容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。