关于shopify开发的入门

最近经手维护以及开发的shopfiy项目还是比较多的，在这块的开发上面积累了些许经验，经日有seo同事问道shopfiy后台文件怎么查找，找不到很多需要的东西怎么办？特在此写一些关于shopify入门的一些知识，只为给后来的同事填填坑，一起学习进步之用。
来来来，干货走起：

进入后台，上面这三个位置算是我们开发者需要知道的核心部分，产品以及分类，和上线后才添加的online store.如果把online store去掉，那所有产品都不存在，都在网站上是不会显示的。

打开产品分类，像里面有缩略图的部分，就是在某个产品分类点进去之后右下角有个collection img，上传之后就会呈现。而在页面上当引入某个分类的时候这张collection  img也会正常显示出来。

点击打开online store界面，这四个部分都是非常重要的，我们依次分说。首先第一个theme主题，类似wordpress里面主题，此处可以上传主题包，一般是zip压缩包。其界面里也是包含很多重要内容，也是每个项目的核心部分，内容展示如下：

其中customize部分类似worpress里面的在线构建网页，只是wordpress用的比较少，但是对于shopify却是神器，这个界面长什么样子呢？大家请看：

这部分是左侧侧边栏，所有的section是构成首页部分的关键，不同的section通过拖拽可以调换位置，我们构建首页的时候根据不同的要求选择不同的section，然后拖拽到不同的位置。那就有同学问了，如果某部分section并不完全符合，我们应该怎么去找到对应的code做修改呢？好，关键的来了，请睁大你迷人的双眼：

点到某个section，进入之后，点击右键查找元素，在这部分section的最外层节点里面有个type属性，就是它，他就是你在code里面找到对应的文件夹的名字。ps：一定要在custiomize界面右键查看代码哦，网站页面这些代码是不存在的。
说到code界面呢，也是在theme界面，再次给大家看下位置：

edit code,点击进入（友情提示，新手尽量不要更改这部分代码），当当当，

清新脱俗的界面映入眼帘，对于经常打代码的你是不是跃跃欲试？废话不多讲，先说说几个文件夹的含义。第一个layout文件夹，首页部分存放位置，名曰theme.liquid，有的叫什么index.liquid。该文件所用就是引入框架，css样式已经首页部分框架搭建等。它与我们最大的作用就是引入css样式，以及js文件。具体引入方式可参照里面的方式，方式多种多样，自行参悟即可。
其次看下这个template文件夹。顾名思义模板，什么页面模板，collection模板都在该文件夹。也是可以自己新建文件夹的，新建重命名之后，在后台product里collection或者page里就可以重新选择新建的模板。操作方式和wordpress雷同。
接下来这个可有意思了，值得大家好好学习研究的文件夹section。此处的妙用即是，凡是此文件夹的内容都是可以在cutiomize界面呈现出来的。这样我们的客户就可以很方便的操作网站的内容了。

看图说话，有木有觉得很熟悉，有没有似曾相识的感觉。没有的话说明你没用心看，不用心何以体会到我这字字如今的境界，昂？哈哈，开个玩笑。这个侧边栏即是上面展示section部分的侧边栏，上面说了这部分通过右键查看代码，找到的type是featured-collection。好，我们就在sectionwen文件夹找到featured-collection.liquid文件。打开之后，请看最下面有个标签：{ schema }{ endschema },里面部分

为了尽可能多的展示，字体有些小，见谅哈。看看上面给上面section侧边栏的截图，有没有很相似？仔细看，如果看出相似之处，那说明你有当码农的慧根。嘿嘿，对你看到的相似之处就是两个又是一一对应的关系。此处添加修改不同的json字符串，那么customize界面就会展示不同的功能模块。是不是很强大？很给力？试想你添加了对应的模块给顾客，顾客添加完数据，你通过liquid语言代码引入到网站页面上来。是不是很完美？因为该文章是入门，所以再深次层的代码解读就需要大家去努力了，在此就不做赘述。
snippets，字面理解，代码块。这部分内容就是已经写好了很多很多代码块或者功能模块，如果那部分需要，只要直接引用即可{%  include ***  %}就100%是引入snippets部分内容，自己也可以写成固定snippets,然后引入即可。
后面的asset文件夹就是存放png文件，以及js，css文件的地方，引入到文件的方式也不尽相同。例如对于favicon的引入<link rel="shortcut icon" type="image/x-icon" href="{{ 'favicon.png' | asset_url }}">，加粗部分就是常用引入图片方式。后面俩文件夹看了，没必要提了，完全没啥可说的，自己研究下即可。
edit code部分基本完结，欲知后事如何，应该没有下回了。噗，言归正传，继续往下看edit languages。你可以更改默认语言，这里比较蛋疼，默认语言不支持中文，我大中华文明竟然这样被抛弃了。而且更蛋疼的是，你改成中文之后的bug,导航部分无法生成下拉菜单，所以千万不要改成中文。宁愿用插件转成中文，也不要把默认语言改成中文。
接下来blog部分，新闻部分，作为电商网站，这部分用的不太多。简单来说这部分也是以页面的形式编辑的，就是page的编辑器以及样式。在里面可以大大广告之后，在页面的侧边栏等将这些展示出来，起到引流的作用。
后面的pages部分，如果懂得wordpress,那这部分就兼职熟的不要不要的。标题，内容，模板引入等等。这里有一点值得提一提，下面有个seo的工具

什么title,description,url都是可以更改的。尤其是url的更改，就可以改成顾客所需求的url，增加用户体验
来来来，最后一个点navigation。此处可以更改页面的导航栏，也可以在页面的footer部分增添新导航。增加新的导航就如图

在link里面选择展示的内容，如果name没写，选择好link之后，name就会自动填充当前link。而且所有增加的nav都是可以拖拽调换位置的，有人就说了如果想增加子菜单是不是直接拖到对应父nav下面就可以生成子菜单了？非也非也，子菜单的这种添加方式是有bug的，有时候不生效。最有效的方式就是返回前面add menu，再新家一个nav，名字就是需要添加的父nav的名字。再将子菜单添加进去，保存刷新页面，页面就会完美呈现子菜单了。
这次的入门教程就写到这里吧，有时间我会再更新第二部的，让更多的人熟悉shopify，熟悉liquid，更多的人参与进来。