Shopify免费主题Brooklyn安装设置演示教程

即刻注册Shopify,跟着WaimaoB2C精心准备的Shopify开店教程一起开始外贸独立站之旅!


上篇文章简要介绍了Shopify主题下载与安装过程中需要注意的一些事项,本篇以及下一篇文章以waimaob2c.myshopify.com这个演示站点和Brooklyn模板为例,来详细说明Shopify主题的基本设置过程以及Shopify主题代码级别上的一些必要的修改。

在开始之前,需要了解的是,目前大部分主题是支持Shopify的Section功能的,如果不支持Section功能,则本篇文章不具有参考性。Shopify官方购买的主题都是支持Section功能的,第三方主题网站判断shopify主题是否支持Section功能要看主题的介绍中是否有写支持section功能,或者直接联系主题作者确认。

另外,不同的主题,设置选项和功能会有些不同,甚至会有很大的不同,本篇文章无法面面俱到,只能提供参考思路,有任何问题可以在Shopify论坛 waimaob2c.cn (如果还没有论坛账户请点击本邀请链接注册论坛账户) Brooklyn主题专版提问交流,获取帮助。

以Brooklyn为例讲解Shopify主题的安装设置

主题在安装之后,点击Customize按钮就可以进入到主题的设置页面了。如下图

shopify主题安装

当前页面大致可以分为三大区域,功能与结构如下

区域1 左侧边栏

  • 点击左上角蓝色背景的Shopify Logo可以返回Shopify的后台,按钮旁边为当前主题名称
  • 主题名称下方有两大板块以Tab的形式显示,分别为Sections和Theme Setting
  • Section负责的是当前单独页面的布局设置,下方的功能设置内容随着右侧区域2的页面改变而改变
  • Theme Setting负责的是网站全局颜色,字体,购物车页面,结款页面的设置,不随着右侧区域2页面的改变而改变
  • 左侧边栏的最下方Theme Action按钮可以帮你快捷跳转到Edit Code页面和Edit Languages页面,对主题进行更复杂一些的设置。
  • Theme actions按钮右侧的两个箭头按钮可以对你的操作退回到上一步或者前进到下一步

区域2 右侧顶部边栏

  • 不同页面切换按钮
  • 同一页面不同屏幕大小预览按钮 (鉴于目前移动端流量普遍在50%以上,所以,无论对哪个页面的修改,建议都要查看下移动端屏幕大小下网站内容的排版显示)
  • 保存按钮

区域3 右侧主题预览窗口

下面就以不同页面的功能设置来详解Shopify主题Brooklyn的设置。

Brooklyn主题网站首页的设置

Brooklyn主题编辑时,网站首页在左侧边栏共有两个大项需要设置,一个是设置页面布局的Sections,一个是设置网站整体颜色,字体,风格的Theme Setting。

Sections设置

Sections下有四个固定的Section分别为Sidebar menu,Header,Slideshow,Footer;Brooklyn主题首页还支持众多的自定义的Sections。他们的设置如下:

Sidebar Meun设置

Sidebar Menu是Brooklyn主题特有的一个功能,在移动端较小屏幕上显示网站内容的时候,网站顶部的菜单通常会以Sidebar Menu的形式存在。如下图

shopify主题安装

在电脑桌面,当网站顶部的主菜单因为内容太多盛不下的时候,Brooklyn会自动将顶部菜单隐藏,而以左侧边栏的方式隐藏存在。

shopify主题安装

当点击左上角的三个横线标志时,侧边栏会从左侧划出,显示效果如下图

shopify主题安装

因此,如果在电脑端如果不想以左侧边栏的形式展示主菜单的话,就要控制主菜单项目的数量和每个菜单项目的字符长度,避免自动折叠。例如将主菜单做成二级菜单展示(二级菜单设置教程见),将Contact us改为Contact,将And改为&,将菜单字体调小,不使用粗体,等等等等。

如果实在不好控制菜单的数量和长度的话,可以通过修改代码 ( Edit Code) 的方式将网站首页的显示宽度调宽。后面一篇文章会详细说明如何对Brooklyn主题做一些修改。

