--- highlight: monokai --- [Shopify 开发文档](https://shopify.dev/docs) [Liquid 文档](https://liquid.bootcss.com/) [Liquid 语法案例查询](https://www.shopify.com/partners/shopify-cheat-sheet?shpxid=15f36252-2FFF-4B65-A422-375F1E30AD7F) [Visual Studio Code 插件安装 - Shopify Liquid](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) [Visual Studio Code 插件安装 - Liquid](https://marketplace.visualstudio.com/items?itemName=sissel.shopify-liquid) [翻译插件 - 腾讯翻译](https://chrome.google.com/webstore/detail/%E8%85%BE%E8%AE%AF%E7%BF%BB%E8%AF%91/lkjkfecdnfjopaeaibboihfkmhdjmanm) 网络资料： * [Shopify 社区](https://community.shopify.com/c/shopify-community-zh-cn/ct-p/zh-cn) # 一、环境搭建安装参考： 1、ruby 安装 https://www.ruby-lang.org/zh_cn/ # 下载地址 https://rubyinstaller.cn/ 注：下载完成后，一直下一步就好，忽略掉过程，完成完成后 fish 会打开 cmd。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fea21ac1e8a5481fa3e9e51959f9e86f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=993\&h=519\&s=44646\&e=png\&b=0c0c0c) 记得按回车，安装成功后 cmd 自动关闭。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0efc075fbadc44e69c41f67908f565bc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=993\&h=519\&s=44646\&e=png\&b=0c0c0c) 2、[shopify-cli 下载](https://shopify.dev/docs/themes/tools/cli/install#install-shopify-cli)（gem 后面放弃掉） # 这个下载的，必然是 2.X.X，可惜这样的是错的 gem install shopify-cli # 使用上面这种方式安装后升级 shopify upgrade 使用 npm 下载（推荐）注：也可看 [shopify](https://shopify.dev/docs/apps/tools/cli#migrate-to-shopify-cli-3-x) 官网的升级流程。 # 用它下载的是 3.X.x 版本 npm install -g @shopify/cli @shopify/theme 3、shopify 版本查看 shopify version 4、登出（拉取项目时的异常处理） ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2388bdd119949b9a7b9e461f17da654~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1537\&h=149\&s=14094\&e=png\&b=272822) 注：如果报上面的错，就代表你需要登出一下，才可以拉取项目。 shopify auth logout # 二、Shopify 开发官网地址： ## 1、Shopify cli 的使用 ### 1）登录必须要在网页中进行当前项目的的登陆哦，负责会出现问题的。 ### 2）拉取项目 shopify theme pull --store 你的项目名.myshopify.com # 以下面的地址为例子，你登陆完项目后，需要定位到主页 # 然后去查看项目名 # https://admin.shopify.com/store/quickstart-c566b596 这个里面的项目名就是 quickstart-c566b596 # 下载的链接就为： # shopify theme pull --store quickstart-c566b596.myshopify.com ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe93c10895d14fa8b6a33c1bc9e2aace~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=961\&h=495\&s=17941\&e=png\&b=0c0c0c) 这个时候会在出现一次登陆，记得登陆之前 ① 的账户。 ### 3）运行 shopify theme dev ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/839ee8213ffc4d599621fb1378dd9e99~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=740\&h=411\&s=13480\&e=png\&b=0d0d0d) ### 4）推送项目 ⚠️ 注：应该做一个 [git 脚本化](https://shopify.dev/docs/apps/deployment)，每次 cr 到 main 分支后，自动执行 shopify theme push --store quickstart-c566b596.myshopify.com 去实现，拒绝人工搬运。 shopify theme push --store 你的项目名.myshopify.com # 以下面的地址为例子，你登陆完项目后，需要定位到主页 # 然后去查看项目名 # https://admin.shopify.com/store/quickstart-c566b596 这个里面的项目名就是 quickstart-c566b596 # 下载的链接就为： # shopify theme push --store quickstart-c566b596.myshopify.com ## 2、目录结构 [![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d332f9df6f1440ee8df91e5451822d12~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=455\&h=456\&s=24802\&e=png\&b=181818)](https://shopify.dev/docs/themes/architecture#directory-structure-and-component-types) ## 3、修改项目 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a1447bf6f134cb6ae9dcbd3f36f2ea4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=754&h=920&s=140062&e=png&b=191919) # 三、liquid 的语法基础注：vsc 插件下载 Shopify Liquid。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28bbcc40df1d4026ac684ef6a011b5c0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1266&h=928&s=312630&e=png&b=f9f7f7) ## 1、schema 注：一个基础的 liquid 文件。

{% schema %} { "name": "测试", "class": "", "settings": [ ], "presets": [ { "name": "测试" } ] } {% endschema %} ### 1）settings 的使用 [文档](https://shopify.dev/docs/themes/architecture/settings/input-settings#standard-attributes)

121

131

{% schema %} { "name": "Box List", "settings": [ { // 作为模板时的输入框类型 "type": "text", // 作为获取的 key "id": "height", // 输入框的文案 "label": "每个 item 的高度", // 输入框的默认值 "default": "100px" }, { "type": "text", "id": "width", "label": "每个 item 的宽度", "default": "100px" } ], "presets": [ { "name": "Box List" } ] } {% endschema %} ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0abbe8373e4a4fc9b346d6697f38ee9c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1548&h=565&s=748804&e=png&b=f0e6e5) `settings` 是一个 json 数组，json 对象的参数如下： | 属性 | 参数 | 描述 | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | | type | number 数字 string 字符串 text 文本 textarea 文本域 range checkbox radio select 下拉框 image\_picker 图片选择 url 链接（内部跳转的时候使用） [collection](https://shopify.dev/docs/api/liquid/objects/collection) 只能使用产品 —\> 收藏里面的内容 inline\_richtext richtext color 颜色 | 控制 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4b619f7e11447829b62e030eee789b0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=282&h=102&s=2214&e=png&b=ffffff) 配置栏的类型（也就是各个面板项目) | | id | 自己定义的字符串 | 1、自己定义的字符串； 2、取值的时候使用 section.settings.你刚才定义的 id 字符串； 3、理解成获取变量的 key | | label | 自己起的面板文案 | 定义面板的的文案 | | default | 定义的默认值 | | | info | 面板的提示信息 | | 注： #### ① collection 案例

{{ section.settings.collection_id }} {{ collections[section.settings.collection_id].url }} {{ collections[section.settings.collection_id].title }} {{ collections[section.settings.collection_id].image }} {{ collections[section.settings.collection_id].image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '165, 360, 535, 750, 1070, 1500' }}

{% schema %} { "name": "test", "settings": [ { "type": "collection", "id": "collection_id", "label": "collection 使用" } ], "presets": [ { "name": "测试" } ] } {% endschema %} 只能展示 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d2fb09fa30a47bd982f703fdaa1868a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1218&h=703&s=92231&e=png&b=f9f9f9) 这个下面的内容。 ### 2）blocks [文档](https://shopify.dev/docs/themes/architecture/sections/section-schema#blocks) 注：blocks 是一个 json 数组 | 属性 | 参数 | 描述 | | -------- | -------------------------------------- | -- | | type | 一个自己定义的 string | | | name | 作为编辑器中的名称使用 | | | limit | 当面这个控制面板，在 `添加块` 中，能使用的次数（默认是不限制的） | | | settings | 一个 json 数组，参数同 `schema 中 settings 的使用` | | 初步案例：注： ① blocks 为一个对象的数组。

{% comment %} 读取 blocks 中的参数 {% endcomment %} {%- for block in section.blocks -%}

{%- endfor %}

{% schema %} { "name": "blocks 测试", "tag": "section", "class": "section", "blocks": [ { "type": "test", "name": "添加 inline_richtext", "settings": [ { "type": "inline_richtext", "id": "richtext", "default": "文案", "label": "标题文案" }, { "type": "select", "id": "font_size", "options": [ { "value": "h0", // FOXME 反人类，html 店铺是从 h1 开始的 "label": "H0" }, { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" }, { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }, { "value": "h5", "label": "H5" } ], "default": "h0", "label": "标题大小" } ] } ], "presets": [ { "name": "blocks 测试" } ] } {% endschema %} ② blocks 为多个个对象的数组

{% comment %} 读取 blocks 中的参数 {% endcomment %} {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'test1' -%}

{%- when 'test2' -%} {% comment %} 一定要有图片不为 blank 的判断 {% endcomment %} {%- if block.settings.image != blank -%} {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%} {{ block.settings.image | image_url: width: 500 | image_tag: loading: 'lazy', widths: widths }} {%- endif -%} {%- endcase -%} {%- endfor -%}

{% schema %} { "name": "blocks 测试", "tag": "section", "class": "section", "blocks": [ /* 特殊 "type": "@app" 是添加一个应用使用的时候是： {% for block in section.blocks %} {% case block.type %} {% when '@app' %} {% render block %} {% endcase %} {% endfor %} */ // { // "name": "", // "type": "@app" // }, { "type": "test1", "name": "添加 inline_richtext", "limit": 2, "settings": [ { "type": "inline_richtext", "id": "richtext", "default": "文案", "label": "标题文案" }, { "type": "select", "id": "font_size", "options": [ { "value": "h0", // FOXME 反人类，html 店铺是从 h1 开始的 "label": "H0" }, { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" }, { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }, { "value": "h5", "label": "H5" } ], "default": "h0", "label": "标题大小" } ] }, { "type": "test2", "name": "图片", "settings": [ { "type": "image_picker", "id": "image", // 这个一般就不要默认地址了 // "default": "", "info": "图片", "label": "选择图片" } ] } ], "presets": [ { "name": "blocks 测试" } ] } {% endschema %} ### 3）在Dom 元素中的使用 schema [文档 - section](https://shopify.dev/docs/api/liquid/objects/section) ## 2、css [文档 - 资源加载](https://shopify.dev/docs/themes/tools/theme-check/checks/asset-preload) 注：css 的引入，只能在 sections、layout 中使用。 ### 1）局部引入（直接引入 css 文件） {{- 'test.css' | asset_url | stylesheet_tag: preload: true -}} ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8954e0f9257d4d948a2772ef9b626003~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=668&h=150&s=10640&e=png&b=282923) ### 2）分区中设置 css （也就是局部变量的设置） /* #shopify-section- 是所有分区的统一命名，是不会改变的 {{ section.id }} 是系统自己生成如果你要局部修改，就只能这样修改，负责你就是全局修改的样式 */ #shopify-section-{{ section.id }} .section { padding-block-start: 30px; padding-block-end: 30px; } ### 3）icon-font 的引入 {% comment %} 直接在 layout ——> theme.liquid 引入就好 {% endcomment %} {{- 'iconfont.css' | asset_url | stylesheet_tag: preload: true -}} ## 3、图片展示 [img 响应式图片](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) [图片展示](https://shopify.dev/docs/api/liquid/objects/images) [文档](https://shopify.dev/docs/themes/best-practices/performance#use-responsive-images) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/048b30966bf741ce838b2ec4d7240ba8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=778&h=95&s=15499&e=png&b=272822) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7b76ccb6f0e4016a014c67547a17334~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=457&h=144&s=9487&e=png&b=272822) schema 选择图片 {{ section.settings.image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '165, 360, 535, 750, 1070, 1500' }} ## 4、render ✅ [文档](https://shopify.dev/docs/api/liquid/tags/render) 注：render 渲染的 liquid 文件，只能在 `snippets` 文件里，并且 render 渲染的文件中不支持 `schema`。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a17757c760b44b87842a6a042d6b2a9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1149&h=400&s=23673&e=png&b=282923) ### 1）传参 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f308b7fa5f9845aba0c0c97f50699086~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1373&h=366&s=36354&e=png&b=272822) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9372eb5240724c3a87f061748d0f9c91~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1307&h=435&s=48433&e=png&b=272822) ## 5、style ⁉️ {%- style -%} {%- endstyle -%} 基本上等于所以使用的时候，你就使用 `style` 标签就好，没必要使用 {%- style -%}。 ## 6、过滤器 [文档](https://shopify.dev/docs/api/liquid/filters/asset_url) 所有文件的引入，都要使用 `{{ '文件名.css/js' | asset_url }}` ## 7、引入 vue 注：不推荐，会感觉四不像，如果真的使用推荐方法一，文件比较集中（而且 liquid 中用 vue 就很变态）。 [引入文档](https://github.com/Shopify/theme-check/blob/main/docs/checks/parser_blocking_script_tag.md) ### 1）引入 vue 的方法一 ① 在 layout ——> theme.liquid 中 {% comment %} 记得放在 head 里 {% endcomment %} ② 使用 sections ——> test.liquid 注：[raw 文档](https://shopify.dev/docs/api/liquid/tags/raw)

{% comment %} 这块也可以加一个 div 去渲染 data 中的数据，写法如下，不推荐

{% endcomment %} {% assign variable = '测试 assign 变量在 Vue 中的使用' %} {% raw %} {{ name }} {% endraw %}

{% schema %} { "name": "测试", "settings": [ ], "presets": [ { "name": "测试" } ] } {% endschema %} ### 2）引入 vue 的方法二 ① 在 layout ——> theme.liquid 中 {% comment %} 记得放在 head 里 {% endcomment %} ② 在 layout ——> test.js.liquid 中 new Vue({ el: '#app', data: { name: '2222' } }) ③ 使用 sections ——> test.liquid

{% schema %} { "name": "测试", "settings": [ ], "presets": [ { "name": "测试" } ] } {% endschema %} 注：react 的引用同理 # 四、常用 liquid 语法及方法 ## 1、上下间距调节器

{% schema %} { "name": "上下间距调节器", "settings":[ { "type": "range", "id": "top_bottom_space", "label": "左右拖动调节间距", "max": 100, "min": 0, "step": 1, "default": 30 } ], "presets":[ { "name": "上下间距调节器", "category": "Advanced" } ] } {% endschema %} ## 2、链接

{%- if section.settings.link and section.settings.text -%}{{ section.settings.text | link_to: section.settings.link }}{%- endif -%}

{% schema %} { "name": "链接", "settings": [ { "type": "url", "id": "link", "label": "链接" }, { "type": "text", "id": "text", "label": "链接文案", "default": "链接文案" } ], "presets": [ { "name": "链接" } ] } {% endschema %} ## 3、发送邮件 [文档](https://shopify.dev/docs/api/liquid/tags/form) [form 提交信息处理](https://shopify.dev/docs/api/liquid/objects/form) 注：会让你验证，但是这个是成功的，倒霉的让我改了好久（不要在本地验证，本地他不让发邮件的）。

{% form 'customer' %} {{ form.errors | default_errors }} {%- if form.posted_successfully? -%} 成功 {%- else -%} {%- if form.errors -%} 失败 {%- endif -%}

{%- endif -%} {% endform %}

## 4、返回顶部按钮 [文档](https://juejin.cn/post/6978394085899894820)

{% comment %} 返回 {% endcomment %}

{% schema %} { "name": "返回顶部", "presets": [ { "name": "返回顶部" } ] } {% endschema %} {% comment %} 返回 svg {% endcomment %} ## 5、表单 [文档](https://shopify.dev/docs/api/liquid/tags/form) [form 提交信息处理](https://shopify.dev/docs/api/liquid/objects/form) 注： ① create\_customer 创建表单时，他不支持返回成功的提示（深坑！！！） [![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f692ac70daf412cb4f6d72f044ec03c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=726&h=274&s=30239&e=png&b=ffffff)](https://shopify.dev/docs/api/liquid/objects/form#form-posted_successfully?) ② [错误信息处理 default\_errors](https://shopify.dev/docs/api/liquid/filters/default_errors) ③ [获取请求 request （也就是当前 url 的信息）之后的状态](https://shopify.dev/docs/api/liquid/objects#request) 注：表单不是很好用。 ## 6、调用 shopify 中定义的方法注：类似调用购物车的弹出框。 /** * 直接获取到 DOM 元素，然后去 click，不要尝试使用 theme.js 里面的方法哦，里面全是原型链，难以阅读，需要大量的时间 */ document.querySelector(".mobile-nav-trigger").click(); ## 7、顶部 bar 注：如果你只链接收藏的话，也可以考虑 [collection](https://shopify.dev/docs/api/liquid/objects/collection) 属性，但是他很单一，很多是无法进行设置的，不推荐。

{%- for block in section.blocks -%} {%- if block.settings.image != blank -%}

{{ block.settings.image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '165, 360, 535, 750, 1070, 1500' }}

{%- endif -%} {%- if block.settings.text != blank -%}

{%- endif -%} {%- endfor %}

{% schema %} { "name": "顶部 tabs", "class": "tabs-sticky", "settings":[ { "type": "range", "id": "top_space", "label": "距离顶部距离", "max": 100, "min": 0, "step": 1, "default": 6 } ], "blocks": [ { "type": "tabs", "limit": 8, "name": "tabs", "settings": [ { "type": "image_picker", "id": "image", "label": "tab 图片" }, { "type": "url", "id": "link", "label": "tab 链接" }, { "type": "text", "id": "text", "label": "tab 文案" } ] } ], "presets": [ { "name": "顶部 tabs" } ] } {% endschema %} ## 8、获取产品信息 [文档](https://shopify.dev/docs/api/liquid/objects/product) ## 9、获取登陆信息 [文档 - 示例](https://shopify.dev/docs/themes/architecture/templates/customers-login#link-to-the-login-page) [文档 - shop 对象的属性](https://shopify.dev/docs/api/liquid/objects/shop) {% if shop.customer_accounts_enabled %} {% if customer %} {% comment %} 已经登陆 {% endcomment %} 账户 url {% else %} 暂无登陆登陆 url {% if shop.customer_accounts_optional %} 创建账户 url {% endif %} {% endif %} {% endif %} ## 10、元字段文档： * * ## 11、界面跳转 [文档](https://shopify.dev/docs/api/liquid/objects/routes) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f65f0fdf6361448abf21e56beb3ba1fc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=683&h=200&s=12315&e=png&b=292a24) ## 12、获取当前 liquid 文件中的部分数据 [文档](https://shopify.dev/docs/api/liquid/objects/section) ## 13、assign （变量） [文档](https://shopify.dev/docs/api/liquid/tags/assign)

{% assign variable = '测试' %} {{ variable }}

{% schema %} { "name": "测试", "settings": [ ], "presets": [ { "name": "测试" } ] } {% endschema %} ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b361e747857f4fd19c0ad3e59b6b2fce~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=675&h=667&s=55569&e=png&b=424452) ## 14、capture 定义 html [文档](https://shopify.dev/docs/api/liquid/tags#capture)

{% capture testHtml %}

渲染的时 html 标签

{%- endcapture -%} {{ testHtml }}

{% schema %} { "name": "测试", "settings": [ ], "presets": [ { "name": "测试" } ] } {% endschema %} ## 15、for （遍历） [文档](https://shopify.dev/docs/api/liquid/tags/for) ## 16、过滤器 🗑️ [文档](https://shopify.dev/docs/api/liquid/filters) [中文文档](https://liquid.bootcss.com/filters/) 注：很差劲的东西，大部分前端框架已经 🚮 的玩意，liquid 反而在大量使用，体验差！！！ ## 17、订单属性 [文档](https://shopify.dev/docs/api/liquid/objects/order) ## 18、图片的引入 background-image: url({{ '图片名.格式' | asset_url }});

## 19、显示指定行数，超出显示省略号元素选择器 { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; /* 要显示的行数，超出显示省略号 */ -webkit-box-orient: vertical; } ## 20、三角

## 21、走马灯 🪲

{% if block.settings.image != block %} {{ block.settings.image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '200', class: 'revolving-door-image' }} {% endif %} {% if block.settings.video != block %} {% endif %}

{% if block.settings.second-line_image != block %} {{ block.settings.second-line_image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '200', class: 'second-line_revolving-door-image' }} {% endif %}

{% schema %} { "name": "跑马灯", "blocks": [ { "type": "first-row", "name": "第一行", "settings": [ { "type": "image_picker", "id": "image", "label": "图片（每行至少六个图片或视频）" }, { "id": "video", "type": "video", "label": "视频" } ] }, { "type": "second-line", "name": "第二行", "settings": [ { "type": "image_picker", "id": "second-line_image", "label": "图片（每行至少六个图片或视频）" }, { "id": "video", "type": "video", "label": "视频" } ] } ], "presets": [ { "name": "走马灯" } ] } {% endschema %} ## 22、swiper 的引入 [文档](https://www.swiper.com.cn/) [文档 - 推荐](https://www.swiperjs.net/swiper-doc/)

{%- for block in section.blocks -%} {%- if block.settings.image -%} {% capture img %}

{{ block.settings.image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '165, 360, 535, 750, 1070, 1500' }}

{%- endcapture -%} {{ img }} {%- endif -%} {%- if block.settings.image and block.settings.link_url -%} {{ img }} {%- endif -%} {%- endfor %}

{% if section.settings.paginator %}

{% endif %} {% if section.settings.navigation %}

{% endif %}

{% schema %} { "name": "轮播", "settings": [ { "type": "checkbox", "id": "navigation", "label": "左右箭头" }, { "type": "checkbox", "id": "play", "label": "是否自动播放" }, { "type": "checkbox", "id": "paginator", "label": "分页器" }, { "type": "color", "id": "paginator_color", "label": "分页器颜色", "default": "#fff" }, { "type": "range", "id": "desktop_image_height", "min": 100, "max": 1000, "step": 10, "unit": "px", "label": "桌面图像行高", "default": 460 }, { "type": "range", "id": "mobile_image_height", "min": 100, "max": 700, "step": 10, "unit": "px", "label": "移动图像行高", "default": 400 }, { "type": "range", "id": "image_width", "min": 1, "max": 100, "step": 1, "unit": "%", "label": "图像的宽", "default": 80 } ], "blocks": [ { "type": "images", "name": "图片", "settings": [ { "type": "image_picker", "label": "图片", "id": "image" }, { "type": "url", "label": "点击图片跳转的 url", "id": "link_url" } ] } ], "presets": [ { "name": "轮播", "blocks": [ { "type": "image" }, { "type": "image" }, { "type": "image" }, { "type": "image" } ] } ] } {% endschema %} # 五、创建一个 app [文档](https://shopify.dev/docs/apps/getting-started/create) [视频 1](https://www.youtube.com/watch?v=XPn0JwNNPoc) [视频 2](https://www.youtube.com/watch?v=NVwOrJT5hes) [视频 3](https://www.youtube.com/results?search_query=shopify+%E6%95%99%E7%A8%8B) [视频 4 - 推荐](https://www.youtube.com/watch?v=XPn0JwNNPoc\&list=UULFMymdkKEEU4YY1nDmFHVjdQ\&index=5) 注：建议使用 `pnpm`。创建后报错处理 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07653ccf3efc40428ffdb8d92c8c1ba0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=809&h=642&s=18255&e=png&b=0c0c0c) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac9978ac53fc462fa63ad0bbf5c5679f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=674&h=1882&s=114717&e=png&b=434553) 注：理论上 Shopify 支持 Vue 作为应用框架的开发。 ## 1、创建应用前配置环境 ### 1）登陆 Gadget ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e55d0104d02b4d2095ac0d2cb2626a2f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1786&h=851&s=54037&e=png&b=f7f7f7) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcfff70efcd84d9b9cd9f5252a456bfa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=884&h=576&s=17928&e=png&b=7f7f7f) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43f4a21895f044728113b7b24bd46a2d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=916&h=597&s=17967&e=png&b=7f7f7f) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38591155ae914f4687867783fd22bcbf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1029&h=694&s=86019&e=png&b=fafafa) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21919d5fbfba4d92ae612f3cd4959a52~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1361&h=890&s=144755&e=png&b=fefefe) ### 2）登陆 shopify partners ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2ef27dafde94647b58c78ee7fbcc8fc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1615&h=915&s=44743&e=png&b=f6f6f7) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7dee2c219f1944cca2776b075ae4b1cb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1758&h=924&s=92180&e=png&b=f5f5f6) 等商店创建成功。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7030744d6f64ae387f7e386b034d377~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1551&h=867&s=100564&e=png&b=f6f6f7) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b08b6657a3f4be6be239459b15ed333~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1594&h=591&s=49104&e=png&b=f6f6f7) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/136b170a61de46378ceda2a668c99c8d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1238&h=870&s=85938&e=png&b=ffffff) ### 3）根据 shopify partners 生成的信息去填写 Gadget ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4c3d72e09f14fdaae649eb6540c589e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1235&h=837&s=32377&e=png&b=fefefe) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc5afc1720644ffaa707c826f8b41c18~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1749&h=800&s=63498&e=png&b=ffffff) ![image-20231102161124205转存失败，建议直接上传图片文件](<转存失败，建议直接上传图片文件 >) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f88ede77018140c180321b3c3f704387~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=955&s=161051&e=png&b=fbfafa) ### 4）根据 Gadget 去填写 shopify partners ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5a5a600a5384b248e75ef4333c8f452~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1630&h=899&s=137340&e=png&b=fefdfd) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c600db9e33d4846b395d317036806f4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1676&h=873&s=81995&e=png&b=f6f6f7) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59db3b53e75a41bcab3ee713d264d3ba~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1641&h=667&s=41468&e=png&b=f6f6f7) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bb23add61d34335837e7608d4b8bf13~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=832&h=673&s=369185&e=png&b=fefefe) ### 5）shopify 中安装程序 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81b659aa918e4ce2a8b3b9c17d9d2bbb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1310&h=973&s=108470&e=png&b=f7f7f7) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/edae63477db442e996228b1c0b047fa4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1565&h=740&s=60532&e=png&b=f4f4f4) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f82923eb20e4403b6ca131a87c2fc38~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=242&s=35200&e=png&b=fbfbfb) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a4554d397bc49199bbff5cb93dffa0c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1324&h=914&s=117453&e=png&b=fbfbfa) 先写一个 hello word 查看效果。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bdc6cded8f844f6929f38f34fb746bc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=978&h=578&s=29788&e=png&b=f8f8f8) ### 6）Gadget 进行初步数据的创建 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87c617cfac774c4292ab06a6ead35fc7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1594&h=943&s=108104&e=png&b=fbfbfb) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f06a8e2cac3d4a4c8f75822c4b4c680a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1285&h=791&s=110086&e=png&b=fbfbfa) 这步待定。 ### 7）在本地监听 Gadget 的变化 🚮 npx @gadgetinc/ggt@latest sync --app 自己定义的名字 ~/gadget/自己定义的名字 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53b74d18ddd84933b25187a9e62c0590~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=877&h=396&s=18771&e=png&b=0c0c0c) ### 8）本地开发注：如果没安装，提示你安装 @shopify/create-app 。 npm init @shopify/app@latest ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f29eada495de45e29a2e9e986dbf132d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=509&s=39221&e=png&b=0d0d0d) 未完待续 # 六、注意事项 ## 1、window\.onload `window.onload 在一个 html 文件中，只执行一次`，所以你在界面中，有时候它是不执行的，所以要尽量避免使用它（因为你不确定在别处是否使用），可以考虑使用 [document.addEventListener("load", function() {})](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) 来替代，可参考： document.addEventListener("load", function() { }) ## 2、shopify 缓存很严重 chrome://settings/clearBrowserData/ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56c7d563acee4c19b1599d6a6b4260e2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1098&h=717&s=65817&e=png&b=666666) 及时清理。 # 七、shopify配置 ⚠️ ## 1、结账页税费和货到付款的运费都只能用插件处理 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0917426e940641108be2839a275ee73d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1752&h=873&s=100698&e=png&b=f7f7f7) ## 2、货到付款配置需要结合运费设置 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56681a005afd4d748e3aec111d75f7dd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=869&h=178&s=11565&e=png&b=fbfbfb) # 八、GA4 （用户习惯收集）注：必须要填写你要收集的网站（不友好）。