手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

Shopify Andy 1193次浏览 2个评论

立即注册Shopify-享受14天免费试用和Shopify开店教程指导

本篇Shopify+Fastor主题教程内容主要讲下Fastor的一些基本设置,文章目录如下:

1.Shopify店铺启用Fastor主题

2.Fastor主题基本设置

  • 店铺Logo & 浏览器Logo图标
  • 标题/描述文字字体样式,大小,加粗设置
  • 网站各板块颜色设置

一.Shopify店铺启用Fastor主题

上篇文章我们已经将Fastor主题的Demo导入到了Shopify站点,那接下来要做的就是将其启用。

1.登录Shopify后台,找到‘在线商店’下方的‘模板’中的Fastor主题,点击‘编辑’-‘发布’,则Fastor主题即成为当前使用主题了。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

2.紧接着点击‘编辑’旁边的‘自定义’进行主题设置。

3.在正式使用Fastor模板前,我们还需要输入购买主题之后拿到的‘Purchase Code’,在教程(1)中已经有提到,这里不再重复。

如下图所示:在主题左边栏依次线找到‘模板设置’,在‘License activation’处将Purchase Code输入进去完成主题激活,到这里我们就能够正常使用Fastor了。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

PS:Shopify的付费主题都只能用于1个Shopify店铺,如果你其它Shopify店铺想要用同样的主题,则需要再另外购买,每个‘Purchase Code’都是唯一的。

二.Fastor主题基本设置

同样一个店铺主题,每个人做出来还是会有很大不同,主要原因就是除了不同的Demo演示站点选择外,还有主题设置的个性化差异,因此最终网站外观完全取决于这两项工作的完成度。下面我会将Fastor主题的一些基本设置告诉大家。

在此之前有3点需要大家注意的内容:

  • 将现在的Fastor主题复制一份。 这样即使后续你对主题做了改动,想换回原来的还是可以参照设置的。复制主题比较简单,就是在主题编辑里面,找到复制选项,把整个主题复制下来就行了。
  • 建议使用主题前提前先上传好产品,具体可参考Shopify开店教程目录。当然你先选主题,之后再上传产品及添加相关页面也是可以的,只是说你上传好产品之后,看这个系列教程会更容易操作一些。
  • Fastor主题有很多Demo演示站点,本教程导入的是‘Fastor V5 0 Home’,所以接下来的系列教程就是尽可能做的同这个模板一样,演示站点链接:rt-fastor.shopify.com ;如果你导入的是其它Demo,也没太大关系,大的框架内容都一样的。

1.店铺Logo设置

在‘模板设置’中找到‘Logo and Favicon’。

  • 店铺Logo

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

通过‘模板设置’-‘Logo and Favicon’这里我们可以上传店铺的Logo,调节店铺Logo在电脑和手机端的大小(一般选默认大小即可,手机端都是自适应的),增加‘Alt’文字说明(通过编辑),做好SEO优化。

  • 浏览器Logo图标 -FAVICON

 

Favicon图标的意思就是当客户在浏览器中打开你的店铺地址时候,显示在左上角位置的logo图标。比如你打开Google,那左上角位置就是Google图标,这个比较好理解。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

  • 结算页面Logo设置

店铺结算页面也需要上传下店铺Logo,如果默认不管的话,则会以文字形式展现。比如我的ExportB2C不做任何设置,结账页面会显示如下,访客体验就不太好了

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

我们可以通过‘模板设置’-‘Checkout’-‘LOGO’ 处上传店铺logo,则结账页面就会有如下显示,相比上面的,显然带有Logo的会好很多。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

2.字体样式及字体大小设置-Typography

同样地,我们在模板设置版块找到‘Typography’,可对网站几乎所有版块进行字体样式和大小设置。

  • Headings

Headings即为标题设置,适用于整个模板的通用标题,各个版块的主标题,Front为字体样式,Base Size则为字体大小。

  • Body Text

用于导航栏,产品描述,导航栏等版块的字体大小和样式设置。

这两个版块没有太多要说的,大家多试下就知道哪块有变化了。

3.字体粗细设置-Fronts

想要调整网站各版块字体粗细的话,需要在模板设置-Fronts中来完成。

  • 价格&Heading&Menu Item

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

PS:如果想达到向上图那样的促销价格(最左边的戒指),只需要在Shopify后台把产品的原价和现价都填上就行,采用Shopify提供的批量编辑器便可以轻松实现。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

  • 导航栏字体粗细

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

4.网站主题颜色设置

网站颜色的搭配需要结合你所卖的产品来进行自定义设置,不知道如何设置的话可以参考下同行做的好的Shopify店铺

  • Heading & Links

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

  • Body Text

主要是产品描述,段落的颜色设置。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

  • 原价&售价(Price,Sale Price)

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

  • 按钮颜色设置

除了底部Footer处让客户提交邮箱的按钮,我们的CTA按钮都是通过这个部分来完成的,Primary buttons是设置首页Quick View,加收藏以及加入购物车按钮的颜色;Secondary labels and borders用来设置产品页面Buy it Now 按钮颜色。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

  • From Fileds

这个版块是在我们设置好Mailchimp邮件弹窗后,调整用户输入邮箱框颜色的,后面系列教程会讲到。

  • Body background

这块颜色设置比较重要,它指的是我们整个网站页面的颜色,根据你做的产品来设置就好。比如比较做炫酷的科技产品,可以考虑用黑色,做美妆产品的话选择鲜亮的颜色,做环保相关的产品,可以考虑用绿色等等。

手把手教你用热销主题模板Fastor搭建Shopify独立站教程(2)-主题基本设置

至于其它版块颜色的设置,诸如一些折扣label,Review星星颜色显示,手机底部导航栏颜色设置等等,我就不展开说了,大家都挨个试一下就能明白怎么回事。

其实Fastor主题模板设置内容还有很多,不过在完成上面网站整体配色,字体设置后,其它要做的就是网站每个小的板块设置了,比如网站语言,产品图片展示设置,产品集页面设置等,这些我都会在后面教程中涉及到,大家可以先自行研究下。


ExportB2C.com , 版权所有丨如未注明 , 均为原创丨未经授权,严禁转载,否则本网将保留追究其法律责任的权利。
喜欢 (6)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(2)个小伙伴在吐槽
  1. 非常好,适合新手,请继续更新吧
    匿名2021-01-15 10:53 回复 Android 10 | Chrome 87.0.4280.101
  2. 感谢!!非常仔细
    匿名2021-01-15 10:51 回复 Android 10 | Chrome 87.0.4280.101

error: Content is protected !!