点开左侧边栏的Sidebar Menu,会显示要你设置Primary Menu和Footer Menu,点击Select Menu,选择想要显示在侧边栏的Primary Menu和Footer Menu菜单项目就可以了。勾选最下方的Enable Search,会在侧边栏的最上方添加一个搜索框。

Header设置

Header设置的是网站顶部的内容,包括 网站主菜单Menu, 网站的Logo,显示在Slideshow上的Home Page Logo,Logo的尺寸设置,网站顶部搜索框的显示与否,搜索框的显示方式,网站顶部通知栏的设置。

网站的Logo是显示在网站所有页面的Logo,Slideshow上的Home Page Logo是为了防止Slide和你的Logo颜色差不多,导致Logo显示不清楚的问题而单独为网站首页设置不同Logo而存在的,如下图:

shopify主题安装

当你的Slide图片为灰黑色的时候,黑色的Logo就无法显示清楚,这个时候就需要使用Home Page Logo单独设置Slideshow的Logo,如下图,灰黑色的Slide配合白色的Logo,可以将Logo信息凸显出来。而在其他网站页面,则显示的还是黑色的Logo。

Shopify主题设置

Slideshow设置

Slideshow设置包括两部分,一部分是Settings,是对整个Slideshow的控制设置,包括轮播图片是否自动切换,每多长时间切换一次,Slideshow上面的文字的颜色设置,按钮颜色以及按钮上的文字颜色设置;另外一部分是Content,是对Slideshow每张图片的单独设置。

点击Content项下的Add Slide可以添加新的图片到Slideshow,每个Slide的设置内容包括3个部分:图片,图层,显示文字内容。Shopify官方Brooklyn演示站点的Slide图片的尺寸是1200*800px,所以推荐使用长宽比为3:2的图片,可以使用PS裁切图片到3:2的比例,同时要保证图片的质量,建议长度不低于1200px,同时要看文件大小,太大的文件会严重影响网站的打开速度,因此,要在图片的清晰度,与文件尺寸这两个关键点上找到一个平衡。如果有多张Slide图片,建议所有的Slide图片尺寸要一致。

另外,在之前《关于Shopify图片的一些补充》那篇文章中提到的,在制作Slide图片的时候,一定要将重要的图片信息展示在图片中间,同时图片上不要添加任何文字内容,因为在电脑上可以正常显示的图片,在手机上会被裁切部分显示,而现在移动端的流量可以占到总流量的50%甚至90%以上,也就意味着有相当一部分人可能因为图片被裁切而无法看到你想要展示的重要信息。如下图,左侧为电脑上正常显示的图片,右侧为手机上显示的被裁掉的图片。

shopify主题设置

Overlay可以为你的图片添加一个单颜色的图层,以凸显你的文字内容。如果你的Slide图片色彩艳丽而且色彩复杂,你在Slide上添加的文字就很难显示出来,网站访客的阅读体验就会差很多。通过Overlay功能为你的Slide图片添加一个单色的图层,并设置一定百分比的透明度,可以提高你的Slide文字的显示效果,提高用户体验。如下图

shopify主题设置

Overlay 黑色 0%

shopify主题设置

Overlay 黑色 30%

Text & Footer设置

Text则为设置每个Slide上显示的文字内容,以及按钮链接地址。

当然,如果你不想在你的网站首页显示Slideshow,你可以删掉所有的Slide,则网站首页不再显示Slideshow轮播大图板块。

Footer设置的是网站底部的内容,Setting部分设置底部菜单栏的内容,Theme Setting设置的是网站底部的社交网络账号信息。

自定义Sections设置

除了以上四个固定的Section设置之外,Brooklyn主题在网站的首页还支持众多的自定义的Sections,点击Add Section,就可以跳转到可添加的Section的列表,点击你想要添加到网站首页的Section,该Section的内容就会以预览的方式显示在网站的首页,只有点击该section右侧的Add按钮,再点击右上角的Save按钮保存之后,该Section才会真正的添加到网站的首页。Section的内容包括:

  • Blog Posts – 将博文摘要内容展示在网站的首页
  • Collection List – 将产品目录列表展示在网站首页,Brooklyn主题支持在首页显示的目录数量最多为9个。
  • Featured collection – 将指定产品目录的产品展示在网站首页
  • Image with text – 设置图片与文字信息展示在网站的首页
  • Feature product – 将指定产品的图片,标题,价格,描述信息展示在网站首页
  • Newsletter signup – 将邮箱订阅按钮添加到网站首页,当用户使用本功能提交他们的邮箱之后,Shopify系统会在后台自动创建一个Customer信息
  • Map – 将地图信息添加到网站首页
  • Rich text – 将富文本信息展示在网站首页
  • Video – 添加视频到网站首页
  • Custom HTML – 添加自定义的HTML内容到网站首页

