shopify商店模板渐变怎么设置？步骤介绍-ESG跨境

在跨境行业，越来越多的商家选择用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跨境电商联系。