序言

那个系列产品的该文主要所写专门从事前端合作开发的，想进阶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到最后的字符去掉，再quarterfinal就能访问零售店前台了。

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

同两套主题代码，能透过点选滑鼠以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帐号的网页，当你优先选择要登入的帐号时，应用流程会重定向到展示下列重要信息的favicon：

此时把那个询问处清空，你就已经登入获得成功了。配置文件询问处也会列印出你登入帐号的组织名和零售店名。

假如你想登入到其他的零售店，运转登入指示后，不会再次在应用流程关上询问处，因为你已登陆的，它会直接转换到你想的零售店。因为两个帐号下能建立多个零售店嘛。

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）