Shopify建站系列四：主题选择和搭建,Shopify网站自定义

上一篇给大家介绍了shopify店铺的基本设置，一个网站一开始差不多就这些设置，本文开始来进行独立站网站的搭建，这一步算得上是shopify建站的核心步骤之一了，我看能不能在一篇文章写完，如果可以最好。

在着手搭建Shopify独立站之前，首先需要做的就是选择合适的主题。如今，借助主题模板来搭建网站已成为独立站最主流的方式。其最大优势在于无需编写代码，也不必具备编程知识，非常契合外贸人的需求——毕竟做外贸和跨境电商，核心精力应放在业务本身，而不是网站搭建上。

选择好主题后，就是对shopify网站自定义设置和设计，其实也就是网站的搭建过程。

选择主题

Shopify的主题主要来自两个地方就是官方的主题和第三方主题，官方主题包括免费和付费，第三方的主题大多是付费的。

shopify免费——包括基本的网站功能，对于网站风格和功能要求不多的非常适合，官方本来的开发就更贴合他们的源代码，极简风的网站是最佳选择；
shopify付费主题——功能全面，界面美化也更丰富，价格稍微有点高，现在基本上都是200刀往上了，但要说适应性和兼容性，肯定是最好的选择，不差钱的可以上；
第三方主题——很多专门的主题模板商城都有售卖，比如themeforest和template monster价格适中，从几十美元到一百多美元价位都有，选择多，功能美化设计多样化，应有尽有，但是也导致很多多用户选择困难，对于希望功能丰富又想节省成本的用户来说，这可能是最好的选择，不过提醒可别挑花眼了。

那具体什么主题好呢，其实很多主题都很好，我只能说我用过的，一种是官方的免费主题，一种是第三方的，免费的也有好多个，根据不同行业和风格都有，选一个适合自己的就行，

第三方的我自己主要用过Themeforest的Ella，以前是这个商城销量第一shopify主题，现在不知道了，至今仍旧在更新，价格在89刀左右，偶尔有活动，而且是一个综合主题，有多套模板适合多行业。

安装主题

官方的主题安装简单，直接在后台模板中找到合适的添加即可，点击模板，在下方就有很多个免费主题，点击添加，然后会存在模板库，之后点击发布，主题就安装好了。

如图，官方默认的是Dawn，我也就不改了，你想改其他的，你就添加就行，照着图片箭头就安装完成。

第三方主题，你先要去下载，当然你需要先购买，比如在themeforest，在右上角点击Downloads，选中购买的主题，点击下载会有几个选项，选择All files & documents下载。

下载下来的文件不能直接用，需要解压，大部分主题都是如此，解压的文件有使用说明和主题，有的还有多模板通常被叫做子主题，比如Ella里面有一个ella的文件夹包含ella主主题，还有一个文件夹是子主题，其实也是一个个独立的主题，都可以单个使用，只是因为都属于ella的主题，他们没有分开卖，就被当作成子主题。

Ella Shopify 6.7.6有一个zip文件，那个就是真正的主题文件，然后child themes有几个其他行业的主题，可以分别找到他们的zip主题文件，然后把主题文件上传到Shopify，还是在shopify后台的模板这里，不过在右上角的导入模板。

点击上传zip文件，也就是刚说得zip主题文件。

上传过程可能有点久，也可能很快，我搞不懂，总之等到上传完成，就可以在模板库中看到，和前面一样，点击发布就安装好了主题，如图所示。

主题安装好后，直接点击自定义开始建站，其实在模板库也可以先使用，点击自定义，自定义其实就是构建网站，搭好网站，再发布也是可以的，安装主题当然没什么难度，是个会用电脑的就会，只是展示给很多没接触的新朋友。

了解Shopify网站自定义界面

我们就以官方的Dawn主题为例来搭建网站，为何以此主题为例，因为dawn主题是官方，而且功能还比较丰富，对于很多商家是够用的，至于其他的主题，比如上面提到的ella，真要讲的话，需要分篇，而且其他主题那么多，也不可能一个一个来讲，所以挑一个比较有代表性的，大致原理说清，用任何主题也就没啥难度了。

点击Dawn旁边的自定义，进入到网站设计界面，这里你可以看到网站实时的效果。

进行网站自定义，先要了解这个界面的各项功能，其实shopify和和现在的wordpress编辑界面是有些类似。看图上我用数字标记的每一项：

