🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付
🔍 搜尋結果：2
🔍 搜尋結果：2
熱門文章
近期留言
-
站長阿川：# 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 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
-
站長阿川：sample 1
```
# Shopify Theme 客製開發專案
專案總價：NT$150,000
### 2026-03-xx
**合約開始｜支付訂金 3 萬**
> 訂金支付後即開始排程與製作
---
### 2026-04-30
**交付可正式上線版｜支付中期款 6 萬**
- 達到可正式上線之品質與使用標準
- 與 Figma 主要版型與結構一致
- RWD 正常（桌機／平板／手機）
- 無阻礙使用之重大錯誤
> 達上述標準即視為本階段完成
---
### 2026-05-31
**優化與保固階段｜支付尾款 6 萬**
- 複雜動畫補強
- 進階互動優化
- 上線後發現的 bug 修正
> 優化範圍以本案既定設計為限
```
-
站長阿川：https://zhuanlan.zhihu.com/p/1931348396406452703
-
站長阿川：https://letschuhai.com/dc53f0e3