跳到内容

第10天:让每个人都能看到它的美丽

第十一章作者:Tim Kock

1.推特今天的引用→2。开始工作吧!

昨天,我们为你的商店设置了后台,所以一切都很顺利。今天,我们将在前端工作——每个人访问时都能看到的部分。

拥有一个外观美观、功能齐全、易于浏览的商店是至关重要的,否则你就不会有多少销售额。

幸运的是,Shopify使得在不到一天的时间内建立一个很棒的商店变得非常容易。这正是我们要做的。

(突出)请注意在构建前端之前,添加并定制所有的产品和集合是非常重要的。否则,你只会给自己增加额外的工作,因为你不得不再次这样做,并确保它看起来很好。[/突出]

今天,我们要去:

  • 为你的商店选择一个主题
  • 使用Shopify的构建器使用自己的品牌定制商店
  • 组织商店,为您的用户创建一个简单和流线型的购物体验
  • 建立一个基本的销售漏斗来吸引和吸引你的客户

好了。

开始网上销售现在与Shopify

开始免费试用

选择一个Shopify主题

有很多Shopify主题从中选择。其中一些是专门为某些行业制作的,而另一些则是为某些类型的商店制作的,比如强调产品摄影的主题或只有少数产品的商店的主题。

Shopify提供了一些免费主题和许多付费主题。付费主题的价格在140美元到180美元之间。由于我们的运营预算只有500美元,所以我们目前将坚持使用免费主题。

一旦你的商店成功了,你就应该考虑付费主题,在你的细分市场中获得更多的转化率和购买量。

要浏览主题,请转到Shopify仪表板左侧的“销售渠道”➜“在线商店”➜“主题”。

shopify主题

向下滚动到“探索免费主题”按钮。

探索主题shopify

探索你的选择,选择你最喜欢的主题。

阿曼达问

“什么样的主题能让我的销量最大化?”

我的回答:我强烈建议选择一个主题,其中至少有一件产品是在“折叠上方”展示的,这意味着它在用户向下滚动之前就已经显示出来了。首页的顶部是最好的空间,不要浪费它!

你的主题也应该非常直观,易于导航。如果主题包含了追加销售技巧,比如“你可能也会喜欢……”,展示了更多的产品,就会获得加分。

所以阿曼达以“简单”为主题,因为它没有浪费任何时间来展示她的产品。

只需选择你的主题选项,然后点击“添加[主题名称]”。要让它上线,你需要点击“Actions”下拉菜单中的“Publish”。

下拉

(记住:如果你决定改变你的主题,你总是需要点击“发布”在这一节,否则你之前的主题将保持不变)。

如果你点击“定制”按钮,你就会看到一个简洁的商店构建器,让你在没有任何编码经验的情况下把所有东西组合在一起。

让我们开始吧。

自定义主题

发布您选择的主题后,单击蓝色的“自定义”按钮开始。

自定义shopify主题

最酷的是你可以在实时预览中看到每一个变化。所以你确切地知道当你点击一个按钮时发生了什么变化-没有惊喜,你可以玩,直到你找到你最喜欢的设置。

您可以从这个构建器构建出几乎每一个页面。只需点击下拉菜单,说“主页”,你可以在页面之间切换。

您将看到以下选项:

  • 主页
  • 产品页面
  • 收藏页面
  • 收藏列表页面
  • 博客页面和博客文章
  • 购物车页面
  • 404错误页面
  • 您创建的自定义页面,如策略页面等。

自定义主题

添加品牌元素

让我们从添加品牌元素开始。转到顶部标签中的“主题设置”。

这是一个非常关键的区域,因为您在这里所做的每一个更改都会影响到整个站点。因此,一旦你添加了你的品牌颜色,例如,它会改变整个网站的所有选项。

点击“颜色”并添加到您的品牌颜色。如果你只是想要强调,我建议将“链接和主按钮背景”改为你的主品牌颜色。阿曼达把它换成了紫色。

改变颜色

接下来,进入“排版”(顺便说一下,这只是字体的一个花哨的词)。

浏览选项,选择一个或两个你最喜欢的。一般的经验法则是,你会想要一些干净、易于阅读的东西,并且能够代表你的品牌的“感觉”。

阿曼达用“Avenir Next”作为标题和正文文本——所以整个网站只有一种字体。她保留了默认的大小,但你可以改变这些大小,看看你最喜欢什么。

接下来,转到“结帐”,并从您的计算机中添加您的徽标文件,以便它显示在客户结帐的页面上。

在shopify购物

滚动到底部,并将颜色更改为您的自定义品牌颜色。Shopify会记住你最近选择的颜色,所以你可以快速点击它们。我建议更改“重音”和“按钮”,但保持错误红色,这样它们更明显。

首页标题

现在回到“Sections”选项卡,点击“Header”。这是你网站的顶部部分,包括你的logo和横幅。

上传你的logo,调整大小。

(突出)Shopify的图片库将保存你上传的任何照片,以便以后访问。所以,既然你已经上传了你的logo,它将等待你选择只需点击一下。[/突出]

对于“公告栏”部分,你总是希望在这里有一些东西来吸引用户的注意力。如果你正在举办盛大的开幕促销,我建议你在这里加上这句话。

单击“显示公告”框,如果您希望公告保持在每一页,则取消单击“只显示主页”框。

在“公告文本”框中输入您的公告。您甚至可以选择网站上的任何特定页面,以便当有人单击公告横幅时将其链接到该页面。

例如,如果你有一个产品或收藏的促销活动,你可以从标题中链接该产品或收藏页面,这样访问者就可以直接访问它。如果你提供免费送货服务,这也会成为一个很好的横幅广告。

