每週二 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
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