shopify的前端开发教程
shopify的前端开发教程（⾃我整理）
基础（你要熟悉css，js，html）
⽂件结构
assets：img、js、scss 样式 存放的地⽅即主题使⽤的所有资源，包括图像、样式表和javascript⽂件
config：⼀个settings_schema.json⽂件和⼀个settings_data.json⽂件。
layout：主题布局模板，默认情况下是theme.liquid。
locales：主题的翻译locale⽂件，为主题提供相关语⾔的内容。
sections：组成主题的⼀个个可复⽤的模块。
snippets：Liquid代码⽚段⽂件，这些代码⽚段可以在主题的其他模板中引⽤。
templates：包含所有其他的Liquid模板，包括⽤户账号相关的模板。
若你使⽤的是theme kit则还有⼀个⽂件l
liquid
Liquid 是⼀门开源的模板语⾔，由 Shopify 创造并⽤ Ruby 实现。它是 Shopify 主题的⾻骼，并且被⽤于加载店铺系统的动态内容。
主要可以分成Basics,Objects,Tags，和filters。详细的建议去看⽂档，中⽂⽂档并不详细，缺少很多内容，可以先⽤中⽂⽂档⼊门再阅读官⽅⽂档。
settings_schema.json
settings_schema.json是主题的配置⽂件，他控制着主题中的可编辑内容，也存放着主题的⼀些信息，例如作者，版本等但主要是控制主题的可配置信息。(settings_data.json存放的是当前主题保存的值，不建议⼿动更改)
[
{//主题信息
"name":"theme_info",
"theme_name":"Debut",
"theme_author":"Shopify",
"theme_version":"11.0.1",//版本
"theme_documentation_url":"https:\/\/help.shopify\/manual\/using-themes\/themes-by-shopify\/debut",
"theme_support_url":"https:\/\/support.shopify\/"
},
{//主题配置信息
"name":"Colors",
"settings":[
{
"type":"color",
"id":"color_borders",
"label":"Border colors",
"default":"#e5e5e5"
},
{
"type":"color",
"id":"color_body_text",
"label":"Body text",
"default":"#333333"
}
]
}
]
配置的属性都有五个type、id、label、default、info
类型是否
必填
描述
type必填定义选项所需的输⼊类型
id必填id必须唯⼀，这将在主题中引⽤它
label必填向⽤户描述了该选项的⽤途，可以⽤中⽂placeholder可选输⼊的占位符⽂本的值。这仅适⽤于基于⽂本的设置类型。
options可选输⼊的下拉选择的值。这仅适⽤于type为select的时候。[{ “value”: “one”, “label”: “Radio One” },{ “value”:
“two”, “label”: “Radio Two” }]
default可选该选项的默认值
info可选为⽤户提供该选项的详细使⽤信息
type的常规输⼊属性如下
值说明
text允许⽤户输⼊单⾏⽂本字段
textarea允许⽤户输⼊多⾏⽂本字段
image_picker允许⽤户上传图⽚
radio允许⽤户使⽤单选按钮
select允许⽤户从下拉列表中进⾏选择
checkbox允许⽤户选中⼀个框，返回true或false值
range滑块选择，限定范围内的值
type的特殊输⼊属性如下
值说明
color允许⽤户使⽤颜⾊选择器窗⼝⼩部件选择颜⾊font_picker允许⽤户从可⽤字体列表中进⾏选择
collection允许⽤户选择商店中可⽤的产品系列
product允许⽤户选择商店中可⽤的产品
blog允许⽤户从商店中设置的博客列表中进⾏选择
link_list允许⽤户从可⽤菜单中进⾏选择
page允许⽤户选择商店中定义的特定页⾯
url允许⽤户链接到以下资源之⼀:⽂章、博客、收藏、⽹页或产品或外部url(例如example) video_url允许⽤户选择主题中可⽤的特定代码段
richtext可以使⽤richtext设置允许基本格式的⽂本内容。⽀持的格式选项有粗体、斜体、下划线、链接和段落。
html允许商家添加⾃定义html代码，该代码呈现为块的内容。未关闭标记在保存设置时⾃动关闭。
article允许⽤户引⽤Shopify商店中的⽂章。
信息设置
Shopify还允许将创建主题的作者信息放⼊侧边栏中，它们只有3个属性：type, content, info
类型是否必填描述
type必填定义选项所需的输⼊类型。 对于侧边栏设置，这只能是标题或段落
content必填⽂本内容
info可选向⽤户提供有关该选项的其他信息。
调⽤
{{ settings.对应属性的id }}
例如：{{ lor_borders }}
section
前端页面模板theme有⼀个名为sections的新⽬录。sections可访问与其他模板相同的全局对象、标记和过滤器的liquid模板。
在sections外部创建的变量在sections内部不可⽤。同样，在sections中创建的变量在sections外不可⽤。如果某个sections包含⼀个代码⽚段，则该代码⽚段可以访问该sections中的变量。
sections⽀持三个新的liquid标签。这些新的标签在sections外是不可⽤的。
{% schema %}
{% javascript %}
{% stylesheet %}
当Shopify渲染section时，它将每个section包装在⼀个具有唯⼀id属性的;
<div id="shopify-section-[id]"class="shopify-section">
[output of the section template]
</div>
如果在各⾃的{% schema %}标记中定义了presets，则可以将 Sections动态添加到主题的主页。带有presets的Sections将在主题编辑器中⾃动访问。在主题编辑器中，商家可以配置相同类型的多个Sections，并在主页上重新排列它们的外观。最多可以向主页添加25个动态Sections。与静态Sections不同，您不需要使⽤{% section %}标记在template⽂件中引⼊Sections。Shopify将所有预置的sections配置⼀起呈现在content_for_index的主题编辑器中。
使⽤section schema tags
sections {% schema %} 标记和{%comment%}注释标记⼀样 不输出其内容，且内部代码不执⾏。每个section 可以有⼀个 {% schema %}，{% schema %}必须包含有效的，{% schema %}可以放在section内任何位置，但是不能嵌套在另⼀个tags中。
你可以在{% schema %}中定义以下属性：
属性描述
name定义section名称
class为section的包装器指定额外的class
tag指定渲染section时的tag
settings使⽤与settings_schema.json相同
blocks blocks是可以在sections中任意添加排序删除的⼀个内容（在下⾯详细讲）max_blocks指定blocks的最⼤数量
presets预置即将⾃⼰包含在 content_for_index 对象中，添加进主题主页
default默认配置
locales翻译
class
"class": "slideshow"
}
{% endschema %}
************************
<div id="shopify-section-[id]"class="shopify-section slideshow">
[output of the section template]
</div>
tag
{% schema %}
{
"name": "Slideshow",
"tag": "section"
}
{% endschema %}
************************
<section id="shopify-section-[id]"class="shopify-section">
[output of the section template]
</section>
settings
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "header",
"type": "text",
"label": "Header",
"default": "Hello world"
}
]
}
{% endschema %}
/*******使⽤********/
{{ section.settings.header }}
bolcks
blocks必须有name和type属性，type可以是主题开发⼈员设置的任何值。blocks的settings的使⽤与settings_schema.json相同，同时limit属性可以限制blocks的数量。
{% schema %}
{
"blocks": [
{
"type": "payment_icons",
"name": "Payment Icons",
"limit": 2,
"settings": [
{
"id": "content",
"type": "text",
"label": "Quote"
}
]
}
]
}
{% endschema %}
max_blocks
"max_blocks": 2
}
{% endschema %}
presets
如果在各⾃的{% schema %}标记中定义了presets，则可以将 Sections动态添加到主题的主页。带有presets的Sections将在主题编辑器中⾃动访问。在主题编辑器中，商家可以配置相同类型的多个Sections，并在主页上重新排列它们的外观。最多可以向主页添加25个动态Sections。与静态Sections不同，您不需要使⽤{% section %}标记在template⽂件中引⼊Sections。Shopify将所有预置的sections配置⼀起呈现在content_for_index的主题编辑器中。
presets必须有两个属性name和category；
presets的settings包含添加到主页时的默认值，根据sections的schema settings ,presets 的值必须有效。
{% schema %}
{
"presets": [
{
"category": "Custom Content",
"name": "Text",
"settings": {
"heading": "Hello World"
},
"blocks":[
{
"type":"text",
"settings":{
"content":"Once upon "
}
}
]
}
]
}
{% endschema %}
default
定义默认配置，格式与presets相同只是没有name和catogory。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。