序言

那个系列产品的该文主要所写从事前端合作开发的，想进阶shopify的开发人员。

甚么是shopify？

Shopify是由Tobi Lütke创立的澳大利亚电商应用软件合作地产商，公司总部位于澳大利亚伊斯坦布尔多伦多。

Shopify是一站式SaaS商业模式的B2C服务网络平台，为B2C商家提供构筑实体店的技术和模板，管理工作全平台的网络营销、贩售、缴付、仓储等服务。

浅显话：shopify是欧美国家的两个B2C网络平台，如果你想做外贸出口，能借助于那个网络平台，它和Amazon的差别是，后者是独立站，你能有他们的域名（伺服器，资料库，标识符流程都是网络平台的），你须要他们打广告导流；而Amazon近似于国内的淘宝网，网络流量是网络平台的，也须要打广告，不过是在网络平台上打广告。

甚么是shopify 主轴？

主轴决定了Shopify新浪网零售店对店家和客户的外形、感觉和功能。Shopify主轴是使用Shopify的主轴模板词汇Liquid以及HTML、CSS、JavaScript和JSON构筑的。

shopify是一站式SaaS商业模式的网络平台，流程标识符、资料库都是在他们的伺服器上，零售店主轴标识符也是在他们的伺服器。你能在管理工作前台透过以GUI介面的方式简单七彩滑鼠就能对主轴展开修正，亦或是在管理工作前台撰稿主轴标识符，也能把主轴标识符拉取到邻近地区展开合作开发。

两个shopify 零售店主轴模板合作开发不须要后端人员，所有店家房屋建筑两套相同方法论的后端架构，你能努力做到只是自订他们的零售店主轴。

建立零售店

假定你没有shopify帐号，或是想建立两个帐号用于学习shopify，上面会从建立帐号开始一步棋一步棋带你建立两个零售店到主轴。

注册登记帐号

首先得注册登记两个Shopify合作方账号：https://accounts.shopify.com/signup；

2. 建立零售店

注册登记进到前台，透过以下关键步骤建立两个零售店：

点选“零售店”-> 点选“加进零售店”-> 选择“合作开发零售店”-> 核对登入信息 -> 点选“留存”；

3. 选择当前模板

建立完零售店之后，登入零售店，来到零售店前台，点选“新浪网零售店”，进到模板页，默认有两个Dawn模板，你也能选择其他免费模板加进到模板库。

至此，零售店就建立完了，你能把当前前台地址从admin到最后的字符去掉，再回车就能访问零售店前台了。

构筑邻近地区合作开发环境

同两套主轴标识符，能透过点选滑鼠以GUI介面的形式，或是在管理工作前台修正主轴源标识符，亦或是将标识符拉取到邻近地区展开撰稿的形式来修正主轴。

注意，虽然能在邻近地区撰稿主轴，但并不是两个真正的邻近地区合作开发环境，它仍然须要连接到Shopify伺服器。

为了能在邻近地区撰稿主轴，须要构筑邻近地区合作开发环境。shopify提供了两个命令行工具，那个工具有点近似于vue-cli。vue-cli是基于nodeJS，而shopify命令行工具是基于Ruby词汇的。

上面是从安装ruby到拉取商城主轴标识符的关键步骤：

安装ruby（windows系统）

下载ruby安装包：https://rubyinstaller.org/downloads/展开安装；

安装完后，在命令行运行ruby查看版本命令看是否安装成功：

安装完ruby后，会附带两个ruby的包管理工作工具gem，近似于node的npm工具；查看gem版本：

2. 安装shopify命令行工具

安装成功后，查看shopify版本：

想查看shopify提供了了哪些命令，能运行以下命令：

3. 查看当前登入的shopify零售店的帐号

如果当前登入的帐号不是你想的，须要退出当前零售店帐号：

4. 登入shopify零售店帐号

运行登入命令之后，ruby会从默认浏览器打开选择shopify帐号的页面，当你选择要登入的帐号时，浏览器会跳转到展示以下信息的新页面：

这时把那个窗口关掉，你就已经登入成功了。命令行窗口也会打印出你登入帐号的组织名和零售店名。

如果你想登入到其他的零售店，运行登入命令之后，不会再次在浏览器打开窗口，因为你已登陆的，它会直接切换到你想的零售店。因为两个帐号下能建立多个零售店嘛。

5. 拉取主轴标识符

首先建两个目录用来存放主轴标识符，cd到此目录后运行以下命令：

