Shopify 主题样式开发

Shopify 前端开发，主题样式开发初体验，本地开发环境搭建，section 开发，liquid 编写，代码提交

勤奋刘哈哈

4710人浏览 · 2022-05-23 23:32:42

勤奋刘哈哈 · 2022-05-23 23:32:42 发布

背景

最近接了个Shopify模板修改的需求，第一次接触这个，摸着石头过河，官方只有英文文档，看起来很吃力，各种搜索查资料，查到的大多都是开店铺和店铺装修的介绍，本地开发使用Shopify CLI工具的文章很少，或者就是使用Theme Kit工具，Shopify 的历史和发展这里不做介绍，感兴趣可以自己查一下，这里记录一下自己使用Shopify CLI开发工具进行本地开发的过程。

参考文章

如何创建shopify主题模板本地开发环境（用shopify-cli）

Shopify各种入口

Shopify API 文档
 Shopify 合作伙伴首页
 Shopify 商店后台登录

搭建本地开发环境

参考：Shopify CLI for themes
本地开发环境搭建可参考如何创建shopify主题模板本地开发环境（用shopify-cli）

这里简单介绍下，

安装 Shopify CLI 工具
Shopify Cli 是一个命令行工具，现在更新到 3.x 版本了，
Shopify Cli 3.x依赖Node.js 16或更高版本，Ruby+Devkit 3.0；

~~安装完Ruby之后就可以使用gem工具了，打开cmd使用gem安装shopify-cli包~~ ,

~~gem install shopify-cli~~

如果还在使用 Shopify CLI 2.x，需要先卸载掉

gem uninstall shopify-cli

Shopify CLI 3.x 安装

npm install -g @shopify/cli @shopify/theme

初始化新主题

shopify theme init

根据提示输入模版的名称，这一步操作会新建一个文件夹并Dawn主题将克隆到文件夹中。
Dawn是 Shopify 的参考主题，专为性能，灵活性和易用性而构建。
shopify 初始化
3. 连接到 Shopify 商店

~~shopify login --store mystore.myshopify.com  # mystore 为注册或添加的店铺地址~~

Shopify CLI 3.x 使用这种方式登录店铺失败，提示command login not found

# shopify cli3.x 要这样连接店铺
shopify theme dev --store mystore.myshopify.com  # mystore 为注册或添加的店铺地址

运行本地环境

# Shopify CLI 2.x
~~shopify theme serve~~ 

# Shopify CLI 3.x
shopify theme dev

我在合作伙伴账号管理平台创建开发商店，上一步登录使用开发商店地址登录，不知道是不是因为合作伙伴账户设置里面的应用商店没有注册的原因，本地启动会报错；
这样就只能去shopify官网注册一个试用14天的店铺，用14试用的店铺本地启动是可以的。
本地启动报错

目录结构和组件类型

先了解一下项目的目录结构

# Shopify 主题目录结构
└── theme
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── sections
    ├── snippets
    └── templates
        └── customers

assets

指向标题为“资产”的部分的锚定链接
该目录包含主题中使用的所有资源，包括图像、CSS 和 JavaScript 文件。
使用asset_url液态网址过滤器来引用模版中的素材资源。

config

该目录包含主题的配置文件。配置文件在主题编辑器的主题设置区域中定义设置。

layout

该目录包含主题的布局文件，通过该文件呈现模板文件。

locales

该目录包含主题的语言翻译设置文件，这些文件用于提供已翻译的内容。

sections

该目录包含主题的块部分。

snippets

该目录包含 Liquid 文件，这些文件托管较小的可重用代码片段。您可以使用 Liquid 渲染标记在整个主题中引用这些代码段。

templates

该目录包含主题的模板文件，这些文件控制每种类型的页面上呈现的内容。
该目录包含以客户为中心的页面（如登录名和帐户概述页面）的模板文件。

详细内容可查看官方文档说明，主题介绍

开发过程

需求：现在要求在产品详情页增加一些自定义内容，我选择开发一个分区模块，然后在模板中引用。

说明：这里对liquid模板语言不做过多说明，可以查相关文档。

参考文档：Liquid 模板语言中文文档、LiquidJS

开发：在sections增加一个自定义的liquid文件，custom-section.liquid

<style>
  .custom-box {
    color: #CCC;
    text-align: center;
  }
</style>

<div class="custom-box">
  <p>自定义一个 sction</p>
  <p>这里可以写 HTML 内容</p>
</div>

<script>

</script>

{% schema %}
  {
    "name": "Custom Sction",
    "class": "custom-section",
    "settings": [
      
    ],
    "blocks": [
      
    ],
    "presets": [{
      "name": "Custom Sction",
      "blocks": [
        
      ]
    }]
  }
{% endschema %}

本地启动，预览

代码解析

liquid 文件中CSS、HTML、Javascript 代码和在 HTML 文件中编写差不多，外部CSS、Javascript 引入有两种方式，
本地引入资源都放在 assets 目录里

CSS 样式引入

// liquid 中引入样式表
<link rel="stylesheet" media="screen and (max-width:768px)" href="{{ 'custom-mobile.css' | asset_url }}">
// 或
{{ 'custom-base.css' | asset_url | stylesheet_tag }}

JS 引入

// liquid 中引入js
<script src="{{ 'swiper-3.4.2.jquery.min.js' | asset_url }}" defer="defer"></script>
// 或
{{ 'custom-script.js' | asset_url | script_tag }}

图片资源可以本地引入或者放到服务器上

// 图片资源引入
<img src="{{ 'icon.svg' | asset_url }}" width="120" height="40" alt="icon">

schema 中写的就是模板相关配置了，没有设置name的话，在后台编辑模板时看不到自定义 section。

将代码上传到主题中

方式1：可以初始化一个git库，把代码提交到github，然后进入商店后台模板库，添加模板从 GitHub 连接，通过github授权，连接Shopify和github，
方式2：或者在后台中修改
在 Shopify 商店后台中，转到在线商店>模版。
找到要编辑的主题，然后单击“操作”>“编辑代码”。
这样就会看到一个和本地环境差不多的项目代码结构，选择“新增 section”，将本地的代码复制、粘贴、保存。