Shopify Sidekick 的推出，徹底改變了獨立站店主在主題編輯器（Theme Editor）中微調商店視覺與版面結構的方式。店主只需輸入自然語言指令，便可省去在繁雜側邊欄選單中翻找設定、手動拖曳排列區塊或逐一微調品牌配色的時間。然而，不少店主在接觸時產生了認知模糊：Sidekick 到底能在多大程度上替代前端工程師？它能否直接修改底層的 Liquid 程式碼？
清晰掌握 Sidekick 的實用能力與底層 Liquid 程式碼的技術邊界，是兼顧商店維護效率與主題架構穩定性的核心關鍵。
店主如何在主題編輯器中使用 Sidekick
在主題編輯器中，Sidekick 扮演了店主與主題配置層之間的智慧助手。店主不必逐項點選展開側邊欄選項，而是透過對話指令快速執行視覺微調與版面編排。
1. 啟用與上下文感知
- 呼叫方式：店主可點擊主題編輯器頂部工具列的 Sidekick 圖示，或直接按下快捷鍵
Ctrl + .（macOS 系統為Cmd + .）開啟對話面板。 - 內容感知能力：Sidekick 能即時偵測店主目前正在編輯的頁面範本（例如首頁、商品頁或商品系列頁），以及當前選取的分區（Section）或區塊（Block）。除非明確要求修改全站設定，否則自然語言指令將直接作用於選取的當前元件。
2. 視覺樣式微調
Sidekick 能精確解析日常語言，並將其對應至主題架構（Schema）所支援的原生設定項目：
- 色彩配置調整：輸入如「將此分區的背景色彩配置改為深色」或「將主要按鈕更換為高對比重點色」，Sidekick 會自動更新對應的顏色設定值。
- 字體排版與間距：指令如「將分區標題改為襯線字體並增加上下間距」，即可聯動調整主題內建的排版樣式與邊距滑桿。
- 對齊方式與展示佈局：輸入「將主要橫幅中的標題與副標題置中對齊」或「在電腦版將商品卡片改為 4 欄網格展示」，即可快速切換既有的佈局模式。
3. 頁面結構與分區管理
除了樣式微調，Sidekick 亦可對基於 JSON 範本的頁面架構進行動態調整：
- 分區重排：輸入指令如「將顧客評價分區移動到精選商品分區上方」，即可直接重組垂直頁面結構。
- 元件顯隱控制：輸入「在商品頁範本中隱藏公告列」或「移除次要宣傳按鈕」，即可在不手動尋找開關的情況下隱藏或移除指定項目。
- 應用程式嵌入管理：Sidekick 可依指令開啟、關閉已安裝插件的應用程式嵌入（App Embeds），或調整其基本設定。
4. 內容生成與主題區塊建立
在編輯器內部，Sidekick 還提供兩項強大的生成功能：
- 欄位文案生成：在帶有生成圖示（Magic 圖示）的文字欄位中，店主可描述期望的文案風格，Sidekick 會直接生成切合品牌語氣的標題或內文。
- 主題區塊自動生成：在相容分區內點選「新增區塊（Add block）> 生成（Generate）」，輸入詳細描述（例如「建立一個包含顧客頭像、評價引言、姓名與 5 星評分的評價區塊」），Sidekick 會在主題原始碼的
blocks/資料夾中直接生成獨立的 Liquid 程式碼區塊，並於編輯器中提供可視化的設定選項。
安全工作流程：預覽、審查與復原機制
Sidekick 所執行的任何視覺更動都不會直接套用到正式上線的商店，整個流程具備完整的防護機制：
- 編輯器即時預覽：所有樣式變更與生成的區塊都會先呈現在主題編輯器的預覽視窗中。
- 多裝置檢視與微調：店主可在電腦版與手機版檢視之間切換，檢查響應式設計效果；若細節不符合預期，可給予後續指令要求 Sidekick 持續修改。
- 撤銷歷史注意事項：使用 Sidekick 自動套用變更會清空編輯器原有的標準「復原（Undo）」操作記錄。若要回復變更前的狀態，店主可以直接要求 Sidekick「復原剛才的更動」，或使用頂部的「主題歷程記錄（Theme history）」版本選取器回復至先前版本。
- 手動儲存生效：所有改動必須由店主點擊「儲存（Save）」按鈕後才會正式生效。進行重大版面調整前，強烈建議先建立主題備份複本進行測試。
Sidekick 與自訂 Liquid 程式碼的技術邊界
Sidekick 的本質是主題配置項目與區塊生成的高階操作工具，而非能夠隨意重構整套網站程式碼的工程編譯器。
Sidekick 能夠處理的範圍
- 主題配置參數：讀寫
settings_schema.json以及各分區內{% schema %}宣告的設定變數。 - 範本編排結構：調整頁面 JSON 範本中所儲存的分區清單與區塊排列順序。
- 模組化區塊檔案：僅能在主題的
blocks/目錄中生成獨立、單一的 Liquid 區塊檔案。
Sidekick 無法跨越的技術邊界（必須依賴自訂 Liquid 開發）
| 能力維度 | 主題編輯器中的 Sidekick | 自訂 Liquid 與前端工程開發 |
|---|---|---|
| 既有分區的底層 HTML 結構 | 僅能切換現有 Schema 開關；無法修改既有 Section 檔案中的 DOM 結構或包裝容器 | 擁有修改 HTML 骨架、重構 DOM 結構、增添自訂容器與動畫外層的完全自由 |
| 既有核心主題檔案改寫 | 無法直接編輯或重構 sections/、snippets/ 或 layout/ 中的既有 .liquid 檔案 | 具備對全站主題檔案的讀寫權限，可直接修改 theme.liquid 與全域共用元件 |
| 商業邏輯與條件判斷 | 無法撰寫底層 Liquid 標籤（如 {% if %}、{% case %}、複雜迴圈或自訂篩選器） | 可實作精密的商業邏輯（如動態批發階梯定價、多倉庫存門檻判斷、依顧客標籤顯示差異化內容） |
| 中繼欄位與中繼物件深度整合 | 僅能將動態來源連接至主題原生已有預留該型別的欄位 | 可自由撰寫 Liquid 遍歷 Metafields 與 Metaobjects，打造客製化動態表格與聯動面板 |
| 全域腳本與客戶端狀態管理 | 無法撰寫互動式前端 JavaScript（如無刷新購物車抽屜、即時多規格篩選器） | 可獨立撰寫高效能 JavaScript、對接 Shopify Cart Ajax API、建立前端狀態機 |
| 第三方 API 與客製 Webhook | 僅限於切換已安裝的標準 App Embeds 插件 | 可串接外部數據 API、自訂追蹤程式碼、整合 Headless 混合架構 |
| 官方售後與維護責任 | Shopify 官方與第三方主題開發商不提供 AI 生成區塊程式碼的除錯或相容性支援 | 由專業開發者進行程式碼品質控管、效能調校、跨瀏覽器測試並提供維護保證 |
核心架構差異：配置導向 vs 底層開發
店主必須清楚區分**「配置導向（Configuration）」與「底層開發（Implementation）」**：
- Sidekick 屬於配置導向：若主題開發者已在程式碼中預先設計了該項設定（例如背景顏色選擇器、商品欄數切換、文字對齊方式），Sidekick 能藉由自然語言非常敏捷地完成設定。
- 自訂 Liquid 屬於底層開發：若主題本身欠缺特定的呈現邏輯或資料流架構（例如依據 B2B 會員登入身分動態計算客製化交期與組合搭售加購），Sidekick 絕不可能憑空修改既有分區檔案來實現這套功能。此時必須由具備 Liquid 開發經驗的工程師手動撰寫程式碼。
決策指南：何時使用 Sidekick，何時委聘 Liquid 開發者
建議使用 Sidekick 的情境：
- 在現有主題架構下快速更換配色方案、字體組合或調整分區上下間距。
- 因應節慶促銷或限時活動，快速調整首頁與活動頁的分區排列順序。
- 為主要橫幅、促銷公告列或商品特色說明快速生成符合品牌語氣的行銷文案。
- 建立標準且單純的自包含功能區塊（例如信任徽章、基本買家評分卡、特色保證欄）。
- 在不承擔程式碼錯誤風險的前提下，自由嘗試多種視覺排列組合。
必須委聘 Liquid 開發者或手動撰寫程式碼的情境：
- 打造高度客製化的商品頁互動體驗（如複雜的客製刻字即時預覽、多屬性連動選單、動態組件搭售系統）。
- 修改全站核心底層結構（如全站佈局範本
theme.liquid、AJAX 抽屜購物車、結帳擴充架構）。 - 針對 Google 網站核心體驗指標（Core Web Vitals）進行深度的 DOM 簡化、關鍵 CSS 提取與腳本非同步最佳化。
- 深度整合複雜的中繼物件（Metaobjects）與外部 ERP/CRM 資料傳輸。
- 排查並修復過往插件殘留導致的 Liquid 語法衝突或主題載入錯誤。
善用 Sidekick 提升日常視覺微調的敏捷度，並在涉及核心互動與業務邏輯時交由專業 Liquid 開發，是獨立站店主兼顧營運效率與技術穩固性的最佳策略。