这时命令行打印出信息，要你选择拉取哪个主轴，按J、K键切换，按Enter选择。选择后会展开拉取操作，那个过程可能会持续几分钟，这要视网络而定。

6. 运行邻近地区服务

运行上面命令后，shopify会同步当前工作区主轴标识符，首次时如网络慢则时间会持续比较久，再次就很快了。

同步完之后会在命令行工具打印出两个邻近地区回环地址，在浏览器打开那个地址就能看到零售店展示的效果啦。

在命令行中还打印出这么一段话：

Share this theme preview:

在其下一行是两个url，在浏览器打开那个url，会在页面底部出现两个导航条，其中有两个叫“Share preview”的按钮，点选按钮出现两个弹窗，那个弹窗有两个url，那个url是用来给他们预览的，例如你公司的测试人员。注意，那个url有效期持续到你服务关闭之前，即你要两个跑那个服务，不然那个url就没用了， 重新跑服务时，会生成两个新的url。

好了，至此，你就能在邻近地区合作开发零售店的主轴啦，修正一下标识符，浏览器会自定刷新。

目录结构

每个零售店主轴下有7个目录，在templates目录下有两个customers文件夹，一共8个目录。除此之外，不能有其他的目录。如下：

assets

assets目录包含主轴中使用的所有资源文件，包括图像、CSS和JavaScript文件。

在模板中使用 asset_url 过滤器来引用主轴中的资源文件。例如：

config

config目录包含主轴的配置文件。 配置文件在主轴撰稿器的主轴设置区域中定义设置，并存储它们的值。

config目录下有两个配置文件：

settings_data.json

包含settings_schema.json中留存的设置值。

settings_schema.json

控制主轴撰稿器的“主轴设置”区域的组织和内容。

layout

layout目录包含主轴的布局文件，模板文件透过这些文件呈现。

布局是一种Liquid文件，它允许你在多个页面上都引用同两个布局文件。 例如，多个包含相同头部和底部的页面能引用同两个布局文件，布局文件的主体内容能透过以下方式渲染出来：

locales

locale目录包含主轴的locale文件，这些文件用于提供翻译后的内容。 Locale文件允许您在主轴撰稿器中提供翻译体验，为新浪网零售店提供翻译，并允许店家在新浪网零售店中定制文本。

sections

sections目录包含两个主轴的sections。

section是Liquid文件，它允许您建立可重用的内容模块，店家能对其展开定制。它们还能包含允许店家在两个区域内加进、删除和重新排序内容的区块。

snippets

snippets目录包含较小的可重用标识符片段的Liquid文件。 您能使用Liquid render标记在整个主轴中引用这些片段。

templates

templates目录下的每两个json文件是两个模板，每两个模板对应着两个页面。

json模板是存储要呈现的section列表及其相关设置的数据文件，每两个section是两个块级元素，能在前台的主轴撰稿器中加进、删除、排序这些块。

json文件里面是两个对象，模板对象有五个属性：

属性名数据类型是否必须描述namestring非必须模板名称layoutstring | false非必须指定模板所属的布局文件；也能设为false，表示不须要模板。默认布局文件为：theme.liquidwrapperstring非必须如果指定了两个标签名(div、main、section三选一)，则会动态生成那个标签，并把sections全部塞入到那个标签元素里面。也能给那个标签指定id或类名等，例如：div#wrapper.wrapper[data-attr="wrapper"]sectionsObject必须定义各个section对象，详细section对象见下表。两个模板文件里最多只能有20个section，每两个section最有只能有16个block。orderArray必须定义sections的顺序

json模板对象示例：

section对象各个特性定义如下：

<SettingID>string-在block或section的scheme中定义的setting的ID。<SectionType>string必须要渲染的section文件名，不用写扩展名。<SectionDisabled>boolean非必须是否渲染那个section。<BlockID>string-block的id，只接受字母数字。<BlockType>string必须要渲染的block的类型，在section文件的scheme中定义。<BlockOrder>Array非必须多个block的id数组，id必须存在对象中，且不能重复。<SettingID>string必须在block或section的scheme中定义的setting的ID。<SettingValue>(multiple)两个setting的有效值。

section对象结构如下：

section对象示例：

模板文件也能是 liquid 文件，liquid 模板可配置性比较差，但 liquid 能包含标识符。

settings

shopify theme 能透过零售店前台展开撰稿，简单的拖拽点选就能改变主轴。为了使其更具有定制性，灵活性，你能在 theme, section, block 三个级别提供设置。

详情查看：shopify主轴进阶（6.settings）