序言

那个系列产品的该文主要所写专门从事前端合作开发的，想进阶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）