Shopify 上传并展示静态页面(landing page)

By | 2025-11-08

简单来说就是:

1. 进入主题源码编辑(Edit Code),在layout路径下,创建layout,比如文件名为:landing.liquid, 复制你的LP代码到这个文件里保存。以下是示例landing page内容:

注意:{% comment %} … {% endcomment %}这部分的内容不能删掉。

landing.liquid
{% comment %}
  {{ content_for_header }}
  {{ content_for_layout }}
{% endcomment %}
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample Landing Page</title>
  </head>
  <body>
    <a href="https://example.com">click here</a>
  </body>
</html>

2. 在主题sections路径下,新建section空文件,如:lp-custom1.liquid,文件内容为空。

3. 在主题templates路径下,创建新的template,比如文件名为page.landing.json,文件内容如下

page.landing.json
{
  "layout": "landing",
  "sections": {
    "main": {
      "type": "lp-custom1"
    }
  },
  "order": [
    "main"
  ]
}

注意:

  • “layout”: “landing” 这一行,对应的是第1步中的文件名landing
  • “type”: “lp-custom1″这一行,对应的是第2步中的lp-custom1

保存后,回到shopify后台,新建page,Template选择你刚才新建的template。page内容为空就可以了。

这个方式,有2点要注意:

  1. 只能插入html源码,引用的外部文件比如js, css, image必须使用完整链接。或把 CSS/JS 文件上传到 Settings → Files,然后用完整链接引用它们。
  2. 渲染出的html代码中,部分app仍然会在header中添加部分内容,比如microsoft-clarity,无伤大雅。

Leave a Reply

Your email address will not be published. Required fields are marked *