Shopify主题安装设置演示-Brooklyn

通过文章:如何选择及购买shopify主题,我们已经明白了如何选择适合自己店铺的主题。不过无论你是选择免费主题还是付费主题,都还得根据自己的需要对网站主题进行自定义设置,今天我就通过演示站点exportb2c来展示目前最受欢迎的一款免费主题brooklyn-布鲁克林的安装和自定义设置。
当你注册完shopify然后打开后台依次点击-online store-themes这时候就可以看到系统目前默认的是一款名为debut的主题,接下来我们需要找到brooklyn-布鲁克林主题进行安装。
在找brooklyn-布鲁克林主题之前,你可能还会有2个疑问:
1.shopify后台共支持上传多少个主题呢?
shopify系统默认可以总共上传多达20个主题,但需要注意的一次只能展现一个主题,会出现在current theme板块(正如上图看到的debut主题)其它未发布的主题会出现在more themes-更多主题板块。
2. actions按钮下面的都是什么意思(上图所示)?
preview–预览主题:在安装主题之前可以点击preview预先浏览主题的样式,板式等,付费主题同样可以在付费之前进行预览。
rename–重命名主题:很好理解,为了更好记忆,可以给主题重新命名。
duplicate-复制主题:对主题进行备份操作,如果在你准备自定义主题或者对主题代码进行修改之前,最好做一个当前主题的备份,防止主题修改过程中出现错误但是又不能撤销操作等情况,这时候可以立即启用备份的主题恢复到更改之前的状态。使用duplicate后备份的主题被命名为copy of +复制主题名称,当然你可以点击rename修改备份主题名称。
download theme file-下载主题:如果你打算用电脑上的编辑器修改主题或者shopify后台主题已经达到了数量限制(20个),可以下载主题,下载后即可从后台删除掉,当想要添加这个主题时候再通过upload-上传即可,当然如果你想把主题应用到另外的shopify店铺也可以执行download theme file操作。
edit code-修改主题代码:同样的主题如果你想要更加个性化和更详细的更改,那么前提是你需要对css,html以及liquid有基本的了解。构成shopify主题的大多数文件都包含liquid即shopify模板语言,当然修改主题代码之前切记要创建备份!另外 对代码感兴趣的话可以通过shopify帮助中心提供的代码教程来学习,后面有需要的话我也会分享下技术牛人的一些主题代码更改教程,其实大家更改主题代码的最终的目的都是为了网站能够带给客户最好的购物体验。
edit languages-编辑shopify店铺语言,系统默认是英语,例如你掌握小语种法语这时候又打算专做法国市场,可以将网店语言改为法语。
ok,了解了上面按钮的含义后接下来我们正式安装以及自定义设置brooklyn-布鲁克林主题。
一,安装brooklyn-布鲁克林主题: 安装非常简单,如下操作演示图所示依次点击explore free themes-找到brooklyn-add便可完成安装。
安装完成后在more themes找到brooklyn(需注意主题安装后不会自动发布)如下图所示依次点击actions-publish(发布主题),便可正式启用。
二,自定义设置brooklyn-布鲁克林主题 点击customize进入自定义设置(自定义设置前建议先进行主题备份操作,非常重要!!!)
customize-自定义设置主题主要是对店铺各个页面布局,字体,颜色,内容等进行修改设置。
整个主题界面的结构:
主要4个部分:sections,theme settings,页面切换板块,视图切换板块。
section-主题的结构元素,负责网站每个店铺页面的布局及板块内容。
theme setting-是负责整个网站的配色,字体,以及购物车页面,社交媒体链接,结算页面等。
页面切换板块- 紧挨着theme settings 的那块是不同页面的切换键,点开home page旁边的倒三角符号即可看到其它页面,进行sections设置的时候就需要切换不同的页面操作。
试图切换板块:右面上方三个按钮分别显示的是网店在移动端的展示效果,电脑端带左侧边栏的显示效果,和不带左侧边栏的电脑端全屏展示效果。
ok,接下来我们一步步进行自定义设置:
1.店铺logo,导航栏,公告栏设计 首先从店铺的首页-home page开始,设置sections中 header部分,主要包括logo设计,店铺导航栏设计和announcement bar 设计:
logo-店铺logo设计
不必多说,设置一个体现店铺个性的logo有助于我们更好地宣传店铺形象。刚开始如果不想花钱找人设计的话,推荐以下两个免费logo设计的途径:
https://www.oberlo.com/tools/logo-maker
https://hatchful.shopify.com/
操作非常简单,只需要填下你的产品所属类型,选择心仪的图标,想要的风格,另外添加店铺名称和宣传语等,便可以得到 logo源文件进行下载上传到自己的店铺。
需要注意的是logo 和home page logo的区别在于logo显示在所有店铺页面上,而home page logo主要显示在主页幻灯片slide上的(当主页幻灯片颜色同logo接近的情况下可用ps更改下logo颜色),如果logo在slide上可清晰展示,home page logo不用去设置。
navigation-导航栏设计
导航栏设计我认为是用户体验中最最重要的一部分,主要包括网站顶部导航栏和底部footer menu的设置。依次点击edit menu-add menu item可分别增加导航内容。常见的brooklyn主题导航栏如下,下面这3个导航栏都是pc端展示的效果,需要注意的是当顶部导航栏内容过多的时候便会以sidebar-侧边栏形式来呈现(图3),在移动端的话无论导航栏内容多少,最终都是侧边栏显示的。
图3
此外类似about ,terms页面等导航页面需要我们在shopify后台提前编辑添加,进入shopify后台点击online store-page-add page来编辑,如下图所示:
另外考虑到brookln顶部菜单设置过多的话在pc端查看会折叠显示(如果产品分类以及产品数量特别多,需要很多菜单栏展示的话不建议选brookln主题),不利于用户体验。所以我们可以只设置几个主要的项,其余放在底部footer导航栏。或者如果你产品很多仍坚持想使用brookln主题,那么可以设置二级菜单来实现产品分类,例如你的产品products里面包含手机壳,手表,移动电源,那么直接将它们拖拽到products下即可(见下面演示图),最后不要忘记点击save保存。当然如果还想要三级菜单,方法类似,只不过用户体验不太好,不建议去做。
announcement bar
公告栏通知,比如设置公告:全场买够50usd就可以免运费或者圣诞节期间全场产品享20%扣等等,对于公告信息,我们可以选择只在主页显示或者所有店铺页面都显示。
2.设计slideshow-幻灯片,又可以叫做banner图。
根据brooklyn演示图尺寸1200*800像素,我们的slide图最好要设置成:1200*800像素(3:2的图像比例)。
brooklyn默认的是2个slide图片(如需要更多可点击add slide增加)每隔5秒切换,点击每一个slide,可以修改图片及图片上的文字,以及对应的产品链接。如果你有主打的几款畅销产品,找专业的人来设计slide图是非常必要的 。
方法推荐:1)通过google搜索‘banner editing tools’便可以找到很多在线制作banner的工具,虽然是收费的,但都可以免费试用来找找灵感,比如canva,bannersnack等等。
2) 通过freelancer或者upwork平台发布任务外包给专业的人来操作。
3)如果暂时没想好怎么设计banner图也没有关系,基于每个行业shopify已经提供了一些精美的免费banner图,我们可根据需要来筛选(选择free images查找即可)
3. 设计rich text内容
rich text版块可以用来写一些自己的品牌故事从而更好宣传店铺形象,如果还没想好的话,可暂时隐藏这部分内容(点小眼睛图标即可)。
4. 添加collection list-产品分类展示
我们在上传产品教程中已经为所有产品进行了分类设置,在这里只是需要把它们添加进来展示就可以了,其中标题可以进行修改,比如改成best selling或者feature products 等等。当然如果用不着特别多的collection list同样可以点击小眼睛图标将其隐藏。
5. 设置newsletter-收集客户邮箱
bryoolyn主题内置了newsletter板块,以便我们更好地收集客户邮箱,有新产品发布或者节日价格促销等信息可以便于我们邮
上一个:暂无
下一个:购物商城网站功能如何设计.有哪些功能模块
东胜网站建设,东胜做网站,东胜网站设计