shopify配置字段信息

配置详解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{
"name": "名称,可多语言",
"settings": [
{
"type": "输入类型",
// 如果为header可以用content表示一组
// text 单行文本
// textarea 简单的文本域
// image_picker 选择图片,可以是上传的,也可以是收藏的,或是免费的
// radio 单选框,需要包含 options: [ {"label": "说明", "value": "值"} ], 使用default选择一个默认值
// select 和单选框同理,options中的对象可以使用group为值分组
// checkbox 多选框, 值是true或false
// range 范围, min配置最小,max最大,step步长,unit单位
// color 颜色选择器
// font_picker 字体选择器 用来替代 font的
// collection 选择产品分类
// product 选择产品
// blog 选择博客
// page 该下拉列表会自动填充商店中所有页面的名称
// link_list 选择网站地图中的链接
// url 选择或输入链接
// video_url 视频链接 accept(必填)具有该字段接受的URL类型的数组。有效值youtube或vimeo或两者兼而有之。
// richtext 允许下划线粗体斜体的文本域,输出HTML
// html
// article 选择博客
// header 分组标识,必须只能包含content
// paragraph 段落

"id": "引用标识符",
"label": "输入提示标题,可多语言",
"defualt": "默认值",
"info": "字段提示",
"placeholder": "内容提示"
}
]
// 如果是 sections则schema可以使用
"blocks": [ // 定义block,允许执行添加,使用max_block限制最多添加个数
{
"name": "myBlock",
"limit": 1, // 限制添加次数
"settings": [
{
"type": "输入类型",
"label": "标题",
"id": "标识符",
"default": "默认值"
}
]
}
],
"presets": [ // 在“添加部分”的预览
"name": "添加我吧",
"category": "所属分类",
"max_blocks": 3, // 最多添加3个块
"blocks": [
{
// 引用block
"type": "myBlock"
}
]
]
}

主题结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
- assets
资源存放目录,包括图片样式和js文件,asset_url过滤器表示前缀地址

- config
用于后台可视化配置的配置,包含一个setting_schema.json和settings_data.json

- layout
包含主题布局模板,默认情况下为theme.liquid,template文件夹内的所有liquid模板都呈现在主题布局模板content_for_layout内, 模板header部分需要包含 {{ content_for_header }} 以加载后台配置的分析代码

- locales
语言环境文件,用于提供主题的翻译内容,默认的英语环境文件 en.default.json

- sections
可以重复利用的模块,可以由主题的用户自定义和重新排序。在末尾处定义 {% schema %} { 配置项 } {% endschema %}用于后台在"部分"的配置,此配置格式和"模板配置"一样

在schame中可定义:
- name: 在“添加部分的预览名称”
- class: 在页面上这个块会被包含在此类名中
- tag: 不明所以
- settings: 配置
- blocks: 自定义块,用于“添加内容”, 使用"limit"限制最多只能添加该此时
- max_blocks: 最多能添加的块的数量
- presets: 预设,使用category划分类,可以预添加block
- default: 默认内容
- locales: 定义该块的翻译,如{"locales": {"en": {"title": "title"}, "zh": {"title": "标题"}}}

- snippets
包含主题的所有liquid摘录文件,这些文件是可以在主题的其他模板中引用的一些代码
- templates
包含所有的liquid模板
- costomers
- account
用于显示访问者客户账户的摘要信息
- activate_account
用于激活客户账号信息的表单
- addresses
客户使用该模板来管理其在结帐中使用的地址
- login
登录页面
- order
显示客户账号过去的订单的详细信息
- register
客户账号注册页面
- reset_password
客户账号找回密码页面
- 404
如果访问者输入的url无效,访问者将被定向到该页面
- article
呈现单个博客文章的页面。包含文章的完整内容
- blog
用于呈现博客页面。该页面的主要目的是列出博客中的文章
- cart
提供了访客购物车中商品的概述
- collection
此页面的主要目的是列出集合中的产品,这些产品通常以带有产品标题和价格的图像网格的形式呈现
- gift_card
在购买时发给客户的礼品卡,发送给客户的电子邮件通知中可以找到模板的URL
- index
商店的主页
- list-collections
该模板列出了商店中的所有集合。该模板可以通过/collections路由来访问
- page.contact
- page
在后台编辑的page将在此模板中展示
- password
如果商店需要密码保护,则会在首次进入的时候呈现此页面
- product
单个产品的详细信息页面。它包含了一个FORM表单供客户添加商品
- search
用于展示商店的搜索结果

