定制商店

（一）概述

自定义店面是构建 headless 的模型，其中店面的前端和后端相互独立。开发者构建前端。商家在其定制店面体验背后使用 Shopify 的商务引擎。

（二）优点

1. 灵活性：Storefront API 与设备和平台无关。开发者可以使用任何编程语言构建自定义店面，这使工作流程变得灵活。
2. 定制：可以构建一个随着商家业务的发展和适应而发展的解决方案。随着客户趋势和交互的变化，商务解决方案可以快速适应客户获取方面的长期市场变化。
3. 集成：带来自己的工具、技术堆栈和经验，并将自定义后端与 Shopify 商务数据集成。

（三）Hydrogen

Hydrogen 是用于构建 Shopify 自定义店面的前端 Web 开发框架。它包括您入门所需的结构、组件和工具，因此开发者可以花时间设计界面和设计功能，使品牌独一无二。

1、创建 Hydrogen 应用

在终端中，运行npm create @shopify/hydrogen@latest -- --quickstart

首次创建会提示安装@shopify.create-hydrogen

安装完成后出现一下提示即 Hydrogen 应用创建成功

包含有关新项目的一些详细信息，并且使用 Mock.shop 中的示例数据

2、运行开发服务器

• cd hydrogen-quickstart

• shopify hydrogen dev

  

• 开发服务器运行后，在浏览器中打开http://localhost:3000 ，将看到Mock.shop库存

  

3、将 Hydrogen 项目链接到 Shopify

默认情况下，Hydrogen 项目显示来自Mock.shop的示例产品。要展示自己的产品，请将本地项目链接到 Shopify，创建新店面并同步环境变量。

1. 此步骤仅支持 shopify plus 版本以上
   • 先登录 hydrogen login
   • 将 Hydrogen 项目链接到 Shopify：npx shopify hydrogen link
2. 手动配置 env 文件拉取产品，参考这里