在 Shopify 網站客製化設計中，如何在 設計彈性、網站效能與維護性之間取得平衡，一直是許多開發者與品牌經營者關心的課題。PageFly 作為 Shopify 常見的頁面編輯工具，提供了高度自由的視覺排版能力，但如果沒有良好的架構規劃，反而可能讓網站變得複雜且難以管理。
實務上，我會採取一種結合 Theme（佈景主題）結構與 PageFly 客製化內容的設計策略，透過 PageFly Section 與 PageFly Page 兩種方式，分別處理局部區塊與整頁內容的設計需求。這樣的架構不僅能保留佈景主題的穩定性，也能讓網站在行銷頁面與視覺呈現上保持高度彈性。
以下分享的是通常使用的方式，實際依據需求彈性調整：
一、整體架構概念
在進行 Shopify 網站客製化設計時，若搭配 PageFly 這類頁面編輯工具，通常會有兩種主要的使用方式：PageFly Section 與 PageFly Page。這兩種方式會與 Shopify Theme（佈景主題） 一起搭配使用，形成完整的網站架構。
其中，Shopify Theme 通常負責網站的整體結構與基礎版型，例如頁首（Header）、頁尾（Footer）、基本版面配置等；而 PageFly 則提供更彈性的視覺排版能力，用於特定區塊或整頁內容的客製化設計。
二、PageFly Section（嵌入式區塊）
PageFly Section 指的是將 PageFly 所設計的區塊嵌入到 Shopify Theme 的頁面結構中，只負責某一段內容的客製化。
這種方式常見於需要特別設計的局部區塊，例如首頁中的某些重點區域。常見用途包括：
- 首頁的客製化區塊
- Banner 視覺區
- 活動介紹區
- 商品推薦區
- CTA（Call To Action）行動呼籲區塊
在實際使用時，Shopify Theme 仍然控制整體頁面的架構，而 PageFly Section 則只負責其中的一小段內容。例如在首頁中，整體架構可能如下：
- Header（由 Theme 控制）
- Hero Banner（PageFly Section）
- 品牌介紹（Theme 區塊）
- 活動區（PageFly Section）
- Footer（由 Theme 控制）
透過這種方式，可以在不破壞原有佈景主題結構的情況下，針對特定區域進行更彈性的設計與調整。
PageFly Section 的優點在於：
- 不會影響整體佈景主題的架構
- 可以針對局部區塊進行客製化設計
- 維持網站結構穩定且容易維護
三、PageFly Page（整頁設計）
另一種方式是 PageFly Page，也就是使用 PageFly 直接設計整個頁面的內容。這種方式通常用於需要高度客製化的頁面，例如行銷活動或特別的內容頁。
適合使用 PageFly Page 的頁面類型包括：
- Landing Page（行銷導流頁）
- 活動頁
- 商品頁改版
- 特殊內容頁或品牌故事頁
在這種情況下，Shopify Theme 仍然負責頁首與頁尾，而頁面主要內容則由 PageFly 完整控制。例如一個 Landing Page 的結構可能如下：
- Header（Theme）
- PageFly Page（整頁內容）
- Footer（Theme）
PageFly Page 的優點包括：
- 版面設計自由度高
- 可以快速建立行銷導向的頁面
- 適合廣告導流或活動專頁
四、不同頁面類型的常見使用方式
在實際的 Shopify 網站架構中，不同類型的頁面通常會採用不同的設計方式。以下分享我一般常使用的方式如下：
- Home Page（首頁）：Theme 搭配 PageFly Section
- Regular Page（一般內容頁）：通常使用 Theme
- Product Page（商品頁）：PageFly Page 或 PageFly Section
- Collection Page（商品分類頁）：通常使用 Theme
- Landing Page（行銷頁）：PageFly Page
- Blog Page（部落格頁）：通常使用 Theme
很多人不知道的是：PageFly 在多網站（Multi-store）需求下其實非常好用。當需要把同一套版型複製到第二個 Shopify 商店時，可以大幅提升執行效率，也能降低未來更新版型時可能帶來的維護問題。
📖 延伸閱讀：PageFly 初入門：快速建立 Shopify 網頁