Liquid

数据类型

1
2
3
4
5
6
7
8
- String
- Number
- Boolean
- Nil 和 null一样
- Array 使用","分割元素
- EmptyDrop
- 字符串为空是blank
- 对象为空是nil

标签

1
2
3
4
- {{}}
- {%%}
- {{- -}} -表示去除空白字符
- {%- -%}

控制流标签

1
2
3
4
5
6
7
8
9
10
- if
检测条件是否满足
- unless
检测条件没有得到满足,即取反if
- else/elsif
添加更多条件
- case/when
switch语句 如 {% case shipping_method.title %} {% when 'one' %} one {% else %} default {% endcase %}
and/or
和 if 一起使用多个条件

迭代标签

1
2
3
4
5
6
- for
重复执行一个代码块,可以和else,continue,break一起使用,offset:起始位置,limit:控制循环数量,in(可以如同range,如1..5)。例如 {% for product in collection.products %} {{ product.title }} {% endfor %}
- cycle
必须在for内使用,每循环一次向后迭代一个值,语法为 {% cycle '组名': 'first', 'one', 'two', 'last' %}
- tablerow
必须包含在table标签中,因为其输出的是表格的值,使用cols:控制列数量,使用limit控制组数量

主题标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- comment
模板注释
- echo
输出内容
- form
生成form元素,以及所需的input元素,使用","分割参数,如 {% form 'product', product, id:'MyFormId' %} {% endform %} (链接是自动生成的)
- layout
在模板文件开头添加以使用主题的layout文件夹中的备用布局文件。如果未定义此布局文件则使用默认的theme.liquid。 tips: 渲染而不适用布局文件{% layout none %}
- liquid
允许在一组定界符中写入多个标签
- paginate
将for的内容分割成多个页面,例如 {% paginate collection.products by 5 %} {% for product in collection.products %} <!-- show producu details here --> {% endpaginate %}
- raw
在页面上输出Liquid代码而不解析
- render
从snippets文件夹中呈现一个片段, 使用 k:v分配变量,还有一个 {% render 'variant' for product.variants as variant %} 的写法
- section
从sections文件夹渲染一个部分
- style
style标签,可以在主题编辑器进行实时刷新,而无需刷新整个页面。如 {% style %} div{ background-color: section.settings.background_color } {% endstyle %}

变量标签

1
2
3
4
5
6
7
8
- assign
创建一个变量,如 {% assign name = "hah" %}
- capture
将一段内容分配给一个变量,如 {% capture sss %} 这里的内容将被分配给sss {% endcapture %}
- increment
增量,每次增加指定变量的值,如果没有从0开始
- decrement
递减,每次减少1,初始值为-1

不推荐使用

1
2
- include
使用render代替,和PHP的include相同

过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
- Array filters
- join
使用指定字符串连接数组
- first
获取数组的第一个值
- last
获取数组的最后一个值
- concat
合并两个数组
- index
获取指定下标位置的值
- map
接受数组元素的属性作为参数,并根据每个数组元素的值创建一个数组
- reverse
颠倒数组中的各项的顺序
- size
获取数组的长度
- sort
对数组进行排序,顺序区分大小写
- where
遍历数组中的指定属性,为true的返回组成一个新的数组。例如有效产品{% assign available_product = collection.products | where: "available" %}
- uniq
删除数组中的所有重复实例
- split
使用指定符号拆分数组

