Shopify開發(fā)入門-前端保姆級(jí)教程??????
本文旨在介紹Shopify開發(fā)入門、環(huán)境、配置等，幫助開發(fā)者配置環(huán)境、了解各個(gè)開發(fā)模式的區(qū)別及用途；已有Shopify開發(fā)經(jīng)驗(yàn)者可退出，以免浪費(fèi)你的寶貴時(shí)間。本文5k字+，圖片、鏈接、代碼塊較多，請(qǐng)耐心閱讀~
前言
最近在調(diào)研Shopify開發(fā)，對(duì)其也有了一定的認(rèn)識(shí)、了解；即將這些整理沉淀下來(lái)，希望能幫助到他人。
介紹
Shopify 是由 Tobi Lütke 創(chuàng)辦的加拿大軟件開發(fā)商。
Shopify 是一站式SaaS模式的電商服務(wù)平臺(tái)，為電商賣家提供搭建網(wǎng)店的技術(shù)和模版，管理全渠道的營(yíng)銷、售賣、物流等服務(wù)。降低小型商戶在網(wǎng)店經(jīng)營(yíng)上的技術(shù)門檻，是 Shopify 最基礎(chǔ)的業(yè)務(wù)。
商戶注冊(cè)賬戶，選擇網(wǎng)站模版，上傳商品并添加描述，設(shè)置價(jià)格和物流選項(xiàng)，添加收款方式，短時(shí)間內(nèi)就能生成一個(gè)美觀且可靠的獨(dú)立站。
已有超過(guò)一百萬(wàn)家企業(yè)使用Shopify平臺(tái)創(chuàng)建了在線店鋪。
相關(guān)地址
Shopify官網(wǎng)（https://www.shopify.com/）
Shopify開發(fā)文檔（https://shopify.dev/）
Shopify合作伙伴（https://www.shopify.com/partners）
Shopify合作伙伴博客（https://www.shopify.com/partners/blog）
Ruby官網(wǎng)（https://www.ruby-lang.org/zh_cn/）
內(nèi)網(wǎng)穿透-ngrok官網(wǎng)（https://ngrok.com/）
liquid模板語(yǔ)言（https://shopify.dev/api/liquid）
本文Demo地址（github）
起步
若想要開發(fā)Shopify主題、應(yīng)用、自定義店鋪，都應(yīng)該滿足以下基本要求。
本地開發(fā)環(huán)境
- 安裝 Node.js 14.170+
- 安裝Node.js包管理器 npm、Yarn 或 pnpm
- 安裝 Ruby 3.0+
- 安裝 Git 2.28+
創(chuàng)建Shopify開發(fā)者賬號(hào)（合作伙伴）
注冊(cè)Shopify ID（已有賬號(hào)的話會(huì)自動(dòng)跳過(guò)此步驟）
進(jìn)入Shopify開發(fā)官網(wǎng)，點(diǎn)擊右上角 Login in。如下圖，點(diǎn)擊添加賬號(hào)。
沒注冊(cè)過(guò)Shopify的話會(huì)提示創(chuàng)建Shopify ID，一步步創(chuàng)建就可以了。
創(chuàng)建合作伙伴賬戶
已有Shopify賬號(hào)可用郵箱直接登錄，點(diǎn)擊新建合作伙伴賬戶
進(jìn)入到表單填寫頁(yè)，填寫完成點(diǎn)擊查看控制面板即可。
創(chuàng)建過(guò)程會(huì)久一些，請(qǐng)勿重復(fù)創(chuàng)建。若提示504，進(jìn)入Shopify開發(fā)官網(wǎng)，重新登陸。如下圖，小黎開發(fā)賬戶已創(chuàng)建成功。
點(diǎn)擊小黎開發(fā)進(jìn)入合作伙伴控制后臺(tái)。
關(guān)于語(yǔ)言（英語(yǔ)好的小伙伴可以忽略）
這時(shí)候有小伙伴會(huì)好奇了，為什么我的頁(yè)面都是中文呢。這里我已經(jīng)設(shè)置過(guò)了語(yǔ)言，基本Shopify的后臺(tái)都是中文了。點(diǎn)擊右上角頭像，點(diǎn)擊個(gè)人資料，下滑找到首選語(yǔ)言設(shè)置。
創(chuàng)建開發(fā)商店
點(diǎn)擊左側(cè)商店，點(diǎn)擊創(chuàng)建開發(fā)商店；
填入商店名稱，盡量簡(jiǎn)短好記。點(diǎn)擊右下角創(chuàng)建開發(fā)商店。創(chuàng)建完成后會(huì)跳轉(zhuǎn)到商店（新創(chuàng)建的商店）后臺(tái)。
點(diǎn)擊左側(cè)導(dǎo)航在線商店，點(diǎn)擊右上角查看你的商店。在線商店鏈接為https://[商店名].myshopify.com/， 目前商店僅供開發(fā)使用?？稍谟蚁陆遣榭床⒏纳痰昝艽a。
完成起步的所有步驟后，我們便成功了第一步；接下來(lái)看相關(guān)的開發(fā)。
開發(fā)
再回到Shopify開發(fā)官網(wǎng)，我們可以看到官方的簡(jiǎn)介 Build anything. Reimagine commerce.（建立任何東西。重新想象商業(yè)。），再往下看 Start building
分別為應(yīng)用、主題、定制商店、市場(chǎng)等。
應(yīng)用
商店后臺(tái)應(yīng)用
您可以構(gòu)建一個(gè)應(yīng)用程序來(lái)為 Shopify 商店添加功能并擴(kuò)展商家體驗(yàn)，或者為客戶創(chuàng)造獨(dú)特的購(gòu)買體驗(yàn)。您還可以將 Shopify 商店數(shù)據(jù)提取到您的應(yīng)用程序、平臺(tái)或集成中。
為了根據(jù)他們的特定需求定制體驗(yàn)，商家使用 Shopify 應(yīng)用來(lái)幫助建立他們的業(yè)務(wù)，與外部服務(wù)集成，并向他們的 Shopify 后臺(tái)添加功能。
官方文檔
1. 創(chuàng)建新應(yīng)用
在控制臺(tái)運(yùn)行命令 npm init @shopify/app@latest ，根據(jù)提示輸入應(yīng)用名、模板，我這里選的是node。
PS D:\Demos\Shopify-test> npm init @shopify/app@latest
Welcome. Let’s get started by naming your app. You can change it later.
? Your app's name?
? xiaoli-app
? Which template would you like to use?
> (1) node
(2) php
(3) ruby
Press ↑↓ arrows to select, enter to confirm
會(huì)下載代碼及依賴，時(shí)間會(huì)久一些，請(qǐng)耐心等待。
2. 啟動(dòng)服務(wù)
cd xiaoli-app
npm run dev
運(yùn)行命令后控制臺(tái)提示
To run this command, log in to Shopify Partners.
?? Press any key to open the login page on your browser
按下回車后網(wǎng)頁(yè)會(huì)提示登錄合作伙伴賬戶，選擇合作伙伴賬戶后。會(huì)提示登錄成功，然后選擇你的開發(fā)店鋪，這里我選擇我剛創(chuàng)建的小黎開發(fā)
? Logged in.
Looks like this is the first time you're running dev for this project.
Configure your preferences by answering a few questions.
? Which Partners organization is this work for?
小黎店鋪
小黎測(cè)試3
小黎測(cè)試1
小黎測(cè)試2
小黎測(cè)試4
> 小黎開發(fā)
小黎開發(fā)測(cè)試
Press ↑↓ arrows to select, enter to confirm
設(shè)置app name
? Which Partners organization is this work for?
? 小黎開發(fā)
? App Name:
? xiaoli-app
? Using your default dev store (xiaoli-test) to preview your project.
? Success! Converted xiaoli-test.myshopify.com to a Test store.
然后會(huì)生成一個(gè)鏈接和一些預(yù)覽地址
╭─ info ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ For your convenience, we've given your app a default URL: https://c88b-219-144-202-78.jp.ngrok.io. │
│ │
│ You can update your app's URL anytime in the Partners Dashboard ( https://partners.shopify.com/2804053/apps/27426717697/edit ). But once your app is live, updating its URL │
│ will disrupt merchant access. │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Shareable app URL
https://c88b-219-144-202-78.jp.ngrok.io?shop=xiaoli-test.myshopify.com&host=eGlhb2xpLXRlc3QubXlzaG9waWZ5LmNvbS9hZG1pbg
2023-02-03 08:54:38 | frontend | > Network: http://192.168.110.85:62591/
2023-02-03 08:54:38 | frontend | > Network: http://192.168.12.1:62591/
2023-02-03 08:54:38 | frontend | > Network: http://192.168.136.1:62591/
2023-02-03 08:54:38 | frontend | > Local: http://localhost:62591/
3. 安裝應(yīng)用
首次訪問(wèn)需要設(shè)置內(nèi)網(wǎng)穿透，我之前已經(jīng)設(shè)置了，所以可以直接進(jìn)入
我們點(diǎn)擊 Shareable app URL 后面的這個(gè)鏈接會(huì)在網(wǎng)頁(yè)開一個(gè)新頁(yè)，點(diǎn)擊 Visit Site，然后安裝該應(yīng)用。
安裝成功后，我們會(huì)看到左側(cè)應(yīng)用欄那里有我們的應(yīng)用xiaoli-app
3-1. 設(shè)置內(nèi)網(wǎng)穿透
未設(shè)置時(shí)網(wǎng)頁(yè)會(huì)提示我們?cè)O(shè)置ngrok， ngrok官網(wǎng)，使用郵箱注冊(cè)登錄后來(lái)到控制臺(tái)；
下載解壓后運(yùn)行該程序，復(fù)制命令并運(yùn)行。
ngrok is a command line application, try typing 'ngrok.exe http 80'
at this terminal prompt to expose port 80.
C:\Users\Administrator\Desktop>ngrok config add-authtoken 2KzcraSazcmMYNC4BjTw7SAD7XK_5e7Zv5JRe2u62hsEa4QCA
Authtoken saved to configuration file: C:\Users\Administrator\AppData\Local/ngrok/ngrok.yml
C:\Users\Administrator\Desktop>
4. 本地開發(fā)應(yīng)用
我們先來(lái)看一下文件目錄結(jié)構(gòu)
然后打開React入口文件 xiaoli-app\web\frontend\App.jsx，如下部分代碼，這部分代碼對(duì)應(yīng)了后臺(tái)左側(cè)的導(dǎo)航欄
navigationLinks={[
{
label: "Page name",
destination: "/pagename",
}
]}
我們分別在xiaoli-app\web\frontend\App.jsx 更改導(dǎo)航
navigationLinks={[
{
label: "小黎介紹頁(yè)",
destination: "/pagename",
}
]}
在xiaoli-app\web\frontend\pages\index.jsx 更改標(biāo)題
<TitleBar title="小黎測(cè)試" primaryAction={null} />
然后刷新下后臺(tái)，現(xiàn)在導(dǎo)航和標(biāo)題已經(jīng)改變了
剩下功能各位大佬們開發(fā)去吧。
商店前臺(tái)應(yīng)用-主題應(yīng)用擴(kuò)展（應(yīng)用程序塊、應(yīng)用程序嵌入塊）
主題應(yīng)用程序擴(kuò)展為您的應(yīng)用程序提供了兩種擴(kuò)展在線商店主題的集成類型：應(yīng)用程序塊和應(yīng)用程序嵌入塊。您提交到 Shopify 應(yīng)用商店的每個(gè)新應(yīng)用都需要使用主題應(yīng)用擴(kuò)展來(lái)與在線商店主題集成。
主題應(yīng)用程序擴(kuò)展允許商家輕松地將動(dòng)態(tài)元素添加到他們的主題中，而無(wú)需與 Liquid 模板或代碼進(jìn)行交互。例如，動(dòng)態(tài)元素可以包括產(chǎn)品評(píng)論、價(jià)格、評(píng)級(jí)或產(chǎn)品的交互式 3D 模型。
優(yōu)點(diǎn)
- 主題應(yīng)用程序擴(kuò)展會(huì)自動(dòng)在主題編輯器中公開您的應(yīng)用程序。您可以利用編輯器的可視化編輯功能，而無(wú)需在您的應(yīng)用程序中復(fù)制它們。
- 您可以同時(shí)將您的應(yīng)用程序部署到使用它的所有在線商店。您還可以訪問(wèn)Shopify CDN 上的應(yīng)用程序版本控制和資產(chǎn)托管的生命周期管理。
- 一組集成邏輯和指令適用于所有主題。
- 商家不需要手動(dòng)編輯他們的主題代碼。
官方文檔
1. 創(chuàng)建應(yīng)用擴(kuò)展
在之前創(chuàng)建的xiaoli-app文件內(nèi)，運(yùn)行命令 npm run shopify app generate extension，我們選擇 （9）Theme App Extension，然后輸入擴(kuò)展名稱。
PS D:\Demos\Shopify-test\xiaoli-app> npm run shopify app generate extension
? Type of extension?
Discounts and checkout
(1) Checkout UI
(5) Function - Product discount
(6) Function - Shipping discount
(7) Post-purchase UI
Merchant admin
(8) Subscription UI
Online store
> (9) Theme App Extension
Analytics
(10) Web Pixel
Press ↑↓ arrows to select, enter to confirm
? Type of extension?
? Theme App Extension
? Your extension's working name?
? xiaoli-extension
╭─ success ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Theme App Extension extension was added to your project! │
│ │
│ Next steps │
│ ? To find your extension, remember to `cd extensions/xiaoli-extension` │
│ ? To preview your project, run `npm run dev` │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 6.14.13 -> 9.4.1 │
│ Changelog: https://github.com/npm/cli/releases/tag/v9.4.1 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
創(chuàng)建成功后，文件中多了一個(gè)extensions文件
2. 主題擴(kuò)展介紹
我們先來(lái)看一下文件目錄
└── extensions
└── xiaoli-extension
├── assets
├── blocks
├── snippets
├── locales
└── shopify.theme.extension.toml
主題擴(kuò)展文件目錄詳解（官網(wǎng)）
- assets 注入到主題CSS、JavaScript 和其他靜態(tài)應(yīng)用內(nèi)容
- blocks 應(yīng)用程序塊和應(yīng)用程序嵌入塊 Liquid 文件。
- snippets Liquid 代碼段文件，這些文件是您可以在其他應(yīng)用程序塊和應(yīng)用程序嵌入塊中引用的代碼位。
- locales JSON 語(yǔ)言環(huán)境文件以托管面向商家和面向客戶的翻譯。
- shopify.theme.extension.toml 基本應(yīng)用配置設(shè)置的配置文件，包括擴(kuò)展名稱和類型
3. 編寫應(yīng)用插件
官方給了一個(gè)簡(jiǎn)單的應(yīng)用程序塊供我們測(cè)試預(yù)覽（效果不夠明顯）
<span style="color: {{ block.settings.color }}">
App blocks let you build powerful integrations with online store themes.
</span>
{% render "app_snippet" %}
{% schema %}
{
"name": "Hello World",
"target": "section",
"stylesheet": "app.css",
"javascript": "app.js",
"settings": [
{ "label": "Color", "id": "color", "type": "color", "default": "#000000" }
]
}
{% endschema %}
官方還有一個(gè)主題庫(kù)theme-extension-getting-started， 我們將這個(gè)庫(kù)下載到本地，替換assets、blocks、snippets這幾個(gè)文件，完成后目錄文件如下
刪掉每個(gè)文件內(nèi)的.gitkeep文件（不刪的話預(yù)覽會(huì)報(bào)錯(cuò)）
4. 部署應(yīng)用擴(kuò)展創(chuàng)建草稿版本
創(chuàng)建擴(kuò)展后，您可以將擴(kuò)展代碼部署到 Shopify。該deploy命令將應(yīng)用程序更新推送到開發(fā)商店中的草稿版本。在發(fā)布到在線商店之前，您可以在沙盒環(huán)境中測(cè)試您的主題應(yīng)用程序擴(kuò)展。
- 運(yùn)行npm run deploy
- 選擇發(fā)布到小黎開發(fā)合作伙伴賬戶
- 提示創(chuàng)建或選擇一個(gè)應(yīng)用（連接我們之前創(chuàng)建的應(yīng)用xiaoli-app）
- 選擇 Yes, deploy to push changes發(fā)布
PS D:\Demos\Shopify-test\xiaoli-app> npm run deploy
> xiaoli-app@1.0.0 deploy D:\Demos\Shopify-test\xiaoli-app
> shopify app deploy
? Which Partners organization is this work for?
? 小黎開發(fā)
Before you preview your work, it needs to be associated with an app.
? Create this project as a new app on Shopify? // connection reference
? Yes, create it as a new app // 這里應(yīng)連接當(dāng)前的應(yīng)用,不需要?jiǎng)?chuàng)建一個(gè)新的
? App Name:
? xiaoli-app // 連接的應(yīng)用為 xiaoli-app
? Make the following changes to your extensions in Shopify Partners?
? Yes, deploy to push changes
? Created extension xiaoli-extension.
Deploying your work to Shopify Partners. It will be part of xiaoli-extension
theme_extensions | Running theme check on your Theme app extension...
theme_extensions | Checking D:/Demos/Shopify-test/xiaoli-app/extensions/xiaoli-extension ...
theme_extensions | 12 files inspected, 0 offenses detected, 0 offenses auto-correctable
╭─ success ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Deployed to Shopify! │
│ │
│ Summary │
│ ? xiaoli-extension is deployed to Shopify but not yet live │
│ │
│ Next steps │
│ ? Publish xiaoli-extension ( https://partners.shopify.com/2804053/apps/27757379585/extensions/theme_app_extension/20693712897 ) │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
PS D:\Demos\Shopify-test\xiaoli-app>
完成上述步驟后，我們的應(yīng)用擴(kuò)展便部署到了線上?？梢钥吹娇刂婆_(tái)Next steps，點(diǎn)擊鏈接進(jìn)入合作伙伴管理后臺(tái)。
- 在開發(fā)商店預(yù)覽區(qū)域點(diǎn)擊啟用
- 創(chuàng)建版本v0.1.0，點(diǎn)擊發(fā)布該版本
發(fā)布完成后需要等待5分鐘…
4. 使用并預(yù)覽應(yīng)用擴(kuò)展
完成部署及發(fā)布后，便可以使用代碼塊、應(yīng)用嵌入。在商城后臺(tái)點(diǎn)擊在線商店，然后點(diǎn)擊自定義按鈕進(jìn)入。
此時(shí)我們進(jìn)入到了在線商店編輯頁(yè)，左側(cè)導(dǎo)航分別為模板區(qū)域、模板設(shè)置、應(yīng)用嵌入等。
應(yīng)用塊
在模板區(qū)域，點(diǎn)擊添加分區(qū)，選擇我們的應(yīng)用塊。
現(xiàn)在我們看到頁(yè)面新加入了一個(gè)圖片區(qū)域，這就是我們應(yīng)用塊。
點(diǎn)擊右上角保存按鈕，即可在線上商城預(yù)覽。
此代碼塊對(duì)應(yīng)文件地址為 xiaoli-extension/blocks/app-block.liquid
應(yīng)用嵌入
在應(yīng)用嵌入?yún)^(qū)域，可以看到我們開發(fā)的Party嵌入應(yīng)用，點(diǎn)擊開關(guān)并保存。
此時(shí)右下角出現(xiàn)了一個(gè)懸浮的圓形按鈕（狗頭像），這里是一個(gè)動(dòng)畫效果。
5. 主題應(yīng)用擴(kuò)展結(jié)構(gòu)
在blocks目錄下找到
app-block.liquid（應(yīng)用塊）
{% schema %}
{
"name": "Image Gallery",
"target": "section",
"stylesheet": "image-gallery.css",
"javascript": "image-gallery.js",
"templates": ["product", "index"],
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Cute Puppy Gallery"
},
{
"type": "text",
"id": "description",
"label": "Description",
"default": "A simple app block that shows a grid of images that can be customized by the merchant. Each image can be selected to show a popup with the full-sized image."
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image 3"
},
{
"type": "image_picker",
"id": "image_4",
"label": "Image 4"
}
]
}
{% endschema %}
app-embed.liquid（嵌入應(yīng)用）
{% schema %}
{
"name": "Party",
"target": "body",
"stylesheet": "image-gallery.css",
"javascript": "party-button.js",
"settings": []
}
{% endschema %}
- name 應(yīng)用程序塊或應(yīng)用程序嵌入塊的主題編輯器中的標(biāo)題。
- target 應(yīng)用程序塊的值為section. 應(yīng)用程序嵌入塊的值為head和body。
- javascript 從assets子目錄加載的 JavaScript 文件，僅當(dāng)頁(yè)面上存在該塊時(shí)才會(huì)加載這些資產(chǎn)。無(wú)論塊在頁(yè)面上出現(xiàn)多少次，它也只會(huì)加載一次。
- stylesheet 從assets子目錄加載的 Css 文件，只引入一次。
- templates 可以在其中呈現(xiàn)塊的模板，默認(rèn)為所有頁(yè)面。
- settings 向商家提供的用于自定義應(yīng)用程序塊或應(yīng)用程序嵌入塊的設(shè)置；選擇塊時(shí)，這些設(shè)置會(huì)出現(xiàn)在主題編輯器（右側(cè)）中?？梢允褂迷O(shè)置Liquid 對(duì)象訪問(wèn)設(shè)置值。
官網(wǎng)地址
主題
主題決定了 Shopify在線商店的外觀、感覺和功能對(duì)于商家及其客戶的方式。
Shopify 主題是使用 Shopify 的主題模板語(yǔ)言Liquid以及 HTML、CSS、JavaScript 和 JSON 構(gòu)建的。
官方文檔
1. 設(shè)置開發(fā)環(huán)境
macOS (Homebrew)
brew tap shopify/shopify
brew install shopify-cli
Windows 和 Linux (npm)
npm install -g @shopify/cli @shopify/theme
2. 初始化主題
運(yùn)行shopify theme init命令后，提示我們輸入主題的名稱，這里我輸入xiaoli-theme；首次預(yù)覽時(shí)需要登錄，
PS D:\Demos\Shopify-test> shopify theme init
? Name of the new theme:
? xiaoli-theme
3. 啟動(dòng)本地開發(fā)服務(wù)器預(yù)覽主題
進(jìn)入xiaoli-theme目錄，運(yùn)行shopify theme dev --store {store}（store為開發(fā)商店的名稱）；首次預(yù)覽時(shí)需要登錄，控制臺(tái)提示Press any key to open the login page on your browser 時(shí)按下center打開新網(wǎng)頁(yè)，選擇賬號(hào)登錄。
PS D:\Demos\Shopify-test> cd xiaoli-theme
PS D:\Demos\Shopify-test\xiaoli-theme> shopify theme dev --store xiaoli-test
To run this command, log in to Shopify Partners.
?? Press any key to open the login page on your browser
? Logged in.
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #143515222338 on xiaoli-test.myshopify.com
┃ 100%
┃
┃ Serving .
┃
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Theme Editor, and use 'theme pull' to get the changes:
┃ https://xiaoli-test.myshopify.com/admin/themes/143515222338/editor
┃
┃ Share this theme preview:
┃ https://xiaoli-test.myshopify.com/?preview_theme_id=143515222338
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (11.03s)
打開 http://127.0.0.1:9292 ，輸入商城密碼，預(yù)覽主題。
4. 測(cè)試更改主題
更改templates/index.json文件的image_banner
"image_banner": {
"blocks": {
"heading": {
"type": "heading",
"settings": {
"heading": "小黎宣傳圖banner",
"heading_size": "h0"
}
}
}
}
保存后預(yù)覽
image_banner 區(qū)域的文字已經(jīng)改變。
5. 上傳主題到商店
運(yùn)行shopify theme push --unpublished命令，輸入主題名稱xiaoli-theme。
PS D:\Demos\Shopify-test\xiaoli-theme> shopify theme push --unpublished
? Theme name
> xiaoli-theme
┏━━ Pushing theme files to xiaoli-theme (#143516729666) on xiaoli-test.myshopify.com
┃ 100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (69.02s) ━━━
√ Your theme was pushed successfully
View your theme:
https://xiaoli-test.myshopify.com/?preview_theme_id=143516729666
Customize this theme in the Theme Editor:
https://xiaoli-test.myshopify.com/admin/themes/143516729666/editor
上傳完成后，打開開發(fā)商店后臺(tái)，點(diǎn)擊在線商店，我們可以看到剛上傳的xiaoli-theme主題。
6. 發(fā)布主題
若主題已開發(fā)完成，可在商店后臺(tái)模板庫(kù)區(qū)域點(diǎn)擊發(fā)布或運(yùn)行命令shopify theme publish
7. 使用vue開發(fā)主題
Vue+Tailwind Css 主題開發(fā)環(huán)境-github地址
文檔地址
定制商店
自定義店面是構(gòu)建無(wú)頭商務(wù)的模型，其中店面的前端和后端相互獨(dú)立。您構(gòu)建前端。商家在其定制店面體驗(yàn)背后使用 Shopify 的商務(wù)引擎。
優(yōu)點(diǎn)
- 靈活性：Storefront API 與設(shè)備和平臺(tái)無(wú)關(guān)。您可以使用任何編程語(yǔ)言構(gòu)建自定義店面，這使您的工作流程更加靈活。
- 定制：您可以構(gòu)建一個(gè)隨著商家業(yè)務(wù)的增長(zhǎng)和調(diào)整而變化的解決方案。隨著客戶趨勢(shì)和交互的變化，商務(wù)解決方案可以快速適應(yīng)客戶獲取方面的長(zhǎng)期市場(chǎng)變化。
- 集成：帶來(lái)您自己的工具、技術(shù)堆棧和經(jīng)驗(yàn)，并將您的自定義后端與 Shopify 商務(wù)數(shù)據(jù)集成。
Hydrogen
Hydrogen 是用于構(gòu)建Shopify 自定義店面的前端 Web 開發(fā)框架。它包括您入門所需的結(jié)構(gòu)、組件和工具，因此您可以花時(shí)間設(shè)計(jì)和設(shè)計(jì)功能，使您的品牌獨(dú)一無(wú)二。
在線預(yù)覽項(xiàng)目地址
1. 創(chuàng)建 Hydrogen 應(yīng)用
運(yùn)行命令npm init @shopify/hydrogen，選擇模板、語(yǔ)言，輸入名稱。
Windows PowerShell
版權(quán)所有 (C) Microsoft Corporation。保留所有權(quán)利。
PS D:\Demos\Shopify-test> npm init @shopify/hydrogen
? Choose a template :
> Demo Store
Hello World
? Demo Store
? Choose a language :
JavaScript
> TypeScript
? TypeScript
? Name your new Hydrogen storefront:
? xiaoli-custom
? xiaoli-hydrogen is ready to build!
?? Run npm run dev to start your local development server and start building.
?? Docs: Quick start guide ( https://shopify.dev/custom-storefronts/hydrogen )
?? Note: your project will display inventory from the Hydrogen Demo Store. To connect this project to your Shopify store’s inventory instead, update xiaoli-hydrogen/hydrogen.config.js with your store ID and Storefront API key.
PS D:\Demos\Shopify-test>
2. 運(yùn)行
更新hydrogen.config.js 文件內(nèi)的store ID 、Storefront API key（只預(yù)覽可忽略）。
運(yùn)行npm run dev，訪問(wèn) http://localhost:3000 查看商城。
若報(bào)錯(cuò)
SyntaxError: Unexpected token '??=
請(qǐng)檢查 Node.js版本16.14.0+
3. 目錄結(jié)構(gòu)
官方地址
└── src
├── assets
│ ├── favicon.svg // Hydrogen favicon
├── components // Objects that contain business logic for commerce concepts
│ └── account // Components that render account information
| │ └── AccountActivateForm.client.tsx
| │ └── AccountAddressBook.client.tsx
| │ └── AccountAddressEdit.client.tsx
| │ └── ...
│ └── cards // Components that render card elements
| │ └── ArticleCard.tsx
| │ └── CollectionCard.server.tsx
| │ └── OrderCard.client.tsx
| │ └── ...
│ └── cart // Components that render cart elements
| │ └── CartDetails.client.tsx
| │ └── CartEmpty.client.tsx
| │ └── CartLineItem.client.tsx
| │ └── ...
│ └── elements // Components that provide small chunks of reusable content
| │ └── Button.tsx
| │ └── Grid.tsx
| │ └── Heading.tsx
| │ └── ...
│ └── global // Components that render global elements on a page
| │ └── CartDrawer.client.tsx
| │ └── Drawer.client.tsx
| │ └── Footer.client.tsx
| │ └── ...
│ └── product // Components that render product information
| │ └── ProductDetail.client.tsx
| │ └── ProductForm.client.tsx
| │ └── ProductGallery.client.tsx
| │ └── ...
│ └── search // Components that provide search functionality
| │ └── NoResultRecommendations.server.tsx
| │ └── SearchPage.server.tsx
| │ └── ...
│ └── sections // Components that provide specific pieces of content on a page
| │ └── FeaturedCollections.tsx
| │ └── Hero.tsx
| │ └── ProductSwimlane.server.tsx
| │ └── ...
│ └── CountrySelector.client.tsx // A client component that selects the appropriate country to display for products on a website
│ └── CustomFont.client.tsx // Custom fonts for your Hydrogen storefront
│ └── HeaderFallback.tsx // A fallback for the Header component
│ └── index.server.ts
│ └── index.ts
├── lib // Libraries and utilities
| │ └── const.ts
| │ └── fragments.ts
| │ └── index.ts
| │ └── ...
├── routes // Navigational areas within the Demo Store
| │ └── account
| │ └── api
| │ └── collections
| │ └── ...
├── styles // Styling in the Demo Store
| │ └── index.css
| │ └── custom-font.css
├── App.server.tsx // Your app's top-level React component
市場(chǎng)
待定…文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-577527.html
余音
今年首篇文給了Shopify，本文篇幅較長(zhǎng)，難免會(huì)有疏漏、錯(cuò)誤的地方；發(fā)現(xiàn)有誤處，請(qǐng)及時(shí)指正，小黎會(huì)第一時(shí)間更正??。歡迎大家一鍵三連~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-577527.html
到了這里，關(guān)于Shopify開發(fā)入門-前端保姆級(jí)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
