每週二 YT 直播 Q&A（可 Discord Call-in）
YT：https://www.youtube.com/@codelove_tw
DC：https://discord.gg/fvCF2whZ9D

⭐️ Shopify 接案服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ Shopify 技術教練（給工程師）
https://job.turn.tw/developer-coaching

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA
登入次數：950 次
註冊於2022年11月28日
  發表了 516 篇貼文
  新增了 1,244 則留言
  貼文共 966,124 次瀏覽
近期系列文章
查看全部系列文章
近期留言
正在評估幫 shopify 客戶 客製化一個 theme

# Shopify Theme 命名簡短指引（mc- 使用版） ## 一句話結論 👉 檔名不用 mc- 👉 前端 namespace 才用 mc- --- ## 不用 mc- 的地方（保持語意清楚） ### 檔名 hero.liquid faq-list.liquid product-showcase.liquid ### snippet 名 button-primary.liquid product-card.liquid ### template 名 product.json page.about.json ### Liquid 變數 product_title faq_items --- ## 應該用 mc- 的地方（避免衝突） ### CSS class（最推薦） mc-hero mc-hero__title mc-faq mc-button ### JS 綁定用 selector / data data-mc-tab data-mc-modal data-mc-drawer ### JS namespace / event window.mcTheme mc:cart-open mc:variant-change ### CSS variables --mc-color-primary --mc-container-width ### id / utility class id="mc-modal" .mc-hidden --- ## 可用可不用 ### asset 檔名 theme-custom.css（建議） mc-theme.css（也可） ### body class mc-theme（推薦） --- ## 最短實務規則 檔名 → 不用 mc- DOM / CSS / JS → 用 mc- 👉 這樣最乾淨、最穩、最好維護

正在評估幫 shopify 客戶 客製化一個 theme