- Color filters
- color_to_rgb
将颜色字符串转为rgb格式
- color_to_hsl
将颜色字符串转为hsl格式
- color_to_hex
将颜色字符串转为十六进制格式
- color_extract
从颜色中提取透明度,红色,绿色,蓝色,色调,饱和度和亮度的值
- color_brightness
计算给定的颜色的感知亮度
- color_modify
修改颜色的成分,例如 {{ '#112233' | color_modify: 'red', 255 }}
- color_lighten
使输入颜色变淡,取0-100之间的值
- color_darken
使输入颜色变暗,取0-100之间的值
- color_saturate
增加输入颜色的饱和度,取0-100之间的值
- color_desaturate
降低输入颜色的饱和度,取0-100之间的值
- color_min
将两种颜色融合在一起。0-100
- color_contrast
计算两种颜色之间的对比度。
- color_difference
计算两种颜色之间的色差
- brightness_difference
计算两种颜色之间的感知亮度差

- HTML filters
- img_tag
生成图像标签,参数1:资源文件,参数2:类名,参数3:图片尺寸、small、large
- currency_selector
生成一个下拉列表,客户可用来在店面中选择可接受的货币,适用于form对象,例如 {% form %} {{ form | currency_selector: class:'cls', id:'submit' }} {% endform %}
- payment_button
为差评创建一个动态结账按钮,适用于form对象
- script_tag
生成script标签,例如 {{ 'shop.js' | asset_url | script_tag }}
- stylesheet_tag
生成style标签
- time_tag
将时间戳转为time标签,可接受格式abbreviated_date、basic、date、date_at_time、default、on_date
- payment_type_svg_tag
返回svg请求的付款类型图片的标签以进行关联 {% for type in shop.enabled_payment_types %} {{ type | payment_type_svg_tag, class: 'custom-class' }} {% endfor %}

