自定义您的Shopify主题:如何使用图像,颜色和字体

定制你的主题:设计规则,让你在轨道上

当你在购买一个主题时,你会在设置好图像、字体和颜色后评估每个主题。看到一个主题充分发挥其潜力是很好的,但一旦您将其安装到您的商店,您将需要做一些工作以使主题看起来恰到好处。

这就是设计选择的关键所在,当你没有任何设计经验时,这可能会令人生畏。这就是我们今天在Ask Shopify中要解决的问题。

我应该如何定制我的主题?

我刚刚安装了一个主题,我想对它进行一些定制,以适应我的商店。当我在玩我的主题时,有什么是我应该注意的大“不”吗?我没有设计背景,所以指导方针会很好。

答:

使用主题的好处是,许多结构设计决策都是为您制定的。你不需要担心如何布局你的页面,或者把每个图像和每个段落放在哪里。

但是为了让你的商店看起来最好,而且让你的品牌真正闪耀,你需要给主题添加自己的风格。把它想象成装饰房子——基本要素都在那里,但你可以选择颜色和调整装饰。

当你刚进入网页设计的世界时,你可以做出的选择数量是惊人的,甚至会感到不知所措。你可以用任何你想要的颜色!你可以用鼠标点击来切换!

为了帮助你在设计决策的广阔世界中导航,并为你的商店做出正确的决定,我们求助于Lawrence Callender, Shopify的主题专家。他概述了一些关键的设计准则,可以帮助任何人建立他们的主题,并保持品牌和优化。

使用正确的图像分辨率

图片是你的电子商务商店的基石,从你首页的英雄形象到你的产品摄影.当你安装一个新的主题时,你会马上注意到缺少照片是很明显的,所以让你的图片对你的商店有很大的促进作用。

然而,有一些技术上的注意事项可以确保你的摄影作品像你需要的那样努力。

“确保你上传的图片是高分辨率的,所以至少是1024px * 1024px,”劳伦斯说。“如果可能,我们建议上传产品图片时使用Shopify的最大分辨率,即2048px * 2048px。如果你的图像尺寸太小,就会产生像素化、模糊的图像。”

记住图像大小比例

您的产品图像可以在您的商店的多个地方使用,包括您的主页和收藏页面上的特色产品。为了在这些页面上创造一致的体验,在上传图片时要记住图片的高宽比。

劳伦斯说:“当你的产品图片在收藏页面中并排显示时,它们通常有不同的大小。”“为了确保你的图片在这些页面上显示的大小相同,请检查你添加的特色图片的高宽比是否一致。”

一个来自Shopify主题的一致图像大小比例的例子
使用一致的图像比例的例子Shopify的Minimal Theme

因此,如果您希望所有产品图像显示为一致大小的正方形,请以1:1的高宽比保存它们。即使你的图片大小不同,保持一致的比例会给你一个真正干净,布局良好的展示,无论你的产品在你的商店里。

使用调色板

为你的品牌选择颜色可能很吓人。他们在一起好看吗?鲜艳的颜色更适合你的品牌还是中性的颜色?有很多选择,但劳伦斯有一些建议可以帮助你缩小选择范围。

劳伦斯建议:“如果你已经有了一个标志,一般的原则是选择一些与你的品牌或标志相匹配的强调色。”

“如果你还没有指定的品牌颜色,那就从你随身携带的产品类型中寻找灵感。例如,如果你销售木制家具或皮具,棕色、米色和橙色等自然色可能是一个很好的开始。”OB欧宝娱乐APP

为了帮助你找到一些灵感,你可以使用一个在线调色板工具,其中许多工具还会提供其他人或品牌创建的伟大调色板的例子。

来自color Hunt的调色板示例
一个颜色调色板的例子,16进制代码显示在悬停,照顾颜色狩猎

一旦你选择了一些看起来不错、适合你的产品和品牌的颜色,请确保保存代表这些颜色的特定十六进制代码。这是六个字母和数字的组合,在线平台和设计工具将使用它来为你在任何需要使用颜色的地方提供精确的匹配,它看起来像这样:

  • #FFFFFF -白色
  • 非常深的灰色
  • #50B83C -绿色

进一步阅读:尝试自己DIY一个完整的视觉品牌是令人生畏的。这里有一个完整的入门如何从零开始建立一个视觉品牌。

使用不超过3种字体

