Shopify 商店的 Everything 设计指南

字体、颜色、动作！ 对于喜欢艺术的人来说，设计您的 Shopify 商店可能是一项激动人心的挑战。 但是对于那些在衬线字体和非衬线字体之间进行选择时感到有点冷漠的营销人员和企业家来说，这个过程可能会让人感到非常艰巨。

尽管 Shopify 有许多资源可以让您轻松上手——我们谈论的是预制的主题模板、聘请的专家设计师以及充满应用程序和小部件的市场——但决策瘫痪是一个非常现实的痛苦。 恰当的例子：每个人都想要一个视觉上有吸引力、引人注目并针对转化进行优化的 Shopify 商店——但实现目标说起来容易做起来难。

当谈到 Shopify 商店的设计选项时，天空几乎是极限，您从哪里开始？ 放下颜色样本 — 这是您一直需要但不知道存在的 Shopify 终极设计指南，其中包含您自定义、发布和开始销售所需的所有提示和技巧。

在本文中：
Shopify 主题
产品照片
主题定制
菜单结构
主页标题
3个外卖小贴士
需要帮忙？

Shopify 主题

建立 Shopify 商店的第一步是选择合适的主题。 将其视为您网站的支柱，它决定了您商店的用户体验、视觉美感和功能。

Shopify 的主题商店提供数百种选择，让您可以轻松找到完美搭配。 此外，它们中的大多数都提供多种样式变化，这意味着您可以自定义它们以匹配您的品牌在颜色、字体和应用程序方面的外观和感觉。

感到不知所措？ 使用 Shopify 的过滤器通过以下方式缩小您的选择范围：

• 产品目录的大小。 如果您有许多产品，您可能需要无限滚动或网格布局等功能。

• 你的行业。 时装公司可能需要允许购物者从多种尺寸和颜色中进行选择的主题，而艺术和摄影品牌可能需要更大的产品图片位置。
• 价格。 尽管 Shopify 提供各种免费主题，但更复杂的主题可能要花费高达 180 美元。

尽管您可以稍后自定义排版和配色方案，但如果您选择的主题在整体美学和布局方面与您对网站的愿景相匹配，则自定义过程会更加简单。

产品照片

虽然我们是 Shopify 强大的主题市场的忠实拥护者，但存在一个风险：拥有一家看起来和其他人一样的商店，即使您考虑了定制。 一种快速的解决方案？ 独特的产品照片。

为了将您的品牌与竞争对手区分开来，拍摄能够体现公司身份和态度的产品照片非常重要。 摄影在设定品牌风格和基调方面发挥着巨大作用。

不要害怕玩得开心，对您的产品照片大胆一点：

• 将您的产品照片与一些生活方式照片混合在一起，您的产品是在现场拍摄的，带有支持的道具和模型。
• 尝试不同的布局。 例如，与其总是通过将服装放在白色背景上来拍摄服装，不如考虑做平躺或雇用模特。
• 从有趣的角度裁剪和拍照，而不是直截了当。 这是为您的照片添加风格和风格的好方法。

有关拍摄令人惊叹的产品和生活方式图像的更多提示，请查看此 DIY 指南。

主题定制

既然您已经选择了自己的主题，并且有一整套产品照片可供选择，那么有趣的部分就来了：将网站变成独一无二的东西。

由于 Shopify 提供的便利，定制不需要您进行任何编码。 相反，只需单击主题设置，您就会发现许多方法来调整商店的视觉风格。

颜色

在颜色菜单中，您可以切换商店中许多元素的颜色，包括文本、按钮和表单字段。

专业提示：为了使您的号召性用语 (CTA) 脱颖而出，请考虑将其设置为更大胆、更明亮的颜色，与页面的其余部分形成鲜明对比。

排版

此部分控制整个商店中所有文本的视觉外观。 您可以调整标题与正文的字体类型、粗细和比例。

网站图标

网站图标是出现在浏览器选项卡中的小图标——通常是与公司相关的徽标或简单图像。

• 有合适的图片吗？ 上传后，Shopify 会自动将其大小调整为 32 x 32 像素。
• 没有？ Shopify 有大量免费图片可供您使用。

结帐元素

您的结帐过程是您电子商务网站中最重要的部分。 如果没有出色的结账体验，您可能会冒着购物者在购买过程中放弃购物车的风险。

为了使您的结帐尽可能无缝，您可以自定义：

• 重音、按钮和错误的颜色
• 结帐特定的排版
• 结帐和订单摘要页面的背景图案、颜色或图像

菜单结构

虽然 Shopify 的大多数预制主题都带有这些关键元素，但在开设商店之前，您需要牢记这些提示：

导航栏

导航栏位于每个页面的顶部，允许购物者在页面之间快速跳转。

专业提示：让购物者轻松找到他们需要的东西，而不会让他们不知所措。 为了保持主导航栏相对干净和简单，您可以将类别和子类别添加为隐藏的下拉选项，除非将鼠标悬停在上面。

公告栏

限时特卖？ 运输延误？ 新店营业时间？ 当您需要宣传所有购物者都需要知道的基本信息时，公告栏（也称为全局标题）就是您的答案。

大多数 Shopify 主题都带有公告栏——您只需要自定义它们并通过 Shopify 主题编辑器打开它们。