- Math filters
- abs
绝对值
- at_most
限制最大值,例如 {{ 4 | at_most: 3 }} 结果为3
- at_least
限制最小值,和上面一样
- ceil
进一取整
- divided_by
除法运算
- floor
舍去取整
- minus
减法运算
- plus
加法运算
- round
四舍五入取整
- times
乘法运算
- modulo
取余数
- Money filters
- money
根据商店所使用的货币进行转换,输出一个带有货币符号的价格
- money_with_currency
和上面一样,输出带有货币代码的价格
- money_without_trailing_zeros
和第一个一样,但是不会带小数部分
- money_without_currency
使用小数格式化价格
- String filters
- append
将字符串追加到字符串
- camelcase
hello-world转为 HelloWorld
- capitalize
字符串中的第一个单词大写
- downcase
字符串转为小写
- escape
将转为html实体
- handle/handleize
输入{{ '100% M & Ms!!!' | handleize }}输出100-m-ms
- md5
将字符串转为md5
- sha1
字符串转为SHA-1
- sha256
字符串转为SHA-256
- hmac_sha1
使用指定字符串进行混淆转为SHA-1,例如 {% assign a = 'test' | hmac_sha1: 'demo' %}
- hmac_sha256
使用指定字符串进行混淆转为SHA-256, 和上面差不多
- newline_to_br
将换行符转为br标签
- pluralize
根据数字的值输出字符串的单数形式或复数形式。第一个参数是单数字符串,第二个参数是负数字符串(中文貌似用不到)
- prepend
在字符串前追加字符串
- remove
删除字符串中的指定内容
- remove_first
删除字符串中的指定内容,只删除一次,从左边开始查找
- replace
字符串替换
- replace_first
替换第一次出现的字符串
- slice
获取字符串中的一部分,相当于PHP中的slice函数一样,不过在这里是用于字符串的
- split
使用指定符号分割字符串返回数组
- strip
删除字符串前后端特殊符号,和PHP中的trim相同
- lstrip
删除字符串左边的特殊符号,和PHP中的ltrim相同
- rstrip
删除字符串右边的特殊符号,和PHP中的rtrim相同
- strip_html
删除HTML标签,和PHP中的stript_tags相同
- strip_newlines
删除字符串中的所有换行符号
- truncate
将字符串截断至第一个参数传递的字符数,例如 {{ 'abcdefg' | truncate: 6 }} 输出 abc..., 参数2可自定义省略号
- truncatewords
和上面的类似,区别在于truncate是按照字符数量计算,truncatewords是按照字符数量计算
- upcase
转为大写,和PHP中的strtoupper相同
- url_encode
将url字符串转为百分比编码的字符
- url_escape
将url中所有不允许的字符转为百分比编码
- url_param_escape
也是转义
- Reversing strings
如果要反转字符串,没有这个函数,可以像这样: {{ 'hello' | split: '' | reverse | join: '' }}
- URL filters
- asset_url
获取资源url
- asset_img_url
获取图片资源url,可接受1个参数标识图片的大小
- file_url
获取文件的url
- file_img_url
获取图片文件的url,可自定义大小
- customer_login_link
生成登录连接
- global_asset_url
shopify CDN
- img_url
获取图片资源url,可自定义大小
- link_to
生成a标签的,如 {{ 'Shopify' | link_to: '链接', 'title' }}
- link_to_vendor
创建指向收藏页面的a标签,该页面列出了属于供应商的所有产品。
- link_to_type
创建指向收集页面的HTML链接,该页面列出了属于某个产品类型的所有产品。
- link_to_tag
创建指向具有给定标签的集合中所有产品的链接。
- link_to_add_tag
创建一个指向集合中所有具有给定标签以及所有已选择标签的产品的链接。
- link_to_remove_tag
生成指向集合中所有具有给定标签以及可能已经添加的所有先前标签的所有产品的链接。
- payment_type_img_url
返回付款类型的SVG图片的URL,与shop.enabled_pa​​yment_types变量结合使用。
- shopify_asset_url
返回shopify的服务器上的全局URL,包括option_selection.js、api.jquery.js、shopify_common.js、customer_area.js、currency.js、customer.css
- sort_by
使用提供的sort_by参数创建指向收集页面的URL 。此过滤器必须应用于集合URL。
- url_for_type
创建一个URL,该URL链接到包含具有特定产品类型的产品的收集页面。
- url_for_vendor
创建一个URL,该URL链接到包含具有特定产品供应商的产品的收集页面。
- within
- Additional filters
- date
将时间戳转为指定的日期格式
- default
默认值
- default_errors
默认的错误消息。返回的消息取决于所返回的字符串form.errors。
- default_paginate
为分页结果创建一组链接。与paginate变量结合使用。
- format_address
format_address在地址上使用过滤器,以根据其区域设置顺序打印地址的元素。过滤器将仅打印提供的部分地址
- highlight
如果与提交的search.terms相匹配,则将带有HTML`<strong>`标记的类包装在搜索结果中的单词
- highlight_active_tag
如果该标签用于过滤集合,则将标记链接`<span>`与类包装在一起active。
- json
将字符串转为JSON格式
- weight_with_unit
格式化产品型号的重量。重量单位在常规设置中设置
- placeholder_svg_tag
您可以传递类参数以包括SVG标签的自定义类属性

对象

全局对象

可以从主题中的任何文件使用和访问以下对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
- all_products
所有产品
- articles
文章
- blogs
博客
- cart
购物车
- colections
商店中的所有集合
- current_page
返回在浏览分页内容时所在页面的编号
- current_tags
将返回取决于所呈现的模板标签不同的列表
- customer
登录到商店的客户,如果客户未登录,它将不会返回任何信息
- linklists
菜单和链接集
- handle
正在查看的页面句柄
- images
可以通过文件名访问商店中的任何图像
- pages
返回商店中所有页面的列表
- page_description
产品、收集或所呈现页面的描述。这些项目的描述可以在后台管理中设置
- page_title
当前页面的标题
- recommendations
推荐商品集合
- shop
商店的信息
- scripts

内容对象

其他物件


  • 在售主题必须包含演示商店,演示商店必须包含
    • 一种产品在售
    • 一种产品售罄
    • 一种产品具有多种产品选择
    • 一种具有变体图像的产品
    • 不能包含: 付款、充值
  • 指定语言链接 <link href="shanghai.htm" rel="parent" charset="UTF-8" hreflang="zh-Hans" />
  • 表达式中可以使用contains 检查字符串或数组中是否存在子字符串
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励