添加到网站首页的Section都会展示在左侧边栏的Sections项下,自定义添加的Section在右侧都会有一个眼睛图标和六个点的图标,如下图:

shopify主题设置

点击眼睛图标可以将该Section隐藏显示,将鼠标放在右侧的六个点上,鼠标指针变成小手,可以对这些section进行上下拖动排序。

要删除某个Section,需要点击该section进入section设置页面,在最下方找到Remove Section按钮,点击该按钮就可以删除该section了。

自定义添加的section的设置都比较简单,完善设置信息,并依据右侧预览窗口里面的显示效果进行调整就可以了。

Theme Setting设置

Theme Setting设置的是网站整体的配色Colors,字体Typography,购物车页面Cart Page,社交网络信息 Social Media,网站图标Favicon,网站结款页面Checkout,以及网站主题预设风格切换的设置。

Colors & Typography设置

这里Colors的设置和Typography的设置都比较简单,在左侧边栏调整之后,在右侧网站的预览窗口就会实时的显示出来实际效果。虽然这些设置都比较简单,但是里面的学问却大的很,尤其是网站的配色,对消费者的购买行为会有潜移默化的影响,感兴趣的朋友可以去Google搜索相关的研究,也可以看WaimaoB2C之前的文章《Shopify主题的选择》里面的简要的介绍。

Cart Page设置

Brooklyn主题的购物车支持两种方式,一种是右侧滑出购物车页面Drawer,即当用户点击Add To Cart按钮之后,会在当前页面的右侧滑动显示购物车信息,如下图;另外一种是直接跳转到全屏的购物车页面Page,当用户点击add to cart按钮之后,页面会跳转到购物车页面。Cart Page页面以哪种方式显示,可以按照你的需求进行选择。

shopify主题设置

在Cart Page设置页面,勾选Enable order note可以在购物车页面添加一个可以输入的文本框,方便客户对订单做一些补充说明。显示效果如上图右侧白色方框输入区域的Special instructions for seller。

Social Media & Favicon设置

Social Media设置板块可以将你的社交网站链接地址添加到网站的底部,还有就是网站产品页面,博客页面的分享按钮显示与否。另外,在Social Medie设置板块最上方有一个设置Social Share Image的地方,可以设置当你的网站被分享到社交网络上的时候,在社交网络上显示什么图片。

Favicon设置的是浏览器上的图标文件,图标文件最好是正方形的,在文件上传之后,图片会自动裁切成为32*32像素的小图标。

Checkout设置

Checkout的设置内容包括Banner的背景图片设置,Logo的设置,内容显示区域的背景图片设置,客户提交收件信息的表单背景颜色设置,结款页面文字字体设置,按钮颜色设置等等信息。这些内容的设置也都比较简单,不过在右侧预览窗口是无法显示Checkout页面的,因此在设置过程中要看到设置的效果,就需要在新浏览器标签页中打开网站的结款页面,边设置,边保存,保存之后刷新结款页面浏览设置好的页面的效果。关于网站结款页面的更多的设置需要在网站后台 – Settings – Checkout页面进行操作。

通常一款主题会有多个风格配色可供选择,在Theme Setting的最下方,可以对这些风格配色进行切换,Brooklyn支持两种风格,Classic和Playful,在这里可以一键切换风格,而无需重新安装主题。

关于Checkout页面的优化,提高转化率,可以查看这篇文章介绍 – Brooklyn主题的优化

主题的其他页面设置