最左侧的竖列三个按钮分别是，每一项设置都列在我画的区块第二部分，分别是：
- 分区(元素列表)，也就是网站页面的所有元素列表，根据网站的结构分成各个区域，每个区域可以添加不同元素；
- 模板设置，其实也就是网站的一些资料和样式，包括logo、颜色、字体，以及分区各个元素的外观调节，
- shopify应用嵌入，可以给网站添加一些额外的应用，比如一些自动化聊天工具。
如上面所说，就个位置就是显示上面左侧各项具体的功能和设置，说明一下分区里面各项是能自由拖动位置的，也可以点击添加分区来添加不同的元素。
模板顶部菜单，显示两项，第一个是页面不同市场(地区)的参考页面，另外就是切换你网站不同页面来设计和设置。
这里可以切换不同尺寸的设备预览和设置，其实这个地方还有恢复和撤销，也就是你设置的上一步或者下一步，你有更改的时候自然会出现。
这边就是页面上每一个元素的设置，比如修改图片，调整颜色文字等，总之每一个元素的外观功能都在这里设置，只要点击中间的元素，就能在此处设置这个元素。

当然看到的自定义界面正中间就是页面的实施效果，在中间点击元素还能在每个元素上下添加其他元素，如下图，点击元素后，会在上下出现+号，就可以添加元素了，可添加的元素必须要主题自身拥有，不同主题有不同元素，具体根据主题而定。

好了，网站的各项设置大致就这些，很清晰明了吧，是不是小白级别的，这个框架基本上适应所有主题，唯一不同的就是不同主题有着不同元素和设置。不过这些设置官方偶尔会调整，但无非是一些设置的按钮的位置换一下，或者增加减少一些设置，大体改变不会有什么影响。

这也是Shopify为何能成为全球普通用户严重数一数二的电商建站平台的重要原因之一。接下来开始从几个方面来介绍搭建网站。

模板设置

首先来对模板进行基本的设置，也就是上文左侧第一列的第二个螺帽按钮，这里的设置差不多都是全局的吧，这个里面的设置有十几二十项吧，但是主要要设置的也就前面几项，我重点说一下前面四个，其他的你遇到需要设置的再来设置即可。

1. 设置logo

这里我就以我做过的一个站点的现有资料来演示，当然你也可以参考官方的Dawn demo，一套官方成品模板，logo总共需要设置三项：

logo，这个会显示在你网站页头上；
logo的尺寸，这里也就是宽度，你可以根据显示大小自己调整；
网站图标，这个通常叫做favicon，会在浏览器的标签页上显示。

上图是上传设置好的，大家可以看到页头处之前的站点名称换成了上传的logo，可以通过改变logo宽度来改变大小，至于图标，浏览器打开你的网站预览，标签上就可以看到。

2. 设置网站颜色

这里可以设置网站的主色调方案，包括背景，文字，按钮的颜色，Dawn主题自带几个颜色方案，如果都不满意，那就添加方案，这样你就可以单独给每一项设置颜色了：

这里设置的颜色并不可以直接用，而是在之后的分区中让你选择一套模板

3. 版式

版式里面主要是设置字体，主要是标题和正文字体，还有调整字体大小，根据你的喜好设置字体即可，可以搜索字体名称，也可以直接点击字体看效果，比如我把字体都改成Inter：

还可以调整字体的粗细，也就是图片中左下角那个列表，题文字可以适当加粗，点选择，右上角保存。

4. 布局(Layout)

在这里你可以

设置网站页面的宽度，通常大部分网站1200px宽度是很正常的，因为主题限制，最大只能1600px，有些主题可能可以设置成全屏，其实这都无所谓，只要不影响浏览，常规就好了，老式笔记本大都在1366px，现在很多都有1920px，为了适配大部分设备，1200px就行，至于手机端，系统会自适应。
还可以调整模板分区之间的距离，以及有些列表元素项目的距离，比如产品列表。

其他项目很多都在有需要的时候来修改吧，或者你有兴趣一个一个看看是什么功能吧。对于全站来说，这几个设置好也就差不多了。

设计页头（标头）

现在我们进行网站的设计，首先就是设计并设置页头，页头也叫页眉，shopify的中文则叫标头，不管怎么说，总之就是网站的顶部区域，不管什么建站方式页头通常都是包括：logo，菜单，然后是搜索，用户，购物车这些元素，当然这也不是绝对的，所以说通常，你可以在页头上添加你想要的元素，但首先是主题有这个元素供你添加。

页头通常可以分多行，但以两行或者三行最多，页头的顶行通常都是一些通知咨询，比如促销，还有产品免运费之类的文字说明，也可以包含社交按钮等。

页头的主行就是logo和菜单了，如图所示，我觉得挺好的，然后右侧，还有地区货币、搜索、用户和购物车，这样的页头是非常标准的。

▼ 设置公告栏

