为 Shopify 主题开发设置本地环境

本地开发环境为开发人员提供了一个安全的工作空间，使他们可以微调 Shopify 主题，而无需担心影响现有商店。在本教程中，我们将探索 Shopify CLI，它使我们能够轻松地从 Shopify 商店中提取任何主题。

继续学习在舒适的本地设置中定制 Shopify 主题。

您将学到什么

• 设置本地开发环境
• 克隆 Shopify 商店主题
• 预览对本地代码所做的更改

先决条件

在开始之前，请确保您已具备以下条件：

1. Shopify 合作伙伴账户和 Shopify 商店：如果您想使用开发商店来开发主题，请创建或登录 Shopify 合作伙伴账户，然后创建一个开发商店（如果您还没有）。
如果您想在已设置的商店上工作，请确保您拥有 合作者账户 或 员工账户，并且该账户 拥有 该商店的“管理主题” 或 “主题” 权限，或者您是商店所有者。

2. Node.js：安装最新版本的Node.js，因为它对于运行 Shopify 主题开发所需的工具至关重要。

3. Git： 安装 Git来管理版本控制并轻松与其他开发人员协作。

4. Shopify CLI：确保您的系统已安装 Shopify CLI，并已安装 Shopify CLI 文档中提到的所有内容。如果您尚未安装，请先参考Shopify CLI 文档中的安装说明，然后使用以下命令。

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

为什么要设置本地环境？

以下是设置本地环境对于 Shopify 主题开发至关重要的一些令人信服的理由：

1. 提升工作流程效率：在本地环境中工作可以缩短开发周期，并促进团队成员之间更高效的协作。开发人员可以快速测试和实施变更，避免实际部署带来的延迟。
2. 最大限度地降低风险和错误：本地环境为开发人员提供了一个可控的设置，用于试验新功能和设计。这降低了将错误或漏洞直接引入上线商店的可能性，最终增强了平台的整体稳定性。
3. 优化的主题定制：本地开发环境使开发人员能够更灵活、更精确地定制主题。它允许对各种设计元素和功能进行详细测试，确保最终用户在实际商店中获得卓越的体验。

设置本地开发环境

现在，让我们深入了解使用 Shopify CLI 为 Shopify 主题开发设置本地开发环境的分步过程。

步骤 1：创建项目文件夹

为您的项目建立一个专用文件夹并导航到该文件夹​​：

mkdir your-folder-name
cd your-folder-name

第 2 步：拉取商店主题

使用以下命令将商店的主题提取到本地系统：

shopify theme pull --store=your-store-name.myshopify.com

• 如果这是您第一次运行上述命令，系统将提示您登录 Shopify。
• 如果您已经至少登录过一次您的商店，您将被直接要求选择主题。
• 选择您想要的主题并按回车键即可开始下载。

主题下载完成后，继续后续步骤。

步骤3：打开代码编辑器

启动您喜欢的代码编辑器并加载您之前创建的项目文件夹。

您可以看到商店主题中的所有文件现在都可以在您的本地文件夹中找到。

步骤4：初始化主题开发

在代码编辑器的终端中执行后续命令（确保您在项目目录中）：

shopify theme dev

💡此命令将创建一个开发主题，使您能够在本地进行修改而不会影响您的实时商店。

步骤5：在本地环境中预览开发主题

运行后 shopify theme dev，您可以在浏览器中与主题进行交互。Shopify CLI 会将主题作为开发主题上传到商店。

该命令返回一个热重新加载本地更改的 URL，让您可以使用商店的数据实时预览更改。

您可以导航至以 http://127.0.0.1:9292 在浏览器中打开主题预览。

步骤 6：预览本地代码中所做的更改

您可以随意修改开发主题的代码，并实时预览更改效果。比如，您可能想调整商店公告栏中显示的文字。

如下图所示，我更新了本地环境中公告栏中的文本，但我的实时主题不受影响。

💡现在您可以进行更改、预览它们，当您对更改感到满意时，您可以无缝地将它们推送到您的 GitHub 存储库，然后将它们部署到您的实时商店。

结论

为 Shopify 主题开发设置本地环境，为简化且无错误的开发流程奠定了基础。此设置可确保您的客户在您的 Shopify 商店享受卓越的购物体验，同时允许您在正式部署之前无缝地进行修改和审核。

如需更多 Shopify 技巧和窍门，请随时与我联系。LinkedIn
：https://www.linkedin.com/in/quratulain
GitHub：https://github.com/QuratAin