在右侧顶部边栏下拉选择框中选择Product Pages页面之后,在下方会出现某一款产品的详情页面。在左侧边栏的编辑区域,除了Sidebar Menu,Header,Footer之外,在首页出现的其他Section会通通消失,由Product Pages Section代替。除了首页,Brooklyn主题目前还不支持在其他页面添加自定义的Section。

Product Page设置

点击Product Pages Section之后,就进入到了产品页面的设置。所有设置的项目是应用于所有的产品页面的,而不是仅应用于当前产品页面。产品页面可设置的项目包括:

  • Enable image zoom – 是否允许图片放大功能
  • Enable product sharing – 是否显示社交分享按钮
  • Show product vendor – 是否显示产品的厂家/品牌信息
  • Image display – 产品图片的显示方式,Stacked(所有图片以大图的方式显示);Thumbnails(一张大图加其他小图的方式显示),此设置只在电脑桌面上会有不同的显示,在移动端看不出有任何的变化。
  • Show quantity picker – 是否显示数量选择按钮
  • Picker type – 变体选择方式是下拉展示还是平铺展示
  • Add to Cart button size – 设置加入购物车按钮的大小

Collection Page设置

Collection Page设置的是某一个产品目录里面的产品的展现方式。可设置的项目包括:

Grid Style – 产品排版方式,Grid (整齐排布) 还是Collage (拼接排布),如下图

shopify主题设置

Grid (整齐排布)

shopify主题设置

Collage (拼接排布)

当产品列表页面选择Collage的方式对产品进行排版的时候,你可以通过在后台改变产品的排列顺序来决定哪个产品以大图的形式展示,哪个产品以小图的形式展示。下图为Brooklyn主题Collage方式展示产品的时候的序号,由下图可知,每6个产品中就会有首尾两张产品图片以大图的形式展示,因此,大图显示的产品的序号分别为1,6,7,12,13,18,19,24…:

Shopify产品排序

在了解了产品的排序方法之后,就可以在Shopify后台通过手动选择哪些产品展示在特定类目里面,然后,对该类目下面的产品进行上下拖动排序,排在1,6,7,12…位置上的产品在类目产品列表页面展示的时候就是以大图展示的产品了。如下图:

Shopify产品排序

除了页面产品的排布方式,可设置的内容还包括:

Enable collection sorting – 是否允许产品排序,如果选择允许产品排序的话,在产品目录名称下方就会出现Sort By的下拉选框,用户可以选择不同的排序规则对该目录下的产品进行排序,排序的规则包括:按照销量排序,按照首字母从A到Z或者从Z到A进行排序,按照价格从高到低或者从低到高进行排序,按照上传产品的日期进行排序。

Show collection tags – 是否显示产品的Tags,如果勾选显示产品目录的Tags的话,在产品目录下方就会将目录下属产品的所有的Tags横排罗列显示在目录名称下方。也就是说,在这里Tags起到的作用是产品筛选功能。例如,你可以给产品添加颜色Tags,这样在产品类目名称下方就会出现颜色的Tags,选择红色Tag,所有满足这一条件的,红色的产品会显示在下方。

shopify主题设置

Show product vendor – 是否显示产品的厂家/品牌信息。如果勾选,在产品列表上的产品价格下方就会出现对于的Vendor信息。

shopify主题设置

Collection List Page设置的是产品目录的列表页面,你网站所有的产品目录会在这个页面罗列展示。展示方式有两种,一种是自动展示所有的产品目录到Collection List Page,然后按照产品目录名称首字母从A到Z或者从Z到A进行排序,或者按照产品数量从多到少或者从少到多进行排序,或者按照日期进行排序。

另外一种方式是手动选择要显示的产品目录,并且手动排序这些产品目录。在Select collections to show项下选择Selected之后,在Content下点击Add Collection就可以将你想要添加的Collection添加到List Page页面上了。当添加了多个Collection到List页面之后,就可以手动上下拖动Collection进行排序了。如下图:

shopify主题设置

Brooklyn主题的Customize设置基本上就是这些内容了,上文中没有涉及到的具体的设置,以及其他页面的设置,如果有任何问题,欢迎来Shopify论坛 – WaimaoB2C.cn互动交流。

想要了解更多代码方面对Brooklyn主题的设置修改,可以查看下篇文章:《Shopify主题Brooklyn的优化

shopify