- 分享 Shopify 接案經驗筆記（共 17 篇文章）
- #1 開始接一個 shopify 國際專案
- #2 台灣很少公司在用 shopify 的原因
- #3 利用 shopify 內建 tags 功能做到 coming soon 產品效果
- #4 非工程師，也能對 shopify 的頁面簡單修改圖片、文字嗎？
- #5 嘗試在本機開發客戶的 shopify theme
- #6 來自紐約的客戶詢問 shopify 客製化問題
- #7 shopify 無法編輯庫存數量
- #8 shopify 商品圖片、變體圖片的設定方法
- #9 shopify 不能先設定變體，再開啟庫存設定喔？
- #10 我發現山本耀司的購物官網 是用 shopify 架設的
- #11 嘗試在 shopify 產品頁增加 目前缺貨 填寫 email 的表單
- #12 我發現 SoundCore 官網 是用 shopify 架設的
- #13 居然有羅馬尼亞廠商詢問我 shopify 技術問題
- #14 居然有美國廠商 CTO 詢問我 shopify 任務
- #15 正在評估幫 shopify 客戶 客製化一個 theme
- #16 正在設計一種 shopify theme 主題開發報價範本
- #17 開發客製化 shopify theme 或許可以用一段 base prompt
客戶是一個成功的台灣品牌 外銷日本 北美
已找設計師做好 figma 現在找我評估 打造優質 theme
找付費主題來改？
快速上線是可以 但畢竟設計師不是這樣去設計的
我懷疑這樣長期來講 划算？
以下研究三個方向
1. 用 Dawn 當基底去改
https://www.reddit.com/r/shopify/comments/1inp64p/just_how_customisable_is_the_dawn_theme_really/
I have built 20+ production sites based on Dawn
Dawn is an excellent base theme from which you can do whatever you'd like.
I've built out some major brands designs on DawnThe dawn theme codebase is the established starting point for Shopify theme development.
There is a good chance that any modern custom theme you've looked at started as Dawn.The Dawn Shopify theme is the best. If someone asks me to design a store, I will start from scratch using the Dawn theme.
If you want a custom theme, you can start with Shopify's Dawn theme. Dawn is flexible and lets you build your own look by customizing sections. It’s a great way to create a unique theme without starting from scratch.
https://www.reddit.com/r/shopify/comments/wz0w03/custom_development_vs_paid_theme/
Explain to them that a custom build gives them tighter control. Also, if you do full stack development, make sure to highlight this as your main selling point. People who want full control will value this more than anything.
👉 看起來 是滿穩的呀 這些留言 給了我相當信心
2. 用 Horizon 當基底去改
https://neat.digital/blogs/blogs/shopify-horizon-theme-customisation-guide-2026
好像還行 但 又或許 還是有點太新嗎
❌ Horizon 不適合你這案子的原因
Horizon 本質更偏：
👉 merchant-friendly
👉 editor-first
👉 block-driven
👉 layout-driven
所以它：
❌ 抽象更多
❌ schema更重
❌ block更複雜
❌ 很多你會刪
👉 對你是「阻力」✅ 最符合你現在的策略
👉 用 Dawn
👉 大膽砍
👉 不用尊重它設計哲學
你可以這樣想：
👉 Dawn = runtime + snippets庫
不是：
👉 設計系統3. 用 Shopify Skeleton Theme 當基底去改
https://github.com/Shopify/skeleton-theme
home page
cart page
這個不行 太哈扣了 什麼都沒有 開發速度會很慢
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
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-
👉 這樣最乾淨、最穩、最好維護
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
Shopify Dawn（Figma 高還原）開發流程 SOP
適用情境
核心原則
把 Dawn 當 runtime，不當 UI 基底
Section 完全照 Figma 拆
CSS 主導，Liquid 配合
Theme editor 只開必要設定
一、專案初始化
git clone https://github.com/Shopify/dawn.git my-theme
cd my-theme
rm -rf .git
git init
可刪
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
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
.herotitle
.heroimage
.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