专业提示：确保您的公告栏与您的网站风格相同（想想品牌颜色、字体和 CTA）。

页脚

页脚是您网站上最被低估的区域之一。 虽然确实很少有购物者会一直滚动浏览您的主页并到达页脚，但当他们需要快速访问信息时，这是他们首先会看到的地方之一。

要编辑页脚，您需要转到在线商店下的导航页面。

专业提示：

• 您的页脚不应该只是导航栏中相同信息的重新散列。 相反，添加重要的链接到有关运输、退货和换货、网站隐私、工作机会等的页面。
• 使用社交媒体图标作为按钮——它会减少页脚的冗长。
• 允许购物者注册电子邮件或短信更新。
• 提供客户服务快速链接，例如热线、“开始实时聊天”或电子邮件帮助。

主页标题

您的主页标题是购物者登陆您的网站时首先看到的内容。 留下极好的第一印象，他们会滚动浏览更多内容。 无法吸引他们，他们会关闭标签。 话虽如此，您的主页标题应该：

• 快速了解您的品牌或销售的产品
• 促进销售活动
• 展示您品牌的态度和身份
• 展示您的顶级产品

无论您的主页标题是视频、轮播还是静态图像，您都应该定期更改它——您永远不希望您的网站对忠实客户来说过时或过时。

3个外卖小贴士

设计您的 Shopify 商店可能会很有趣，但一旦您开始在本质上是空白画布上尝试字体、颜色和小部件，它也可能会失控。 为了使 Shopify 设计过程尽可能易于管理和避免头痛，请牢记以下提示：

1. 功能重于形式，永远

您可以拥有一个漂亮的网站，但如果它不能直观地流动并提供出色的客户旅程，您将看到销售停滞不前。 我们推荐：

• 在开始设计过程之前，专注于您希望通过网站完成的任务。 这将有助于缩小您需要的工具或小部件的范围，并防止您第一次访问 Shopify 应用商店时可能发生的选择瘫痪。
• 实施有用的功能，例如推荐和强大的过滤器，以允许购物者快速缩小他们的产品搜索范围。
• 优先考虑网站速度。 虽然添加大量炫酷的动画、酷炫的应用程序和高分辨率图像很诱人，但您包含的元素越多，您网站的加载时间就越长。 研究发现，页面加载所花的时间每增加一秒，转化率就会降低 7%，页面浏览量会降低 11%。 另一方面，速度更快的网站会在谷歌上获得更高的排名。
• 压缩图像。 像compressor.io这样的免费工具可以帮助您保持高质量的产品图像清晰，同时减小文件大小。
• 在 Shopify 主题商店中选择主题而不是来自第三方网站的主题。 由于第三方主题不经过 Shopify 的评估流程，因此有些主题可能会在后端添加意外添加，从而拖累您的加载时间。

请记住：启动您的 Shopify 商店不是一劳永逸的过程。 在您启动网站并开始看到销售涓涓细流之后，您希望不断优化每个页面，从修改标题图像、重写 SEO 副本或更新图像。 相信我们：虽然这很乏味，但它有助于提高转化率、吸引新购物者并改善客户体验。

专业提示：不确定您的网站在网站速度方面的表现如何？ 查看 Google 的 PageSpeed Insights 工具 - 只需输入您的网址，它就会为您提供有关网站速度改进的见解和建议。

2. 保持网站简单

展示您的武器库中的所有产品、图像和副本很诱人，但大多数情况下，这只会阻碍客户体验。 您不想让您的网站因过多的信息而超载——没有人愿意在杂乱的旧货店的数字版本中筛选产品。 相反，保持简单，专注于你的畅销书，并尽可能减少脂肪（无论是图像、副本、小部件、页面，甚至是产品本身）。

3. 测试一切

如果我们告诉您，您可以通过简单地将一个按钮从蓝色更改为红色来提高转化率怎么办？ 虽然您使用特定颜色、图像和图形启动了您的网站，但无法知道它们是否运行良好。 （我们很乐意为您提供一个成功的公式，但事实是：最佳实践取决于品牌的独特客户、产品和利基市场。）

这就是 A/B 测试的用武之地——这个过程对于确定什么表现最好是至关重要的。 （对于新营销人员，这里有一份 A/B 测试的指南。）与其单纯凭直觉进行操作，不如对这些商店设计元素进行 A/B 测试：

• 不同按钮的颜色
• CTA、小部件和图像的位置
• 导航栏
• 社交媒体图标的设计
• 图像风格——例如，产品与生活方式的图像
• 背景图像或纹理

需要帮忙？

虽然 Shopify 的界面使营销人员和企业家可以轻松地 DIY 他们的商店设计，但如果您是一个完美主义者，并且对您希望商店的外观有清晰的概念，这可能会成为一个耗时的过程。

还好可以寻求帮助！ Shopify 提供了丰富的资源和数以百计的专家，您可以信任他们来打理您的商店。 有时，最好利用专业设计师的专业知识，而不是独自跋涉。

至于我们，在为您的 Shopify 商店提供一流营销方面，AdRoll 为您提供支持。 如果您准备好提高销售额，请查看适用于 Shopify 的 AdRoll 集成。