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 板块，以便我们更好地收集客户邮箱，有新产品释出或者节日价格促销等信息可以便于我们邮件营销，可根据自身需要对标题内容等进行修改。

6. 进行 Product pages-产品页面 Section 设置 完成了 Home page 页面 Section 设置后，对于产品页面的 Section 设置还是很有必要的， 设置比较简单： Enable image zoom：选中可放大产品图片，检视更多产品细节。

Enable product sharing：选中后客户可通过 FB，Twitter 分享产品。

Show product vendor：选中后展示产品释出者信息。

Image display：产品图片显示的 2 种不同方式。

Stacked 指的是所有图片都是大图显示，而 Thumbnails 是一张大图，其余小图展示。

Product Options Form-Show quantity picker：为客户提供产品数量选择。

Picker type-产品变数的检视方式，一种是直接平铺展示，一种是下拉显示。

Add to cart button-勾选后客户可直接点选进入结算介面。

Button size-购物车按钮大小，醒目的按钮有助于客户做出购买决定。

7. 进入 Collection pages 板块设置 主要是设置产品目录内的产品展示方式，通过下面 2 张图我们就很好理解了。

8. 自定义增加 Sections 设置 如果您想要更多地丰富店铺内容，可以在 Shopify 店铺首页增加额外的 Sections 板块来吸引客户，比如店铺宣传视频，Blog，带有文字介绍的产品图片等等。

9. 进行 Theme settings –网站字型和网站配色 网站整体颜色 Colors 和字型 Typography 设置比较简单，如下面演示图一样，左边栏调整颜色和字型，右边网站就会有相应变化，所见即所得。

虽然设置简单，但是越来越多的色彩心理学研究报告显示购物者在初次购买产品的时候 60%-90% 的评估完全基于颜色，其中首尔国际色彩博览会的一项研究更是表示超过 92% 的人购买商品时颜色是不可或缺的一部分。

所以这就要求我们搭配店铺颜色的时候要考虑使用者的体验，选择适合自己所售产品的配色。

比如您的 Shopify 店铺主要卖化妆品，美容品，那么选择粉红色，浅蓝色或者浅绿色能较好地体现柔和的女性色彩；如果 Shopify 店铺中产品更多地想体现健康和环保，那么绿色，蓝色可能更合适些；如果 Shopify 店铺销售比较高级的汽车配件产品，那么黑色，金色，银色更能体现这一特征。

10. 设置购物车页面-Cart Page 购物车页面设置也比较简单，Cart type 有 2 种，Drawer 和 Page。

Drawer 指的是当使用者点选新增购物车按钮时（Add to cart），从右侧滑出购物车信息，而 Page 会跳转到一个新的购物车页面。

推荐选择 Drawer。

另外 Enable order notes 指客户可以下单时候可以进行文字补充，推荐勾选。

11. 设置 Social media-社交媒体连结 当我们构建了 Facebook 商务页面，Instagram，Pinterest 页面想要将连结展现在 Shopify 店铺里面的时候，就需要设置 Social Media 板块，社交连结会放在网站底部。

同时您可以设置一张 Shopify 店铺宣传图片（Select image），当有客户分享您店铺到社交网络时，就会展示出来。

12. 设置 Favicon 和 Checkout 页面 Favicon 是 Fvorites icon 的缩写，也称为网页图示，页面图示或者 URL 图示。

当我们开启网站时候看到的显示在浏览器左边的图示就是 Favicon 了，图示上传到店铺的话会自动切换成 32*32 PX 大小方便更好地展示。

Checkout-付款页面设置可依次通过点选 Shopify-Setting-Checkout 来设置，包括结算页面背景图片 Banner 设置（建议 1000*400PX，可用 PS 撷取），Logo，页面字型，按钮颜色等等。

对 Checkout 页面自定义设置有助于店铺个性化的展示。

Ok，Brooklyn 主题安装及自定义演示基本就是这样，其它 Shopify 主题自定义设置其实都大同小异，我们可以参照 Brooklyn 对其进行修改。

当然如果想要店铺获得更多更好使用者体验的话就涉及到主题代码层面了，Ecommerce University 里面很多技术大神都有分享 Brooklyn 和其它 Shopify 主题代码修改的相关教程，有时间我会整理下同大家分享。