Shopify Dawn（Figma 高還原）開發流程 SOP 適用情境 * 工程師主導 * 單客戶客製 * Figma pixel-perfect 還原 * 約 1 個月交付 核心原則 把 Dawn 當 runtime，不當 UI 基底 Section 完全照 Figma 拆 CSS 主導，Liquid 配合 Theme editor 只開必要設定 一、專案初始化 1. clone + 重建 git git clone [https://github.com/Shopify/dawn.git](https://github.com/Shopify/dawn.git) my-theme cd my-theme rm -rf .git git init 2. 刪首頁 demo sections 可刪 announcement-bar.liquid collage.liquid collapsible-content.liquid collection-list.liquid custom-liquid.liquid email-signup-banner.liquid featured-blog.liquid featured-collection.liquid featured-product.liquid image-banner.liquid image-with-text.liquid multicolumn.liquid multirow.liquid newsletter.liquid rich-text.liquid slideshow.liquid video.liquid 不要刪 main-product.liquid main-cart-items.liquid main-cart-footer.liquid cart-drawer.liquid header.liquid footer.liquid apps.liquid predictive-search.liquid pickup-availability.liquid main-page.liquid main-search.liquid main-collection-product-grid.liquid main-collection-banner.liquid 3. 建立自己的 CSS / JS 入口 assets/ theme-custom.css theme-custom.js 在 layout/theme.liquid 引入 {{ 'theme-custom.css' | asset_url | stylesheet_tag }} {{ 'theme-custom.js' | asset_url | script_tag }} 二、Figma 拆解策略（最重要） 不照 Dawn 拆 完全照 Figma 區塊拆 範例 首頁 hero logo-cloud feature-grid product-showcase testimonial-list faq-list final-cta 建立 sections/ hero.liquid logo-cloud.liquid feature-grid.liquid product-showcase.liquid testimonial-list.liquid faq-list.liquid final-cta.liquid 三、首頁 index.json 結構建議 sections: hero feature-grid product-showcase faq-list final-cta order: hero feature-grid product-showcase faq-list final-cta 四、開發順序（強烈建議） Phase 1 全站骨架 header footer container system spacing system typography button style Phase 2 首頁 hero 主賣點區 商品亮點區 testimonial faq cta Phase 3 Product / Collection product page collection page cart drawer cart page Phase 4 RWD + polish desktop → tablet → mobile 五、CSS 策略 命名建議 .hero .hero__title .hero__image .faq .faq__item 不要 .section .block .module layout system（建議自己做） .container .section .grid .grid--2 .grid--3 六、Theme Editor 策略 只開 image text button label 避免 spacing 控制 layout switch 過多 toggle 七、圖片與效能 圖片 {{ image | image_url: width: 1200 }} lazy load loading="lazy" 八、JS策略 集中 assets/theme-custom.js 九、section 命名規則 不用前綴（不要 mc-） 用語意命名 hero.liquid logo-cloud.liquid feature-grid.liquid product-showcase.liquid faq-list.liquid final-cta.liquid 十、One-Month Sprint 節奏 Week 1 清 Dawn layout header/footer homepage skeleton Week 2 homepage完成 product page Week 3 collection cart search Week 4 RWD animation bugfix QA 最重要一句 不要過度整理 Dawn 直接開始刻 Figma

查看全部留言
語音版的 threads? learn language & social?

恩 典型的 乍聽之下很酷 其實應該是垃圾的點子 經過測試 直接開 chatgpt 語音模式 要求以 ai 發問的方式練習口說 效果已經相當好 並且可練習嘴巴肌肉記憶 技術面 音檔的硬碟成本、網路傳輸成本 高很多 並且100%會變成性騷擾平台 管理不易 --- - ...

0個讚   0留言 49瀏覽
分析 OpenClaw 寫得不錯喔

https://ai-coding.wiselychen.com/openclaw-architecture-deep-dive-context-memory-token-crusher/ 文章寫得不錯喔 很牛喔 --- 近期寫 llm 應用的小感想是 open cla...

1個讚   0留言 82瀏覽
喔幹串 llm 的 api 其實也是不少小地雷

串 open ai 的圖片編輯 > Client error: POST https://api.openai.com/v1/images/edits resulted in a 400 Bad Request response: { "error": { "message": "Invali...

1個讚   1留言 123瀏覽
開發客製化 shopify theme 或許可以用一段 base prompt

正在評估使用 或許會讓過程更符合我需求 `.github/copilot-instructions.md` ``` # Shopify Theme Custom Project Rules ## Project Context This is a custom Sho...

0個讚   0留言 143瀏覽
正在設計一種 shopify theme 主題開發報價範本

正在幫客戶評估 shopify theme 設計 我在設計一種通用範本 讓我未來可以直接用 希望對雙方都合理 好用 ``` # Shopify Theme 客製開發專案 專案總價：NT$xxxx ### yyyy-mm-dd **合約開始｜支付訂金 30%（NT$x...

0個讚   1留言 141瀏覽
我 macbook 用 chrome 打不開 shopify 也打不開 cloudflare WARP

研究了很久 最後發現 關掉 docker 就可以了 不太懂背後原理 不管了 反正 docker 跟 shopify/cloudflare 偶爾會衝突

0個讚   0留言 150瀏覽
正在評估幫 shopify 客戶 客製化一個 theme

客戶是一個成功的台灣品牌 外銷日本 北美 已找設計師做好 figma 現在找我評估 打造優質 theme 找付費主題來改？ 快速上線是可以 但畢竟設計師不是這樣去設計的 我懷疑這樣長期來講 划算？ 以下研究三個方向 ## 1. 用 Dawn 當基底去改 h...

0個讚   2留言 168瀏覽
AI 付費聊天機器人

我發現重點不是 llm 要多熟 是本來就有乙女遊戲、戀愛遊戲的專業 或者本來就有色情遊戲、色情小說的專業 完全低估了這需要的數值設計、節奏設計、文本能力、以及遊戲化的 fancy ui 回頭想想也是 在 llm 之前 遊戲開發團隊 光靠寫死的邏輯、選項 就能讓人玩到上頭 ...

0個讚   2留言 159瀏覽
小遊戲館

沒接觸過遊戲產業 稍微接觸之後 發現光是數值設計 就需要相當大投入 遊戲性也不是能輕易創新的 黏著性更是需要使用遊戲八角理論裡面所有黑暗面 我發現 我完全沒興趣做這種事情 曾經我以為我有 --- ``` https://daisyui.com/ https:/...

0個讚   1留言 171瀏覽
用 ai 做一份教材？

恩！真是餿主意！ 近期自己用 ai 自學、做 poc、展開討論 顯然整個學習方式已經改變 過去的那套 通通都要改變 不過 作為 `教導新時代的自學方式` 的教材 或許還是有點機會 --- ``` - no content - only goals + hom...

0個讚   0留言 157瀏覽
shopify 緊急 app 救火隊

起源是 2025 年底 發現 shopify 一個倉促的強勢政策 讓很多客製化 app 2026 將無法繼續使用 我設計了一個方案救火 在國內外也有多組客戶詢問 居然都沒有成交 2026 兩個月過去了 居然也沒有新客戶來詢問 真是無法理解 我估計大家都用 ai 緊急自己...

0個讚   0留言 153瀏覽
我對 ai 的看法每6個月就大改變一次

隨著 ai 模型的不斷變強 我的看法也一直在改變 最近在 claude opus 4.6 以及 gpt-5 之後 我對 ai 已經從佩服轉變成驚訝 並伴隨著恐懼 我以往的接案路線 我認為不可持續 與我相同資歷的軟體工程師 人人自危 並重新思考職涯規劃 所以我近期開...

0個讚   2留言 180瀏覽
Pattern Note #16：簡單示範 OpenAI 圖片生成 API

輸出內容 ``` 🎨 生成圖片中... Prompt: 一杯星巴克拿鐵咖啡放在木桌上，旁邊有一張台灣電子發票，極簡風格，自然光，俯拍 📝 實際使用的 Prompt（DALL-E 3 自動修訂）: An overhead view of a cup of Starbucks latt...

0個讚   0留言 175瀏覽
Pattern Note #15：簡單示範 OpenAI Vision API

輸出內容 ``` 🤖 LLM 回應: { "store_name": "STARBUCKS", "invoice_period": "115年01-02月", "invoice_number": "WH-83513141", "date": "2026-02-26"...

0個讚   2留言 177瀏覽
Case Study #04：RAG Chatbot Development for Website（Upwork 發包需求）

![](https://i.imgur.com/rzIregb.png) 幫某個網站加上一個「能回答該網站內容問題的 AI 聊天機器人」 不是一般 ChatGPT，而是 RAG chatbot（Retrieval-Augmented Generation） 做成 js plugin...

0個讚   0留言 182瀏覽
Pattern Note #14：帶有門檻設定的 RAG 示範

關鍵機制 1. 相似度門檻（預設 0.5） - 超過門檻 ✅ → 提供給 LLM - 低於門檻 ❌ → 過濾掉 2. 空結果處理 - 沒找到相關文檔 → 明確告知 LLM - LLM 禮貌拒絕 → 建議聯絡客服 3. 嚴格 System Prompt - 禁...

0個讚   0留言 205瀏覽
Pattern Note #13：簡易的 RAG (Retrieval-augmented generation) 對話示範

輸出內容 ``` ======================================== Pattern 13: RAG 檢索增強生成 ======================================== ⚠️ 尚未建立索引，開始建立... 🔨 開...

0個讚   0留言 221瀏覽
Pattern Note #12：人工介入審核、rule-based 獨立自主 seo ai 代理

承上篇 我覺得用 llm 自動決策有點沒必要 用 rule based 決策 稍微改寫 輸出內容 ``` ╔════════════════════════════════════════════════╗ ║ Pattern 12: Rule-Based Agent - D...

0個讚   0留言 215瀏覽
Pattern Note #11：人工介入審核、此外完全獨立自主的 seo ai 代理

輸出內容 ``` ╔════════════════════════════════════════════╗ ║ Pattern 11: Autonomous Agent Demo ║ ╚══════════════════════════════════════════...

0個讚   0留言 222瀏覽
Pattern Note #10：以 cron 排程為基礎的自動化 seo ai 代理

輸出內容 ``` ╔════════════════════════════════════════╗ ║ Pattern 10: Scheduled Workflow Demo ║ ╚════════════════════════════════════════╝ ━━━━...

0個讚   0留言 145瀏覽
Pattern Note #09：把 graph engine 加上 actions 支援外部動作

上個 demo 簡單示範了流程在 data 裡面會長怎樣 這個 demo 進行擴充 示範整合 tool functions 之後的樣子 原始碼 https://github.com/howtomakeaturn/ai-agent-pattern-notes/blob/main/pa...

0個讚   0留言 136瀏覽
Pattern Note #08：基於 graph engine 驅動的 AI Agent

前面都是 `流程寫在 CODE 裡 ` vs 這個把 `流程寫在 DATA 裡（graph 定義節點和邊），引擎是通用的` 原始碼 https://github.com/howtomakeaturn/ai-agent-pattern-notes/blob/main/patt...

0個讚   0留言 162瀏覽
Case Study #03：AI SEO Automation Agent（Upwork 發包需求）

![](https://i.imgur.com/IsKRSpt.png) 客戶在北美 要做 ai 自動化 seo 助理 我有點沒方向 也不知道該怎麼做 舉例了兩個平台 `Sintara` `Marblism` 分別看了一下介紹 ## Sintara ![](htt...

0個讚   0留言 192瀏覽
Case Study #02：Voice Agent Platform Orchestration（Upwork 發包需求）

![](https://i.imgur.com/b7f8dXk.png) ![](https://i.imgur.com/WjbTB2O.png) 客戶在南美 智利 這專案看起來還真有挑戰性！ 我連需求都看不太懂 我先跟 ai 討論案主需求 ``` 這個職缺本質上是在做一個...

0個讚   0留言 184瀏覽
Pattern Note #07：使用狀態機套件重構 AI Agent

我嘗試用四款 php 開源狀態機套件重構 demo 06 demo-winzou.php — 使用 winzou/state-machine demo-neuronai.php — 使用 NeuronAI 框架 demo-finite.php — 使用 yohang/finite（PHP ...

0個讚   0留言 184瀏覽
Pattern Note #06：AI Agent 的 dynamic routing 與 dynamic tools

複雜的情境 會需要動態使用不同的 prompt、不同的 tool functions 大概長怎樣呢 我想看個感覺 輸出內容 ``` === Dynamic Routing - 動態路由 ===特點：根據當前狀態動態提供可用工具，AI 只看得到當前可用的功能 【場景 1：...

0個讚   0留言 184瀏覽
Pattern Note #05：AI Agent 的會話續用與訂單重置

大多數 chatbot UI 可以開新對話 但如果是 LINE 或者 SMS 的話 就不能 多提供一個 tool function 應該就可解決吧 輸出內容 ``` === LINE 訂餐 AI Agent - Session Renewal Pattern === 這個...

0個讚   0留言 187瀏覽
Pattern Note #04：AI Agent 呼叫 tool function 之後的狀態持久化

我現在想看看 tool function + 狀態持久化 輸出內容 ``` === 台灣餐廳點餐系統 (Tool Functions + Persistence) === 輸入 'new' 開始新對話 輸入 'load <session_id>' 載入舊對話 輸入 'list' ...

0個讚   0留言 189瀏覽
Pattern Note #03：AI Agent 的狀態持久化（存進資料庫）

我現在有狀態機的觀念了 想試試存進資料庫的樣子 輸出內容 ``` === 台灣餐廳點餐系統 (State Persistence) === 輸入 'new' 開始新對話 輸入 'load <session_id>' 載入舊對話 輸入 'list' 查看所有對話 輸入 'stat...

0個讚   0留言 187瀏覽
Pattern Note #02：AI Agent 的狀態預覽與確認模式

我正在研究 送出訂單前 要跟用戶確認一下吧 輸出內容 ``` === 餐廳訂餐 AI Agent - State Preview & Confirmation Pattern === 這個範例展示如何在關鍵操作前強制要求預覽確認 【場景 1：客戶正常訂餐，先預覽再確認】 ...

0個讚   0留言 214瀏覽
Pattern Note #01：AI Agent 與控制流程管理

我正在研究控制流程管理 輸出內容 ``` === 餐廳訂餐 AI Agent - Control Flow Pattern === 這個範例展示如何處理有順序要求的必須步驟 【場景 1：客戶按照正常流程訂餐】 客戶：你好，我想訂餐 助手：您好！為了幫助您完成訂餐流程...

0個讚   0留言 251瀏覽
Case Study #01：Stateful SMS Ordering AI Agent（Upwork 發包需求）

![](https://i.imgur.com/fxadLLV.png) 客戶在北美 想開發能讓顧客用手機簡訊 訂餐的系統 可能是給自家多間餐廳使用 也可能是要做 SaaS 自家用的話資料庫設計單純一些 SaaS 的話 看是做成 `multiple tenant` vs `R...

0個讚   0留言 1,714瀏覽
系列簡介：在接案平台拆解 AI 專案、POC 驗證筆記

最近比較閒 想研究 AI 應用 但又不想研究空虛的 想研究客戶真正買單的 打開國內外接案平台 發現非常多專案都跟 AI 相關 身為 full stack developer 有很多專案需求 我居然也沒做過 只能說時代進步太快 決定開個系列 慢慢研究 每個專案的需求...

0個讚   1留言 291瀏覽
兼職 CTO

朋友在幫朋友問一個類似 ERP 又想做 SaaS 的案子 找人幫忙 我想了一下 嘗試設計報價 --- - 10 hrs/week - 開發階段 -> 月收12萬 - 上線持續調整功能階段 -> 月收12萬 - 功能穩定 基礎維護階段 -> plan a 月收5萬 vs pla...

0個讚   1留言 227瀏覽
設計實戰 laravel 教材

教材類型 基本已被 AI 消滅？ 現在多以實戰營、培訓班為主？ ### Notes - this is product - so that i can write more free articles - but i want to put them all in free a...

0個讚   2留言 293瀏覽
ai 自動翻譯部落格

結論如下：不可行 https://codelove.tw/@howtomakeaturn/post/qBgbZx --- ### Notes also medium? also reddit? but i guess it will be no click, useles...

0個讚   0留言 244瀏覽
成語群英傳

![](https://i.imgur.com/zaeCQf3.jpeg) ![](https://i.imgur.com/aLxzgig.jpeg) ![](https://i.imgur.com/6gSHJup.jpeg)

0個讚   1留言 245瀏覽
成語猜猜

![](https://i.imgur.com/KkyfXB4.jpeg) ![](https://i.imgur.com/SvugdvU.jpeg) ![](https://i.imgur.com/hqFbuvR.jpeg) ![](https://i.imgur.com/hnSfIAt.j...

0個讚   1留言 242瀏覽
AI 時代寫程式，重點應該就是這句話了：

AI 時代寫程式，重點應該就是這句話了： 當 AI 產出越來越像真的，驗證它的正確性，才是真正稀缺的能力。 --- 有人沒興趣再用任何 css js 套件 反正要做功能 修 bug 都叫 ai 繼續改就好 👉 之後你依然有把握驗證正確性 你對ai很樂觀 有人堅持要 ai 使用...

1個讚   0留言 355瀏覽
成語填填看 - 單字測驗、單字和文字遊戲、大腦訓練和現實遊戲

![](https://i.imgur.com/TE2xqK3.jpeg) ![](https://i.imgur.com/nFCJNzH.jpeg) ![](https://i.imgur.com/MEMQDyO.jpeg) ![](https://i.imgur.com/Hvu4UqH.j...

0個讚   3留言 345瀏覽
成語接龍-填填看

![](https://i.imgur.com/2g1H2OK.jpeg) ![](https://i.imgur.com/7Q9e9Kq.jpeg) ![](https://i.imgur.com/Nz36anz.jpeg) ![](https://i.imgur.com/ZUpQrEv.j...

0個讚   0留言 292瀏覽
成語填填字：成語接龍文字遊戲，學成語好幫手

![](https://i.imgur.com/OqpiSDw.jpeg) ![](https://i.imgur.com/zOpSz88.jpeg) ![](https://i.imgur.com/ad5k7Fh.jpeg) ![](https://i.imgur.com/CvaHW87.j...

0個讚   1留言 395瀏覽
想做個成語小遊戲

想練習做遊戲 反正都是用 ai 來寫 開一串整理資料 要做成語接龍 --- # 網頁版成語接龍遊戲市場潛力分析報告 **作者：** Manus AI **日期：** 2025年12月31日 ## 摘要 本報告旨在深入分析網頁版成語接龍遊戲的市場潛力，...

0個讚   1留言 357瀏覽
用 ai 翻譯部落格，嘗試接國外的案子

我正在進行一個嘗試 同時開發一個服務 簡單講 背景是這樣 上次把一篇文章 chatgpt 翻譯 -> 貼到 medium -> 收到兩間歐美廠商來信 ![](https://i.imgur.com/byKy9jg.png) ![](https://i.imgur.com/i...

1個讚   3留言 374瀏覽
居然有美國廠商 CTO 詢問我 shopify 任務

![](https://i.imgur.com/byKy9jg.png) 一樣的方式 找我討論 實際開會之後 我大吃一驚 對方非常優秀 並且 app 幾乎已經製作好了 https://airgoods.com/ 上架的時候遇到困難 因為被歸類為 sales cha...

0個讚   1留言 345瀏覽
實驗一下非嵌入式 shopify app 的串接流程

說真的 實在有點複雜 我都眼花撩亂了 我完全不覺得 junior developer 有辦法搞清楚 實驗串接一下看看 --- ## 1) 建立 custom app 這次嘗試非 embed app app url: https://demo-connect.tur...

1個讚   1留言 427瀏覽
所謂的 3PL 第三方物流 真酷呀

某 3PL 廠商跟我討論 在我研究的時候 看到對方官網呈現 ![](https://i.imgur.com/CLxv6kg.png) 居然整合所有電商平台嗎？也太先進 不過又想了一下 應該理解為 電商平台 讓人做生意 就算沒有訂單、物流ＡＰＩ 一定也會有訂單 ex...

0個讚   1留言 363瀏覽
居然有羅馬尼亞廠商詢問我 shopify 技術問題

因緣際會 接觸 shopify 一年 上週發現一個生態系問題 寫了篇文章 https://codelove.tw/@howtomakeaturn/post/3j2p53 我相信不只台灣會遇到 所以用 chatgpt 翻譯 針對 seo 目的寫作 發佈到 medium http...

1個讚   1留言 375瀏覽
shopify 新版 customer account 與舊版 legacy customer account 是差在哪裡啊？

真的是一直改版耶 好啦 確實也是越改越好 不過 也是有人提出 新版 會有 顧客不小心 創立多個帳號的問題 https://www.reddit.com/r/shopify/comments/1hnv0sf/customer_accounts_vs_legacy_accounts/ ...

1個讚   0留言 472瀏覽
嘗試呼叫 shopify rest admin api 看看結果

雖然 shopify rest admin api 官方說 deprecated 但畢竟比較簡單 我還是呼叫看看 目前也沒問題 創建 legacy customer app 然後打開 products 與 orders 相關權限 用 shop 測試連線 最簡單 https:/...

0個讚   0留言 344瀏覽
熱門搜尋： ar 服器 程式 前端 ts code ＳＳ Ai JS 使用 html javascript GitHub js __ 伺服器 設計 v_ react api Java jav web 技術 ｃｓｓ 測試 專案 JavaScript 工作 結構 開發 語言 github git Re AI post 基礎 作為 Javascript 公司 am 嗎？ la Javas 系列 cli 套件 json id 網頁 網站 效率 研究 開源 Line 資料庫 第一 圖片 app 分析 LLM 搜尋 編輯 java Html vs ui REACT for gpt JavaSCript rag 分享 ci ai typescript local RAG PYTHON go the https COM AR Node AM javasc AWS ul CD Ml re HTML 平台 npm import Js bi GIT
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。