手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

Shopify Andy 601次浏览 4个评论

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

Shopify导航栏设置和优化直接关乎到买家体验,重要性不言而喻。这篇Shopify开店+Fastor主题教程教大家如何设置店铺导航栏。

想要更好地设置导航栏,首先需要了解网站‘Header’(也就是我们常说的网站抬头)。在登录Shopify后台,依次点击‘在线商店’-‘模板’-‘自定义’。之后我们便可以看到‘Header’。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

文章目录:

  • 网站Header-结构及包含元素
  • 网站Header通知栏设置
  • 移动端网站导航栏设置
  • 电脑端网站导航栏设置

一.Header-结构及包含元素

Fastor主题的Header很好理解,如下图所示,红框中的部分就是Header。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

Header结构及元素:

  • Row-行

如下图所示,Row-行是Header元素的重要组成部分,Header都是以行开始的,而且一个行开始,那之前的行便会结束。 下图中的ExportB2C,导航栏便属于一个新的行。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

  • Content-内容

每个行下面都需要包含一些内容,如下图所示,第1个行里面会包括Shopify店铺支持的币种,用户账户注册/登录入口,收藏产品清单-Wish List,店铺联系信息等等。

第2个行里面包含的内容为店铺Logo,导航菜单,搜索栏,收藏清单,购物车信息等等。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

所有行和内容的顺序都是可以通过鼠标拖拽进行调整的,同时通过‘添加内容’可以增加‘Row’或者内容,如下图所示。另外当你不需要某个板块内容时,点击相应内容-找到‘…’,删除即可。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

二.网站Header通知栏设置

Shopify店铺Header通知栏指的是下面这个版块的内容:

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

Header通知栏包括社交图标,自定义文字-Custom text,Button三项内容。

  • 社交图标:

通过‘Social Icons’选项,我们可以显示店铺的社交媒体图标,Facebook,Twitter,Youtube等等。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

当然这里只是进行图标显示设置的,具体各社媒对应的链接设置,你需要依次点击‘模板设置’-‘Social setting’, 在‘Social Links’中填写相应的链接。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

  • Custom text-自定义文字

通常这里填Shopify店铺重要信息通知栏,比如买家普遍关心的运费问题,你可以写全场包邮或者满多少金额才包邮;当然也可以是一些店铺优惠措施,新用户通过折扣码享20%,30%折扣等等。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

  • Button-CTA按钮

引导用户直接点击热销产品的按钮,你可以放上单个产品的链接,或者产品类目-collection,引导用户点击购买产品。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

三.移动端网站导航栏设置

移动互联时代,网上购物近90%以上都是通过手机端来完成的,所以Shopify店铺的网站外观设置更多是要看手机端展示效果,导航栏当然也不例外。

在‘Mobile Navigation’中我们可以先将右上角可视化页面显示为移动版,这样就可以直接看到手机端导航栏效果。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

其实设置导航栏最主要就是先将菜单设置好,如果你的Shopify店铺中还没有菜单,则需要先创建菜单。

通常一个完整的Shopify店铺菜单至少要包含下面4个版块:

  • 产品类目
  • 买家注册登录入口
  • 店铺介绍
  • 联系我们

至于菜单的数量,常见的有主菜单,footer-底部菜单,其它菜单根据自己需要来创建就好。

创建菜单的过程也很简单,在Shopify后台中左边栏找到‘网站地图’,之后点击‘添加菜单’

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

菜单包含2个选项:标题和菜单项,标题没有太多要求,菜单项需要你提前做好产品分类,创建产品集,创建店铺介绍页面,联系页面等操作,通过鼠标拖拽可以调整顺序。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

产品分类可以通过登录Shopify后台,点击‘产品’-‘产品系列’,通常只需要产品名称和标签2个筛选条件便可以创建完成,具体操作可查看文章:产品分类目录Collections的创建

关于店铺介绍,联系页面的创建,可以查看Shopify教程目录相关文章。

以上步骤完成之后,如下图所示,选择创建好的菜单,我们便可以看到手机端店铺导航栏显示效果了。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

点击查看下方GIF演示图:

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

 

四.电脑端网站导航栏设置

相对手机端来说,PC端导航栏设置要复杂一些。

PC端导航栏可以有2种形式,一种是直接调用刚才在手机端创建好的菜单,另外一种就是创建Mega Menu,可理解为可扩展的多级菜单。从表现形式和用户体验上来看,我还是建议大家选择Mega Menu。

如果你只是想调用手机端创建好的菜单,方法很简单,点击‘Main Menu’之后,在‘Content’版块选择勾选‘Use Linklist’,然后选择手机菜单导航栏就行。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

Mega Menu是通过设置‘Main Menu’来实现的,所以你要先了解‘Main Menu’的结构。

Main Menu有2项内容:Parent item和Child item,其中每个Parent Item下面可以包含很多Child Item,这些子目录可以是Banner图,文本,空格,菜单链接等等。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

通过下面这个截图,你就可以很好理解两者的关系了。

  • SHOP /WATHES/ JEWELR&ACCESSORIES / BAGS / OUR BLOG都是Parent Item
  • Spacing-空格是Parent Item下面的Child item-子目录
  • 红框里面的内容都是Child item-子目录,Linklist-菜单

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

需要提醒的一点是,上图中的Watches,JEWELRY,BAGS都是分别新建的3个菜单,如果你的Shopify店铺某个产品类目下面又包含很多子目录的话,需要多建几个菜单来完成。

同时要注意按照总共100%的宽度来调整各个菜单所占的比例,比如你总共有2项,那么各50%就行,3项的话可以像我这样分为33%,33%,34%。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

如果你的产品类目很多的的话,可以通过最下方的‘添加内容’来实现添加多个‘Parent Item’和‘Child item’。

手把手教你用热销Shopify主题模板Fastor搭建Shopify独立站(3)-设置网站导航栏

Ok,Fastor主题的电脑端导航栏大体就是这样来一步步设置,很多内容保持系统默认的就可以,其它细节自己摸索下也能很快明白,这里就不多说了。


ExportB2C.com , 版权所有丨如未注明 , 均为原创丨未经授权,严禁转载,否则本网将保留追究其法律责任的权利。
喜欢 (11)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(4)个小伙伴在吐槽
  1. 请问怎么添加instagram图标和链接?
    匿名2021-03-10 11:29 回复 Windows 10 | Chrome 88.0.4324.190
    • 这个主题目前不支持自定义设置INS图标 :arrow: 需要通过代码来实现了。
      Andy2021-03-18 13:58 回复 Windows 7 | Chrome 86.0.4240.75
  2. 求问这个模板的弹窗在哪里改啊
    匿名2021-01-28 09:41 回复 Windows 7 | Chrome 88.0.4324.104

error: Content is protected !!