(突出)在顶部横幅上添加这个特别优惠是你的“引导漏斗”的一个元素——这是让他们购买的另一步。引导漏斗是将访问者转变为客户的一系列步骤。[/突出]

如果你有公司的口号,你也可以把它填进去。

公司的口号

确保定期点击右上方的“保存”按钮——以防万一。

您将在页面顶部看到3个小图标。你可以使用这些来查看手机版和全屏版的预览。也可以玩一下。对于你的网站来说,在移动设备上看起来漂亮是非常重要的,所以确保你所有的更改在移动设备上看起来也不错。

在大多数主题中,菜单将位于标题中。但在“Simple”主题中,它在侧栏中。

这对我向你们展示它是如何工作的并不重要。

在“菜单”部分,您可以编辑访问者可以从菜单中单击哪些页面。

如果你点击小的“编辑菜单”链接,你会被带到“导航”页面,在那里你可以在你的标题菜单中混合和匹配页面,就像你昨天对页脚所做的那样(与政策页)。

我建议保持简单,也许只有几个按钮:主页,商店,也许还有联系或关于。然后在“商店”下,你可以添加一个下拉菜单,里面有你的主要收藏页面。

当然,这只是一个建议。你可以把你的收藏页放在主菜单中,这样它们更容易访问。

收藏页面

主页的身体

现在看看下面的部分。您将看到一堆关于如何组织页面内容的不同选项。

你可以有一个大的“英雄”照片,占据整个顶部栏。您可以直接进入您的项目。你可以有一张带有文字的照片来描述特定的物品或收藏品,并有一个按钮,他们可以点击进入相应的页面。

在设计这一切的过程中有很多乐趣。

看看不同的“添加部分”选项。你会看到:

  • 博客
  1. 博客:以功能的图像缩略图和文本片段从您的博客帖子。显然,在这21天里你不需要这个。
  • 集合
  1. 收集名单:列出集合的部分。您可以选择每行集合的数量,等等。
  2. 集合:集合中的产品在一个部分中突出显示。阿曼达选择在她的主页上对她的所有4个系列都这样做。
  • 图像
  1. 横幅:横跨整个页面宽度的大照片。你可以选择它显示的高度。
  2. 图文:一半照片,一半描述。您还可以添加一个按钮,引导访问者到某个地方。在她的系列之间,阿曼达展示了一张漂亮的图片,上面显示了对该系列的一点描述。
  3. 幻灯片:幻灯片中的几张照片,可以自动播放,访问者也可以自己点击。
  • 产品
  1. 特色产品:只有一个产品,突出它的产品细节,如价格和描述。
  • 促销
  1. 通讯:一个供用户输入电子邮件的字段。我强烈建议把这个放在你的主页上。每一页,真的。邮件列表很重要。
  • 存储信息
  1. 地图:你不需要这个,因为你是dropshipping。
  • 文本
  1. 富文本:只是一段文字。如果你想谈论你的品牌没有任何图像。我建议尽可能使用图片。
  • 视频
  1. 视频:不需加以说明的,是吗?
  • 先进的布局
  1. 自定义HTML:别为这个操心了。

博客

探索你的选择,看看哪种最有效。

以下是一些一般性建议:

  • 把至少一种产品放在“前面”,这样访问者就能马上看到。
  • 我更喜欢把有特色的照片放在最上面,下面是更具美感和品牌建设的照片。
  • 如果你描述一个产品或系列,总是放一个像“现在购买”这样的按钮,把他们直接引向那个页面。
  • 写出精彩的描述。利用我们之前讨论过的品牌建设,真正吸引你的访问者。
  • 使用好的照片。没有人想买带有蹩脚照片的商品,因为这让产品本身看起来也很蹩脚(令人震惊)。
  • 在主页上放很多产品。我喜欢有一个超长的主页,基本上所有我的商店的项目都在上面。那样什么也藏不住。

下面是阿曼达主页完成后的部分:

主页阿曼达

产品页面

现在让我们来看看你的产品页面的选项,因为为了获得销售,这些选项真的很重要。

在我之前展示的上拉菜单中,点击“产品页面”,然后在侧菜单中也点击“产品页面”。

在此页上,您将能够编辑所有产品页面的显示方式。您可以选择:

  • 一个数量选择器,如果他们想要订购多个
  • 显示产品供应商(不要选择此框-它只会显示您的商店名称)
  • 在社交媒体上分享选项
  • 你的图片和描述在页面的哪一边
  • 显示另一个页面的选项卡,例如您的运输页面
  • 任何缩放选项,让客户可以更近距离地观看照片

产品页面shopify

剩下的页面

使用我们到目前为止所介绍的相同过程,继续调整和构建网站的其余部分。浏览每一页,探索你的选项,玩设置,直到你喜欢它的样子。

构建前端可能会让人感觉不知所措,特别是如果这是你第一次做这种事情。阿曼达对选择正确的选项感到紧张,但我鼓励她,她必须从一些事情开始在她知道什么是最好的之前。此外,我将指导你如何在我们发布之前获得一些有价值的反馈。所以不要想太多![/突出]

开始网上销售现在与Shopify

开始免费试用

第十天回顾

今天,你:

选择你商店的主题——干净、吸引人、易于操作的主题
通过在你的横幅上添加诱人的优惠设置一个基本的引导漏斗
建立你的商店的正面,让你的顾客有一个很棒的购物体验

你的商店终于活过来了!很神奇的。

明天见,我们可以进行微调并开始为几天后的发布做准备。

下一章:第十二章

第11天:建立你的应用帝国——并听取一些意见

你知道那句老话:“应用程序使世界运转”。“好吧,这不是真的说法。但是有很多敬畏……