在模板右边你可以设置页头的各个元素，有整个页头的设计，也有每一项元素的设计，我们来简单设置一些页头的顶行，这里叫公告栏：

1. 公告栏配色，这里可以选择刚刚模板设置中的颜色方案，为了突出公告栏我们选择模板3，这样公告栏颜色就比较明显，

2. 公告内容，点击左侧公告，在右侧可以修改公告内容，比如添加一条促销广告，还可以添加促销页面链接。

3. 其他元素

比如我觉得把货币和地区放顶栏不错，打开这个开关，然后记得在页头主栏中把货币和地区关闭，这个需要你建立多市场才能选择地区；
把社交按钮也加上，打开社交按钮开关，但是要把相应的社交链接添加到下面链接栏中，这样社交按钮就会自动显示；
你肯定也看到语言选择器，这个同样需要你建立多市场才能显示。

▼ 设置菜单

主栏上logo已经添加，其他按钮也没什么要设置，主要说一下菜单。

同样是在右侧，菜单有两个项：

主菜单这里是可以切换其他菜单，此处的设置只是菜单如何展示的设置，至于菜单里面的项目就不是这里设置，而是要到shopify后台内容去先创建好菜单，然后在这里选择和切换菜单，这里选择的是什么菜单就会显示什么菜单项，如下图：

我把里面菜单的新闻改成News，再回来看一下：

菜单有子菜单，普通的子菜单，就是点击后出来列表；还有一种超级菜单也叫mega菜单，是点击菜单目录之后会显示一个页面那种菜单如下图mega菜单：

如此一来整个页头是不是就非常完整了，至于其他的元素设置就不需要一一说明吧，就是点点鼠标，根据自身需求设置就好了。

页头也可以添加其他元素块和分区，但是我说过需要主题提供可用的元素。

免费试用Shopify

网站页面设计

默认的界面比较简单，官方的页面内容就包含了几个元素，一个横幅大图和一个产品列表，其实说到这里的设置和设计原理和上面的页头差不多，每一个元素的右侧设置不一样而已，我就来说明一下横幅设置然后添加一下新的分区，供大家参考。

▼ 设置横幅

网站首页的横幅就相当于网站的大招牌，通常由固定大图和轮播(幻灯片)大图两种，默认是固定大图，我们就先来设置一下固定大图，

来看看每一项的设置，我说明一下，然后改动一下，大家看对比：

添加图片，可以添加一张或两张，我等会添加两张；图片叠加透明度，就是表面加个黑色透明图层，根据百分比显示颜色深浅；横幅高度不用说了，越大，横幅越高；
桌面内容位置，就是图片上层的文字和按钮，现在是底部居中，通常都是上下左右居中，等会我调成完全居中；
配色方案，前面讲过，你去选择一个看效果；
动画，这个就是图片的动画效果，dawn主题有几种，比如现在的环境移动，效果是图片慢慢漂移，很慢，但是看得出，其他效果，就等你们切换自己看了；
移动设置，也就是移动设备上的以上设置，你右上角切换到移动预览，然后进行设置；
后面的设置不用管了，需要懂一些代码。

我现在已经上传了两张图然后进行了一些调整，大家看一下效果，其实很简单：

说一下图片表层的文字内容的设置，点击左边标题，然后修改文字就和前面修改公告栏文字一样，还有这里显示的只是标题，还可以添加一段文字介绍，直接点击标题，然后在下面添加一个文本块：

横幅还有轮播，也就是幻灯片，Dawn也是有的，大家如果需要的话可以添加一下。

至于设置和前面大幅图差不多，我就不多赘述了。

▼ 添加分区或区块

因为现在模板添加的分区模块太少，让首页太过简单，所以我来添加几个模块，让主页丰富起来。

如图所示，我添加了collection、image with Text、video、blog posts，这样页面就丰富起来，可以展示的内容也可以更多了，而且各种有用的功能也多了起来，其实dawn主题提供大概二十种分区元素，你可以选择的还有很多：

大家可以根据自己的需求添加不同的分区模块，但也不要太多，会让首页体积过大，只要几种有代表性的即可，或者展示一些热门产品就行，至于如何设置，前面其实介绍了几个模块的设置，基本上大同小异，所以我就不一一介绍了。

设计页脚

现在来设计网站的页脚，大部分网站的页面都是由页头、内容和页脚组成，这是一个完整的页面，设置页脚和页头差不多，也就是添加删除更改元素。默认情况下，Dawn主题的页脚也比较简单，只有一个邮箱收集表，一个社交和一个货币，有需要，但感觉摆的挺乱，而且连一个链接都没有，可以直接在右边的设置中关掉，留一个底部的copyright就行了。