现在你的图像和颜色已经锁定,是时候考虑如何展示你的文字了。你选择的字体可以是你品牌的重要组成部分,但就像你的其他设计元素一样,一致性是关键。

劳伦斯说:“最好限制自己使用两到三种字体,并在整个设计过程中坚持使用它们。”“当你使用三种以上的字体时,你就开始偏离内容了。OB欧宝娱乐APP读者可能会感到困惑,难以跟上信息流。”

你需要在易读性、一致性和清晰度之间找到平衡。如果你的字体达到了这些标准,无论你选择哪种字体,你都是在正确的轨道上。

选择相互补充的字体

许多最佳电子商务商店设计使用不同字体的组合,这样你就不必拘泥于一种字体甚至一种风格。

劳伦斯说:“当你配对字体时,你想要找到相互补充的字体,不要争夺注意力,一起工作而不会变得无聊。”

有一些标准的方法可以帮助您在所有可用的付费和免费选项中找到完美的配对。

Shopify有一个字体库,可以在您的主题中免费使用,包括系统字体、谷歌字体和从Monotype授权的字体。

探索Shopify字体库

使用同一家族的字体

劳伦斯建议:“找到完美字体组合的最快方法是在同一字体家族中使用不同的字体。”

字体族类似Helvetica或Times New Roman,其中的字体有一些变化。

“来自同一家族的字体已经有了各种各样的粗细和风格,可以很好地配合使用。”

较重的字体可能是字体的粗体版本,而样式变化可能是全大写版本。

一个使用一种字体处理多种格式的例子
使用一种字体的多种方式的例子Canva的字体配对指南

如果你有一个你喜欢的字体,你可以使用一个粗体版本,一个普通版本,和一个斜体版本来区分你的标题和其他信息。这是一种使单一字体家族适用于整个商店的方法,同时仍然可以在不同类型的内容之间提供明显的差异。

配对兼容的字体

如果你以前从未使用过字体,这里有一个关于字体的快速入门。你会发现有几种不同的基本文本样式。

  • 衬线:这些字体在每个字母上都有小脚,比如Times New Roman和Georgia。
  • 无衬线字体:这些字体没有像Arial、Helvetica和你现在正在阅读的字体那样的小脚。
  • 脚本:这些字体是任何看起来像书法或手写的东西。
  • 等宽字体:这些字体的字母间距都是相等的,就是你通常在计算机代码中看到的字体。一个很好的例子就是Roboto Mono。

你可以把两种不同字体的字体组合起来,使它们之间形成强烈的对比。

劳伦斯说:“基于对比的字体组合对于建立层次结构非常有用。”“使用对比鲜明的字体可以明确哪些段落是标题和副标题,哪些段落是正文。”

当你考虑等级时,你实际上只是在考虑如何向客户展示什么是最重要的。在这篇文章中,我们用标题来帮助你弄清楚每个部分是关于什么的。这是一个层次结构的例子,你可以使用不同的字体来帮助你的标题脱颖而出。

如果你还在纠结要配对哪种字体或字体,这个Canva关于字体配对的指南是一个很好的开始。OB欧宝娱乐APP同样,快速搜索“无衬线字体和衬线字体配对”,会出现为你提供免费和付费选项的文章。

有意使用字体大小

无论你选择什么样的字体搭配,你在网站上不同位置的字体大小都应该有额外的意义,并帮助你的客户找到他们想要的东西。

“你的内容越重要,字体大小就应该越大。使用不同大小的字体来突出重要的内容,并告知用户网站的目的和内容。”

一旦你为你的正文和标题选择了字体大小,一定要坚持下去,这样你的客户就能很容易地分辨出什么是标题,什么是段落。你的网站越容易阅读和导航,在你完成销售之前的障碍就越少。

一致性是最好的设计准则

一旦你决定了字体、颜色和一般的品牌方针,你可以为你的商店设计做的最重要的事情就是坚持它们。

劳伦斯说:“优秀的设计往往在一定的限制条件下发挥作用。“许多设计规则实际上只是为你的设计提供一些重点和方向的约束。”

虽然在不同的页面上使用新的字体和颜色,或者只是在心情激动时使用,但请记住,一致性是建立品牌的基石。你希望你的客户能够轻松地识别和浏览你的商店,坚持使用一组核心字体、颜色和样式可以帮助你实现这个目标。

主题: