shopify前端指南

什么是shopify？

Shopify 是由 Tobi Lütke 创办的加拿大电子商务软件开发商，总部位于加拿大首都渥太华。

Shopify 是一站式SaaS模式的电商服务平台，为电商卖家提供搭建网店的技术和模版，管理全渠道的营销、售卖、支付、物流等服务。2015 年 Shopify 在纽约与多伦多两地证券交易所上市。

降低小型商户在网店经营上的技术门槛，是 Shopify 最基础的业务。商户注册账户，选择网站模版，上传商品并添加描述，设置价格和物流选项，添加收款方式，短时间内就能生成一个美观且可靠的独立站。

如何自定义添加一个shopify主题模版？

点击下方链接进入，并点击登录

https://www.shopify.com/zh

进入登录页面，输入个人使用邮箱，注：个人无法直接注册公司的shopify账号，请联系相关业务人员，将此邮箱添加为员工账户，并给予相关的权限，添加后会发送邀请邮件到所填的邮箱，需要个人点击确认，确认成功即可登录，记得让业务把你的shopfiy语言设置为中文，以下文档截图主要以中文为主( 如果长时间在收件箱内没有收到相关邮件，请到点击垃圾箱，邀请邮件可能被默认为垃圾邮件 )

登录成功后选择需要开发的商店，注：邮箱登录后所关联商店多少，需要相关业务人员发送邀请创建员工账号邮件，每个商店都会发送一份确认邮件，如有多个商店，就会收到多份邮件确认，

点击相应的商店后，进入商品后台页面，点击 在线商店 即可对当前商店的主题模版进行进行设置

点击左上角可自由切换账号所绑定的主题商店

进入到主题模版页面后，可选择免费模版，并根据个人喜好选择一个模版添加到当前模版库，注：模版库一个商店最多只能保存100个模版

需要注意的是当前选中的模版添加到模版库后，如果当前商店是公司运营的商店，而不是个人注册的shopify商店时，切记不可在当前添加的模版选择编辑 -> 发布这将会把公司正在运营的主题商店给替换调，影响用户正常下单，是非常严重的事故

在模板库中选中将要操作的主题模版，点击编辑时会出现不同操作选项，列如：

编辑 -> 预览：点击预览将会新开一个浏览器窗口，展示当前模版商店所呈现给用户的最终效果，更改配置后刷新页面即可显示效果

编辑 -> 发布：用选中的模版替换当前正在给用户使用的主题模版，没有通过内部确认，不要操作

编辑 -> 重命名：重新给当前模版命名，名称可以自定义，建议规范依据规范命名,列如：ft_220930

编辑 -> 复制：点击复制将当前选中的模版copy一份到模版库中，注意名称要相区分

编辑 -> 下载模版文件：点击下载模版文件后，会将当前选中的模版打包以邮件的形式发送到当前账户绑定的邮箱，打开邮箱点击链接下载即可

编辑 -> 编辑代码：点击编辑代码会进入模版编辑文件，可直接在里面查找相关文件并进行编辑保存

编辑 -> 编辑语言：点击编辑语言后将会在主题模版中的公共组件设置自定义语言提示，

编辑 -> 删除：删除当前选中模版，注意：删除将无法撤回，

如何根据业务需求调试主题模版？

现在将要操作的主题模版，点击自定义按钮，进入自定义主题商店配置页面，

shopify的主题模版是由一个个组件搭建而来，和拼积木差不多，可以自由拖动和添加新的组件进行开发，注：当你鼠标在中间区域划过时，会默认显示所划过的一个个组件，选中一个组件时，左侧组件列表会自动选中，右侧会显示当前选中的组件有那些配置项，这些组件和配置项都是可以开发和自定义的，

选中一个组件可以选择点击添加块，添加块中会显示当前组件可以在组件中配置显示项，就类似于一个组件的子集，每个子集选中后右侧都有自己的配置项，可以自定义，这些在我们自定义开发组件时，都是可以实现的

点击添加分区，会弹出一个小弹框，可以在这个输入框中输入开发好的组件名称，选中即可添加到页面中去，并进行相关配置，注：最多只能添加25个组件

不同组件之间可以互相拖动，根据需要显示位置

如何在mac本地运行shopify环境？

通过github拉取shopify代码

登录个人github，github账号让前端老大把你个人的github账号拉入公司项目中去，

点击code选择ssh复制链接，

注：之所以不用https拉取，是因为在用Sourcetree在进行拉取时，会弹出一个输入密码框，一直弹，哪怕密码准确，建议使用ssh进行拉取，记得在本地产生ssh秘钥然后添加到github

拉取代码成功后，就可以通过 Sourcetree 代码拉取提交合并推送等操作，进行版本控制

Mac下SourceTree和Gitee的ssh连接使用参考博客地址

https://www.jianshu.com/p/279c80da2b20

安装shopify启动环境

官网链接：https://shopify.dev/themes/tools/cli/installation

先在iterm上安装shopify cli角手架：

brew tap shopify/shopify

brew install shopify-cli

遇到问题？

终端执行：brew update

➜ ~ brew update

Warning: No remote 'origin' in /opt/homebrew/Library/Taps/homebrew/homebrew-cask, skipping update!

Warning: No remote 'origin' in /opt/homebrew/Library/Taps/homebrew/homebrew-core, skipping update!

Warning: No remote 'origin' in /opt/homebrew/Library/Taps/homebrew/homebrew-services, skipping update!

Xcode在2022.05.21更新之后修改了git，，这三个目录被git认为是不安全的路径，需要手动添加

解决方法参考：https://www.jianshu.com/p/bee56e756ece

登录到shopify

将需要修改的项目用vscode打开，在终端内输入当前你打开这个项目的登录当前商店命令，比如我当前打开的是娇致的项目，命令是 shopify login --store https://xxx.myshopify.com/

登录成功后，再输入 shopify theme serve 即可在本地启动项目

注：xxx表示的是要登录的这个shopify店铺名称

注：在切换商店的时候需要登录不同的商店；比如:

shopify login --store https://xxxl.myshopify.com/ 这是娇致的登录

shopify login --store https://xxx.myshopify.com/ 这是乐米的登录

shopify login --store https://xxx-com.myshopify.com/ 这是思创的登录

shopify 3.21.0版本的登录方式：shopify theme dev --store=https://xxx.myshopify.com/ 乐米登录

登录成功后按键 command + 选中的链接即可在浏览器打开，

注：点击链接在浏览器中打开的时候有时候会遇到需要登录的情况，这种是由于shopify是国外网站，国内访问的话需要登录

在点击链接的时候，在浏览器中打开的时候当前启动主题的配置页面；在左上角能看到由本地启动的项目；这也是我们区分线上和本地后台配置项的依据

点击第三个链接的时候，启动的则是本地预览页面，在左下角可以显示当前是否是是本地或者线上某种分支预览的依据，例如test、sit；

注：我们在日常开发中，有时候需要切换不同的项目，在切换不同项目的是时候，需要先把当前启动的项目先退出，再登录需要修改的shopify后台项目，因为shopify在启动的时候会将端口占用，导致控制台报错，

mac退出vscode快捷键为： control + v

端口被占用后，强行启动，页面出现编码错误。

注：参考博客地址

https://blog.csdn.net/seven070707/article/details/124370654

shopfiy的目录结构

assets

存放一些静态文件的地方，比如img，字体图标，公共js， js插件等

config

当前保存的主题配置

settings_data.json

当前已经选好的所有数据，最好不要动这里

“current”: 当前已选择了的所有 sections

“presets”: 能在 Add section 目录中看到的预设的 section

settings_schema.json
可以配置些公共的变量

layout

布局模板文件夹，也就页面的主要框架（从html头部加载哪些css 、js。一个完整的html)，可以在这个页面引入一些全局加载的外部文件，比如引入jquery 或者自定义的 js css文件，默认是theme.liquid文件，和vue的index.html类型

locales

主题的翻译文件，主要为主题提供翻译文件内容

sections

存放组件的的地方，我们在模版页面点击想修改模版的自定义按钮，进入模版自定义设置页后，在左侧底部点击添加分区，就能检索和添加自定义编写的组件了，或者主题自带的组件，

那一个组件由那些构成呢？基本配置项有那些？

{% schema %}
{
  "name": "video",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "t:sections.video.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "image_picker",
      "id": "cover_image",
      "label": "t:sections.video.settings.cover_image.label"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "accept": [
        "youtube",
        "vimeo"
      ],
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "label": "t:sections.video.settings.video_url.label",
      "placeholder": "t:sections.video.settings.video_url.placeholder",
      "info": "t:sections.video.settings.video_url.info"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.video.settings.full_width.label",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
  ],
  "presets": [
    {
      "name": "video"
    }
  ]
}
{% endschema %}

组件配置属性的基本定义

type的常规类型

type的特殊输入属性如下

提示内容进行展示

下方截图则是参数具体使用

在color控件上方新增了一个类似标题的提示，其中info这个属性在每个控件中都可以使用，主要类似于提示语，在控件下方提示

如何组件中获取用户在控件上设置的值，并进行关联？

在settings中定义的每一个控件，都有一个id，这个id就是我们获取和保存用户配置的存储点，和vue中的data里定义的值类似，在取值的到时候在 {{ section.settings.xxx }} 进行获取，其中section.settings在固定的，所取的值则根据控件id所定义，

下方的截图的逻辑是先 if 判断这个控件是否有值，没值就不显示，有值就取用户配置的值，并进行显示

snippets

小模块，比section更小的模块，通常是静态的，导入使用 include或者reder，用法如sections，个人理解为拆分出来的小组件，具体内容显示数据由所使用的父组件所提供，只不过这个文件中的组件各个地方都可以引用，如何引用请参考下方截图

<div>
  {{ product.title }}        // 可以直接引用外部传进来的变量
</div>

直接向组件内部传值

{% render 'product', product: product %}

templates

可用的布局模板文件,包含所有其他的Liquid模板，包括用户账号相关的模板。

Shopify主题由控制在线商店不同页面的外观的模板文件组成。所有模板文件均以Liquid编码。此文件夹具体作用请阅读以下文档

https://shopify.dev/themes/architecture/templates

shopify开发基本语法？

在学习shopify开发之前，先了解一下什么是liquid？

Liquid 是一门灵活、安全的模版语言，被用于许多不同环境中。Liquid 被创建之初是用在 Shopify 商店系统中的，后来也被广泛用于 Jekyll 网站中。随着时间的推移，Shopify 和 Jekyll 分别为 Liquid 添加了针对各自用途的对象（object）、标记（tag）和过滤器（filter）。目前最流行的 Liquid 版本包括 Liquid、Shopify Liquid 和 Jekyll Liquid。

本质上和vue的.vue格式文件类似，编写的语法有所不同，需要具有一定的html css js基础

liquid的基础语法-Basics

Liquid 包含了大量逻辑（logical）和比较操作符（comparison operator）

基本操作符

// 例如：
{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

// 可以在一个标记（tag）中使用多个操作符：
{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

// contains（包含）
// contains 用于检查在一个字符串中是否存在某个子串。
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

// contains 还可以用于检查一个字符串数组中是否存在某个字符串。
{% if product.tags contains 'Hello' %}
  This product has been tagged with 'Hello'.
{% endif %}

// contains 只能用于搜索字符串。你不能将其用于从一个对象数组中检查是否存在某个对象。

真值与假值

编程时，在条件判断中任何返回 true 的都被叫做 真值（truthy）。任何返回 false 的都被叫做 假值（falsy）。所有的对象（object）类型都可以被描述为真值（truthy）或假值（falsy）。

真值（Truthy）

除了 nil 和 false 之外的所有值都是真值。

// 如下例，字符串 “Tobi” 虽不是布尔类型，但是其在条件判断时被当做真值（truthy）：
{% assign tobi = "Tobi" %}

{% if tobi %}
  This condition will always be true.
{% endif %}

// 字符串（String），即便是空字符串，也是真值（truthy）。
// 如下例，如果 settings.fp_heading 是个空字符串将会输出空 HTML 标签：输入
{% if settings.fp_heading %}
  <h1>{{ settings.fp_heading }}</h1>
{% endif %}

// 输出
<h1></h1>

假值（Falsy）

在 Liquid 中，nil 和 false 是假值。

总结

下表总结了在 Liquid 中什么是真值什么是假值。

数据类型

Liquid 对象的类型可以是以下五种：

你可以通过 assign 或 capture 标记来初始化 Liquid 变量。

String（字符串）

// 将变量的值包裹在单引号或双引号之中就声明了一个字符串：
{% assign my_string = "Hello World!" %}

Number（数字）

// 数字类型包括浮点数和整数：
{% assign my_int = 25 %}
{% assign my_float = 39.756 %}

Boolean（布尔）

// Booleans 类型只能是 true 或 false。布尔值千万不能加引号，否则就成为字符串了。
{% assign foo = true %}
{% assign bar = false %}

Nil（空）

Nil 是一个特殊的空值，当 Liquid 代码没有可输出的结果时将返回 Nil。他并不是由 “nil” 这个三个字符组成的字符串。

在 if 条件判断和其他 Liquid 标记（tag）判断语句中，Nil 被当做 false 。

// 下例中，如果 user 不存在（也就是 user 返回 nil），Liquid 不输出问候语：
{% if user %}
  Hello {{ user.name }}!
{% endif %}

// 如果 Liquid 标记（tag）或输出返回的是 nil，页面上将不会有任何内容。
// 输入
The current user is {{ user.name }}

// 输出
The current user is

Array（数组）

数组能够存储一组任意类型的变量。访问数组中的项

// 输入
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{% for user in site.users %}
  {{ user }}
{% endfor %}

// 输出
Tobi Laura Tetsuro Adam

访问数组中的特定项

// 利用方括号 [ ] 能够访问数组中的特定项。数组的索引从 0 开始。
// 输入
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}

// 输出
Tobi
Laura
Adam

初始化数组

你无法只通过 Liquid 语法初始化一个数组。

然而，你可以利用 split 过滤器将一个字符串分割为一个子字符串数组。

初始化数组

你无法只通过 Liquid 语法初始化一个数组。

然而，你可以利用 split 过滤器将一个字符串分割为一个子字符串数组。

控制输出的空白符

在 Liquid 模版中，你可以将连字符放在标记（tag）中，例如 {{-、-}}、{%- 和 -%}，用于将标记（tag）渲染之后的输出内容的左侧或右侧的空拍符剔除。

// 通常，即使不输出文本，模版中的任何 Liquid 表达式仍然会在渲染之后输出的 HTML 中包含一个空行：

// 输入
{% assign my_variable = "tomato" %}
{{ my_variable }}
// 请注意渲染之后输出的 “tomato” 字符前面包含了一个空行：

输出
tomato

// 通过为 assign 标记（tag）添加连字符，可以将渲染之后所输出的空拍符删除：

// 输入
{%- assign my_variable = "tomato" -%}
{{ my_variable }}

// 输出
tomato

如果你不希望任何标记（tag）被渲染之后所输出的内容有任何空白符，只需在所有标记（tag）两侧全部添加连字符即可，例如 ({%- 和 -%})：

liquid的基础语法-Tage

注释

comment 标记让你能够在 Liquid 模板中书写的内容不被输出。任何书写在 comment 起始与结束标记之间的内容都不会被输出，如果是 Liquid 代码则不会被执行。

// 输入
Anything you put between {% comment %} and {% endcomment %} tags
is turned into a comment.

// 输出
Anything you put between  tags
is turned into a comment.

控制流

控制流标记（control flow tag）能够根据编程逻辑改变 Liquid 输出的信息。

只有当某个条件为 true 时才执行一段代码。

// 输入
{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

// 输出
These shoes are awesome!

unless

与 if 相对 – 只有当某个条件不成立时才执行一段代码。

// 输入
{% unless product.title == 'Awesome Shoes' %}
  These shoes are not awesome.
{% endunless %}

// 输出
These shoes are not awesome.

// 和如下实例的执行结果一致：
{% if product.title != 'Awesome Shoes' %}
  These shoes are not awesome.
{% endif %}

elsif / else

为 if 或 unless 添加更多状态判断。

case/when

创建一个开关表达式，用于将一个变量和多个不同值进行比较。case 用于初始化一个开关表达式，when 用于比较他们的值。

// 输入
{% assign handle = 'cake' %}
{% case handle %}
  {% when 'cake' %}
     This is a cake
  {% when 'cookie' %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

// 输出
This is a cake

迭代／循环

迭代（或循环）标记（iteration tag）用于重复运行一段代码。

for

重复运行一段代码。for 循环中所能够使用的属性请参考 forloop (object)。

// 输入
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

// 输出
hat shirt pants

break

循环过程中若干遇到 break 标记（tag）即停止循环。

// 输入
{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

// 输出
1 2 3

continue

循环过程中若遇到 continue 标记（tag）则跳出当前循环。

// 输入
{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

// 输出
1 2 3   5

for (parameters)

limit

限定循环执行的次数。

// 输入
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}

// 输出
1 2

offset

从指定索引号开始执行循环。

// 输入
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
  {{ item }}
{% endfor %}

// 输出
3 4 5 6

range

定义循环执行的范围。可利用数字或变量来定义此执行范围。

// 输入
{% for i in (3..5) %}
  {{ i }}
{% endfor %}

{% assign num = 4 %}
{% for i in (1..num) %}
  {{ i }}
{% endfor %}

// 输出
3 4 5
1 2 3 4

reversed

反转循环的执行顺序。注意和 reverse 过滤器（filter）的拼写是不同的。

// 输入
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}

// 输出
6 5 4 3 2 1

cycle

循环一组字符串并按照它们传入的顺序将其输出。每次调用 cycle 时，传入的参数中的下一个字符串将被输出。

cycle 必须用在 for 循环中。

// 输入
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

// 输出
one
two
three
one

cycle 的使用场景包括：

对表格中的奇数／偶数行输出相应的类（class）
在一行中的最后一列输出一个唯一的类（class）

原始内容

raw 标记临时禁止处理其所包围的代码。如果输出的内容与 Liquid 模板语言有冲突时（例如 Mustache、Handlebars 模板语言）可以避免冲突。

// 输入
{% raw %}
  In Handlebars, {{ this }} will be HTML-escaped, but
  {{{ that }}} will not.
{% endraw %}

// 输出
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

变量

变量标记（variable tag）用于创建新的 Liquid 变量。

assign

创建一个新变量。

// 输入
{% assign my_variable = false %}
{% if my_variable != true %}
  This statement is valid.
{% endif %}

// 输出
This statement is valid.

将变量用 " 包裹之后则将其当做字符串对待。

// 输入
{% assign foo = "bar" %}
{{ foo }}

// 输出
bar

capture

将 capture 开始与结束标记之间的字符串捕获之后赋值给一个变量。通过 {% capture %} 创建的变量都是字符串。

// 输入
{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

// 输出
I am being captured.

使用 capture 时，你还可以利用 assign 创建的其他变量创造一个复杂的字符串。

// 输入
{% assign favorite_food = 'pizza' %}
{% assign age = 35 %}

{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}

{{ about_me }}

// 输出
I am 35 and my favourite food is pizza.

increment

创建一个全新的数值变量，并且在后续每次调用时将此变量的值加 1。初始值是 0。

// 输入
{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}

// 输出
0
1
2

通过 increment 标记（tag）创建的变量与通过 assign 或 capture 创建的变量是相互独立的。

在下面的实例中，名为 “var” 的变量是通过 assign 创建的。然后将 increment 标记（tag）在相同的变量名上应用了几次。注意，increment 标记（tag）不会对 assign 创建的变量 “var” 及其值产生任何影响。

// 输入
{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}

// 输出
0
1
2
10

decrement

创建一个全新的数值变量，并且在后续每次调用时将此变量的值减 1。初始值是 -1。

// 输入
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

// 输出
-1
-2
-3

和 increment 类似，在 decrement 之中创建的变量与通过 assign 或 capture 创建的变量是互相独立的。

liquid的基础语法-Filter

abs

返回一个数字的绝对值。

// 输入
{{ -17 | abs }}

// 输出
17


// 输入
{{ 4 | abs }}

// 输出
4

如果组成字符串的各个字符全是数字，abs 也能够对此字符串求绝对值。

https://shopify.dev/api/liquid/objects#customer

如何新建一个page页面

我们以个人中心页面为例，在URL里面page/personal-center,其中page表示这个页面是一个page页面，而personal-center是这个page页面的名称，

先在lib里面创建一个sections的组件，然后等组件会渲染到sections文件夹里面，把这个文件的名称复制出来，这个文件里面的内容就是实际需要开发的内容，注意：新的page页面一定要在sections里面创建，应为page是页面级，而snippets是组件级

然后在templates文件夹里面新建一个json格式的文件，文件名称格式为page.xxxxx.json,其中xxxxx就是需要显示p内容的文件名称，文件的内容可以复制旧有的内容，需要注意的是，type内容需要改为创建的那个文件名称，这一步的意义是新建page页面显示的模版，在下一步用的上

提交代码到master分支，提交后，去到shopify后端配置的page模块，点击Add page

点击Theme template里面会显示刚刚新建的模版，以personal-center为例，选中personal-center模版文件，然后在Title输入这个page页面具体叫什么名称，这个名称和产品确定，然后点击点击save确认，确认完成创建，

创建完成后，可以去page页面搜索那个创建的page页面名称，搜索出来后，点击右侧的view page，或者点击进入，点击page具体页后，再点击page页面，然后在本地修改后，就能看到具体内容了

shopify常见问题及解决思路

如何开始查找要修改的shopify模版代码位置？

比如我们需要修改当前 Featured collection 这个组件代码，我们就可以这个组件名称为关键字，在vscode进行全局检索，就能定位到当前要修改的组件，

如何创建一个创建组件并在主题中使用？

先在scctions文件中中新建一个liquid文件，文件名尽可能语义化，中间以横杠分隔，

注：sections文件夹是专门用存放组件的文件夹

注：注意，在配置项{% schema %}里面，顶部的name和presets里面的name必须保持一致，不然会导致无法检索出当前的组件，

而获取当前配置项也比较简单，直接获取通过{{ section.settings.xxx }}即可获取，而{{ }}是shopify里面获取数据渲染的方式，获取的值则是在配置项里 id所配置的唯一值，也可以设置默认值或者提升语，

如何创建组件里面的子集？

在业务需求较为复杂的情况下，单个组件无法满足需求，可以在组件内添加子集在子集，其中子集属于可配置，具体写法和父级基本一致，子集放在blocks里面，注意：想要渲染出来，得先使用for循环出来，

新增子集后，当前组件左侧会有三角符号，点击展开后，会有一个添加的选项，点击添加即可添加设置的子集，注意：子集可以存在多个，如果存在多个子集会出现输入框让你检索子集名称，并选中添加，

如何在shopfiy上传图片，并在功能开发中使用上传的图片链接？

有时候我们在开发组件过程中，需要用到背景图片，其中一个方式就是使用shopify自带的文件上传，将需要上传的图片点击上传，上传成功后就能获上传成功列表右侧点击复制链接获取链接，当然也并不仅仅是用来上传图片，视频也是可以的，主要看业务具体安排，

开发组件如何使用默认间距？

我们在开发自定义组件过程中，有些主题的组件是自带上下间距的，这个间距是取的全局的值，我们在自定义组件过程中，有一个class属性，在里面可以配置一些公共的class，在组件的最外围会渲染出来，当业务有需求的减少组件的默认间距时，可以直接修改全局文件即可

添加的index-section是娇致主题中上组件设置默认上下间距的，在其他主题中可能就不是这个名称，但是可在这个地方添加，大家可以多留意

如何在移动端访问shopify进行测试？

我们在将组件开发完成后，有时候需要在移动端进行测试显示效果，比如笔者原先开发了一个倒计时组件，当前倒计时的开始时间默认配置格式是yyyy-mm-dd hh:mm:ss，这种配置中PC端和安卓上是可以正常使用的，但是在iOS端就会显示NaN，因为 yyyy-mm-dd hh:mm:ss 这种格式在苹果手机上无法识别，然而转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了。

我们在vscode中启动项目时候，下方会有三个链接，我们将最后一个链接发送到手机上，点击链接即可最手机打开我们的测试功能组件，

下方是在钉钉上用链接打开后的效果，也可以复制链接到手机浏览器中打开，

如何防止css样式污染？

有时候我们修改旧有的组价时，会发现组价中引用了很多class，但是并不确定修改的那个class是否是一个全局的class，从而导致在未知的页面产生bug，有两种解决思路，

第一种是在要修改的那个html元素上新加一个class，样式覆盖原有的，但是新加的class要新加一个前缀，比如 hete-xxxx

第二种则是在组件内部有一个 {{ section.id }}的属性，而{{ section.id }}在shopfiy中是唯一的，我们可以利用这一点在组件编写css，这样所修改的css样式只会在当前的组件内生效，而不会造成全局污染

如何调试全局样式？

一般在shopfiy里面，会创立一个或者多个css文件，而移动端和pc端的显示效果主要是依靠媒体查询来进行设置，我们一般在修改某种组件的class时，一定要注意是否会回影响到其他模块，下方截图是针对不同屏幕分辨率下页面所需要调整的样式，

如何在控制面板输出当前页面渲染的数据，并根据数据进行调试？

在开发或者调试组件过程中，为了更加直观的看到我们在配置项有那些数据或者配置项的id值是，我们可样子在控制台中进行输出格式为 {{ xxx | json }},其中 | json是个必须的，

注意：控制台输出的都是在配置项中 id 所绑定的名称，都是一一对应起来的，取值和条件判断时不可弄混淆，

注意：在进行输出的时候最好只取settings配置项内的值，取其他值进行输出时会报错

项目在启动过程中，页面乱码了怎么办？

在日常开发中，我们有时需要同时调试多个项目的主题，在启动某一个主题后，打开项目的预览页面，发现页面直接乱码了，这一般是由于shopify端口被占用导致的，两个项目共用一个端口双方组件和css就互相错乱和丢失，

在控制台中我们可以看出9292这个端口已经被使用了，解决措施就是使用 control + c 暂停一个项目然后再重新启动另一个就好了，

liquid文件编写代码后，页面没有更新，因该如何解决？

我们在调试原先有组件功能代码时，代码修改了，但是页面上就是没有更新，我们可以打开台，看看控制台是否有错误提示，比如下方我们在创建一个新的组件时，在标注的地方多了一个，逗号就会导致程序错误，代码不会更新到预览页面，在控制台中也会有相应的提示，

列如在代码中少了一个 } 括号，控制台中也会有提示，并阻止页面更新，大家在调试shopify的时候还是要注意把控制台打开，时刻关注

在settings里面使用range组件时，提示报错及解决思路

在使用range组件时，如果设置了max最大值，那么step也就是每次移动的值都不能小于你设置的最大值的倍数，可以大于，但是不能小于，不然会报错

如何在开发中遇到不清楚的语法时，快速的查找到相应的文档？

我们在日常开发中经常会遇到一些没遇到过的写法，比如我在下方截图的 unless 语法，看着像是一个条件判断语句，我们先把unless复制出来，

然后打开文档链接，输入command + f 进行检索，即可检索到相应的字段，想要知道更详细的内容即可点击 Learn more链接，跳转到更详细的文档

https://www.shopify.com/partners/shopify-cheat-sheet?shpxid=a4c456be-73DA-45D5-0D3B-4A5CEA6ABF00

在日常开发中，在liquid的模版语法内，我们想要实现某种效果，但是在liquid模版语法内有些写法是不会支持的，那我们因该如何快速的查找文档，实现页面效果呢，

案例一：比如我们想将一个数字字符串想要转化为number类型，然后进行比较判断，但是shopify里面的模版语法不允许使用Number因该如何快速查找相对应的语法？

我们可以在控制台中看到，控制台会直接报错，我们可以在把文档打开，ommand+f 输入关键字 number，查看是否有相关的语法，

一共检索出来有7个，我们一个个的查找下来，可以使用谷歌浏览器自带翻译成中文，协助查阅文档，在大致的检索过程中，我们可以看到 | abs 好像符合我们的要求，可以在文档中使用，将其复制到将要开发的liquid的模版语法内部去使用就行

案例二：我们在shopify主题内的商品详情页或者购物车页面，想要直接获取当前产品的价格时，需要默认除以100，但是直接在liquid语法中/100是无法使用的，那如何是想要达到想要的效果，

但是这种直接 / 100 只能在<script>标签内使用，直接在liquid的这样是不允许的,会报错

还是老样子，我们想要获取计算后的价格，也就是钱，那么关键字就是 money，将文档打开，输入关键字money，然后根据文档内容进行测试；

我们最终可以得到 money_without_currency 作为语法的编写，代码可以理解为先将价格转换然后再转换为数值类型，这样再进行比较的时候就不用担心转换的问题，这里使用的时候需要注意价格超过三位数的时候会有逗号，如果超过三位数就会出现得到的值只有逗号前面的了使得获取到的值出错

shopify一些需要注意的点

在shopify里面，我们经常会使用new MutationObserver来监听DOM是否发生变化，有一点需要注意的是，shopify它的显示页面是由一个个组件拼接显示而成的，每个组件里面都可以编写css和js，在未知多个组件进行拼接时，我们写在组件里面的js代码，尽可能的不要使用let const这些创建变量，可能会导致监听变量重复创建，导致js报错，使正常的js代码停止运行，切记

https://liquid.bootcss.com/

https://shopify.dev/themes/getting-started

https://www.shopify.com/partners/shopify-cheat-sheet?shpxid=a4c456be-73DA-45D5-0D3B-4A5CEA6ABF00

乐米shopify网站本地开发的调整

起因是为了优化网站的加载速度而做的调整，把所有的css、js进行压缩

第一步先从master分支拉取最新的代码，你会发现文件中多出几个新的文件：如下所示