Dawn 配色方案

通过模板中的所有分区(例如富文本、图片横幅和产品系列列表),您可以从您在模板设置中设置的颜色中选择要应用于相关分区的配色方案。您的模板将应用默认配色方案,而配色方案可随时在模板编辑器中进行更改。添加品牌颜色可确保您的在线商店应用一致的调色板。

管理配色方案

您的商店配色方案在您的模板设置中完成设置。

  1. 点击侧边栏底部的模板设置。3. 点击颜色。5. 若要更改模板中的颜色,请点击所需颜色并使用颜色选择器,或在文本字段中输入新颜色的值。6. 点击保存

对于纯色,请使用颜色选择器选择新颜色,或在文本字段中输入该颜色的值。该字段接受颜色名称 (例如 redblackblue)、RGB 或十六进制颜色值。

对于颜色渐变,请点击颜色框,然后将您的渐变 CSS 代码键入或粘贴到字段中(例如 linear-gradient(red, green)radial-gradient(red, green)conic-gradient(red, green))。如果您的渐变 CSS 代码包含特殊字符、图片或 URL,模板编辑器将显示错误消息。如果您的 CSS 代码有效,模板编辑器预览将在相应位置显示所选渐变。

模板编辑器中的“渐变 CSS 代码”字段

颜色设置

图片和图片填充的背景可在模板编辑器中设置。使用下拉菜单即可在以下颜色中进行选择:强调色 1、强调色 1 渐变、强调色 2、强调色 2 渐变、背景 1、背景 1 渐变、背景 2、背景 2 渐变或反转色。您可以在模板编辑器的预览面板中预览选定的配色方案。

设置 描述
文本 颜色可以应用于分区或块文本。
强调色 1 颜色可应用于 impact 按钮和某些分区的背景。
强调色 1 渐变 输入渐变 CSS 代码以生成您的渐变。
强调色 2 颜色可应用于 impact 按钮和某些分区的背景。
强调色 2 渐变 输入渐变 CSS 代码以生成您的渐变。
背景 1 颜色可应用于 impact 按钮和某些分区的背景。
背景 1 渐变 输入渐变 CSS 代码以生成您的渐变。
背景 2 颜色可应用于 impact 按钮和某些分区的背景。
背景 2 渐变 输入渐变 CSS 代码以生成您的渐变。
反转色 颜色可应用于 impact 按钮和某些分区的背景。使用背景 1 作为文本颜色,并将文本颜色用作背颜色

利用一些让您可选择所用配色方案的设置,您还可以使用渐变。例如,在 Shopify 的第一款免费在线商店 2.0 模板中,您可以设置品牌颜色的渐变,并将其用于取代标准模板色和背景色选项。

设置渐变

Dawn 使用 color_background 设置来自定义 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))。渐变也可以重复。

背景色设置使用 CSS 代码,并包含一个验证检查器,如果您的 CSS 代码中出现图片、特殊字符或 URL,该检查器就会显示警告。如果 CSS 背景代码有效,模板编辑器将在预览面板中显示您的渐变预览效果。

准备好开始使用 Shopify 进行销售了吗?

免费试用