# my-shopify-theme

**Repository Path**: chen-111/my-shopify-theme

## Basic Information

- **Project Name**: my-shopify-theme
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-12
- **Last Updated**: 2025-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Liquid, CSS

## README

<h1 align="center" style="position: relative;">
  <br>
    <img src="./assets/shoppy-x-ray.svg" alt="logo" width="200">
  <br>
  Shopify Skeleton Theme
</h1>

A minimal, carefully structured Shopify theme designed to help you quickly get started. Designed with modularity, maintainability, and Shopify's best practices in mind.

<p align="center">
  <a href="./LICENSE.md"><img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License"></a>
  <a href="./actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Shopify/skeleton-theme/actions/workflows/ci.yml/badge.svg"></a>
</p>

## Getting started

### Prerequisites

Before starting, ensure you have the latest Shopify CLI installed:

- [Shopify CLI](https://shopify.dev/docs/api/shopify-cli) – helps you download, upload, preview themes, and streamline your workflows

If you use VS Code:

- [Shopify Liquid VS Code Extension](https://shopify.dev/docs/storefronts/themes/tools/shopify-liquid-vscode) – provides syntax highlighting, linting, inline documentation, and auto-completion specifically designed for Liquid templates

### Clone

Clone this repository using Git or Shopify CLI:

```bash
git clone git@github.com:Shopify/skeleton-theme.git
# or
shopify theme init
```

### Preview

Preview this theme using Shopify CLI:

```bash
shopify theme dev
```

## Theme architecture

```bash
.
├── assets          # Stores static assets (CSS, JS, images, fonts, etc.)
├── blocks          # Reusable, nestable, customizable UI components
├── config          # Global theme settings and customization options
├── layout          # Top-level wrappers for pages (layout templates)
├── locales         # Translation files for theme internationalization
├── sections        # Modular full-width page components
├── snippets        # Reusable Liquid code or HTML fragments
└── templates       # Templates combining sections to define page structures
```

To learn more, refer to the [theme architecture documentation](https://shopify.dev/docs/storefronts/themes/architecture).

### Templates

[Templates](https://shopify.dev/docs/storefronts/themes/architecture/templates#template-types) control what's rendered on each type of page in a theme.

The Skeleton Theme scaffolds [JSON templates](https://shopify.dev/docs/storefronts/themes/architecture/templates/json-templates) to make it easy for merchants to customize their store.

None of the template types are required, and not all of them are included in the Skeleton Theme. Refer to the [template types reference](https://shopify.dev/docs/storefronts/themes/architecture/templates#template-types) for a full list.

### Sections

[Sections](https://shopify.dev/docs/storefronts/themes/architecture/sections) are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section.

Sections are made customizable by including a `{% schema %}` in the body. For more information, refer to the [section schema documentation](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema).

### Blocks

[Blocks](https://shopify.dev/docs/storefronts/themes/architecture/blocks) let developers create flexible layouts by breaking down sections into smaller, reusable pieces of Liquid. Each block has its own set of settings, and can be added, removed, and reordered within a section.

Blocks are made customizable by including a `{% schema %}` in the body. For more information, refer to the [block schema documentation](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/schema).

## Schemas

When developing components defined by schema settings, we recommend these guidelines to simplify your code:

- **Single property settings**: For settings that correspond to a single CSS property, use CSS variables:

  ```liquid
  <div class="collection" style="--gap: {{ block.settings.gap }}px">
    ...
  </div>

  {% stylesheet %}
    .collection {
      gap: var(--gap);
    }
  {% endstylesheet %}

  {% schema %}
  {
    "settings": [{
      "type": "range",
      "label": "gap",
      "id": "gap",
      "min": 0,
      "max": 100,
      "unit": "px",
      "default": 0,
    }]
  }
  {% endschema %}
  ```

- **Multiple property settings**: For settings that control multiple CSS properties, use CSS classes:

  ```liquid
  <div class="collection {{ block.settings.layout }}">
    ...
  </div>

  {% stylesheet %}
    .collection--full-width {
      /* multiple styles */
    }
    .collection--narrow {
      /* multiple styles */
    }
  {% endstylesheet %}

  {% schema %}
  {
    "settings": [{
      "type": "select",
      "id": "layout",
      "label": "layout",
      "values": [
        { "value": "collection--full-width", "label": "t:options.full" },
        { "value": "collection--narrow", "label": "t:options.narrow" }
      ]
    }]
  }
  {% endschema %}
  ```

## CSS & JavaScript

For CSS and JavaScript, we recommend using the [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags#stylesheet) and [`{% javascript %}`](https://shopify.dev/docs/api/liquid/tags/javascript) tags. They can be included multiple times, but the code will only appear once.

### `critical.css`

The Skeleton Theme explicitly separates essential CSS necessary for every page into a dedicated `critical.css` file.

## Contributing

We're excited for your contributions to the Skeleton Theme! This repository aims to remain as lean, lightweight, and fundamental as possible, and we kindly ask your contributions to align with this intention.

Visit our [CONTRIBUTING.md](./CONTRIBUTING.md) for a detailed overview of our process, guidelines, and recommendations.

## License

Skeleton Theme is open-sourced under the [MIT](./LICENSE.md) License.





### 解释
🔗 两者的关系
终端流程 (MFDV-CPKB)：这是 “钥匙”。

它正在请求获得访问你 Shopify 商店的权限。

你需要完成这个登录授权，终端里的 shopify theme dev 命令才能运行起来。

商店后台 (myself-12404)：这是 “锁”，也是你最终要控制的地方。

看起来你已经成功注册，并拥有了一个 Shopify 开发商店，其地址是 myself-12404.myshopify.com。

最重要的区别：你刚才在终端里尝试连接的商店是 example.myshopify.com（这是一个官方示例域名），但你实际拥有的商店是 myself-12404.myshopify.com。

✅ 正确的操作步骤
因为你已经拥有了自己的商店 (myself-12404)，现在需要做的是将终端项目关联到你自己的商店。

第1步：获取你商店的准确域名
从你的后台地址 https://admin.shopify.com/store/myself-12404 可以确定，你的商店域名是：
myself-12404.myshopify.com
所以是npx @shopify/cli@latest theme dev --store=myself-12404.myshopify.com

第2步：按任意键并完成授权 (关键步骤)
在终端里按任意键（如回车）。

浏览器会打开 Shopify 设备授权页面。

输入验证码 MFDV-CPKB。

使用你注册 myself-12404 商店时所用的同一个 Shopify 账户登录。



https://admin.shopify.com/store/myself-12404/online_store/preferences 商店后台



浏览器浏览的地址：https://admin.shopify.com/store/myself-12404




### 已经添加了一个产品，就是不知道怎么看
🎉 太好了！恭喜您成功添加了第一个产品！ 这是一个重要的里程碑，标志着您的Shopify商店已经开始搭建实质性的内容了。

现在，您的商店已经从“空壳”变成了拥有商品的“实体”。接下来，您可以继续丰富店铺，或者回到我们之前讨论的核心任务上。

🚀 后续可以做什么？
选项一：继续完善您的店铺

添加更多产品：重复刚才的流程，丰富您的产品线。

设置运费：在 设置 > 发货和配送 中，配置您的运费规则。

自定义主题：在 在线商店 > 主题 中，点击“自定义”，开始调整店铺的外观，让它更符合您的品牌。

选项二：回到并解决最初的主题开发问题
如果您想继续之前未完成的、使用Shopify CLI在本地开发主题的目标，那么现在就需要回头解决那个根本的权限问题。

请记住，要成功运行 npx @shopify/cli@latest theme dev，您必须先将您的合作伙伴账户添加为店铺的协作者。

📝 快速权限设置回顾（关键一步）
为了让您顺利进入开发阶段，请务必完成这一步：

以店主身份登录后台 (https://admin.shopify.com/store/myself-12404)。

进入 设置 > 用户和权限 > 协作者。

添加协作者，输入您用于登录Shopify CLI的合作伙伴账户邮箱。

去该邮箱查收并接受邀请。

完成以上步骤后，您就可以回到命令行，使用 npx @shopify/cli@latest auth logout 登出再重连，应该就能顺利启动本地开发环境了。

总结一下您的进展
您已经成功完成了：
✅ 创建并激活了Shopify店铺 (myself-12404)
✅ 成功添加了第一个产品

待完成的核心任务：
⏳ 将合作伙伴账户添加为店铺协作者，以解决CLI的权限错误。

您是希望现在就去完成权限设置，以便开始主题开发，还是想继续在后台完善店铺的其他部分呢？告诉我您的下一步打算，我可以为您提供更具体的指引。



###
从您提供的信息看，这是Shopify在您添加第一个产品后，引导您完成初始设置的 “概览仪表盘”页面。

页面上列出了开通店铺需要完成的核心任务，我们可以逐条解读：

项目	含义与状态	您的操作建议
Select a plan...	选择套餐：这是最紧急的任务。您目前处于免费试用期，必须付费订阅才能正式开业。	立即处理。点击此选项，在弹出窗口中选择一个付费套餐（如Basic Shopify）并完成支付，否则试用结束后店铺将无法访问。
44444 / $1.00	这很可能是您刚添加的产品的标题和价格。	如需修改，请进入 “产品” 列表页面编辑。
Design your store	设计店铺：系统推荐您根据业务描述生成主题或选择预设主题。	可以点击 “提交” 并描述您的业务（如“现代手工珠宝”），或稍后在 “在线商店 > 主题” 中自行选择和定制。
Set up Shopify Payments	设置支付网关：必须配置好收款方式（如信用卡）顾客才能付款。	必须尽快完成。点击进入，根据引导填写您的企业信息、银行账户等以开通支付。
Review your shipping rates	审核运费设置：检查系统根据您地址生成的默认运费。	点击进入 “设置 > 发货和配送”，根据您的产品重量和发货政策进行调整。
Domain customized	域名：您的免费默认域名 myself-12404.myshopify.com。	店铺开业后，可以在 “在线商店 > 域名” 中购买自定义域名（如 www.yourbrand.com）。


### 可以访问的页面（后台开发者看的）：https://admin.shopify.com/store/myself-12404
### 可以访问的页面（客户可以看的）：https://myself-12404.myshopify.com/