目前認為客製化 Shopify 電商網頁視覺設計與排版的最佳解決方案，讓人人都可以上手的方式就是使用 Shopify App: PageFly 網頁編輯器，此篇文章內容包含 PageFly 教學文章與影片，未來會持續更新，可以蒐藏當作筆記翻閱，隨時回來看看，有任何相關問題可以聯繫我（更新時間：2024/03/07）
PageFly 是什麼？
PageFly 是一款 Shopify App，專門為 Shopify 電商網站建立高度客製化網頁視覺設計與排版的網頁編輯器。全名是 PageFly Landing Page Builder，中文翻譯為「PageFly 網頁生成器提供者」，其官方網站首頁開頭便直接說明：Make your Shopify website work and look just like your idea without coding（建立一個屬於你心目中的 Shopify 網站，不用寫程式也做得到），這段我翻譯的應該還算貼切吧 ^^
Shopify 之於 Shopify App 就像是 WordPress 之於 WordPress Plugin，而 Shopify App 的 PageFly 就像是 WordPress Plugin 的 Elementor 或 WPBakery Page Builder 之類的網頁編輯器。
為何選擇 PageFly 網頁編輯器？
有使用過 Shopify 架過電商網站的人應該都知道 Shopify 本身的頁面和文章編輯器功能都相當「陽春」，僅提供那種相當陽春的小小編輯視窗，完全不能任意去排版，若要，則需要寫很多 html/css 程式碼在其中才行，但不是每個人都學過網頁程式，而且還需要考慮交接的團隊本身沒有工程師，如何在降低程式碼編輯的比例下能順利交接給成員們，善用網頁編輯器相關的 Shopify App 並以此為基礎去打造網頁是最佳的解決方案。長年使用過 WordPress 架過高度客製化的網站，就會發現 Shopify 頁面編輯能力相對弱很多，雖然 Shopify 在自訂佈景主題那邊有很多範本可以建立一定程度的排版，但依然受限於該版型能使用的功能，相關內容可參閱此篇文章如何客製化 Shopify 網頁設計排版的五種方式。
因此若要突破這個限制，就得靠另外安裝強大的、開放式生態系的 Shopify App Store，搜尋「page builder」就可以找到相當多款的網頁編輯器，其中這款是我個人目前偏愛使用、且應該是全球目前使用人數最多、將近五星評價的：PageFly Landing Page Builder，原因是：
- 24小時線上客服、回覆速度算快，必要時對方還會提供技術支援
- 直覺的視覺化編輯界面，對一般使用者相當容易上手
- 進階的可以撰寫網頁程式碼如 HTML/CSS/JavaScript，對網站工程師都適用
- 整合其他 App 相當廣泛且多，甚至可以跟他們許願 ^^ 可以去 PageFly 的許願表單填寫資料，前往許願！
- 線上學習資源完整，有影片教學頻道 PageFly Video Tutorials，也有幫助中心 PageFly Help Center
- 社群交流活躍互助，有官方的 Meta 臉書社群 PageFly Community，或是加入目前還滿活躍的台灣 Shopify Line 社群
- 新增功能與問題修正頻繁且公開資訊，可以隨時查看每次更新了什麼，確保有持續維護與優化
- 若真的很緊急，需要快速打造一個登陸頁 (Landing page)、銷售頁 (Sales page)，那可以直接套用頁面版型 (Page Template)，前往瀏覽 PageFly 建立的頁面範本
需要協助使用 PageFly 建立網頁嗎？或尋求 Shopify 頁面排版的客製化與優化需求？若貴站有使用 PageFly，或需要有人幫忙用其打造各種網頁排版、建立網頁頁面、登陸頁（Landing page）等，可以聯繫爾文，前往填寫諮詢表單。
這邊回覆在社群中最常被問的問題（但由於規則可能會不定時更新，所以通常我都會在 PageFly App 後台直接使用線上交談工具再去問 PageFly 客服一遍以確認無誤）
- PageFly 可否和選用的 Shopify 版型一起使用？答：可以合併使用，也可以分開使用，彼此並不影響。
- PageFly 若停用了，網頁會不會消失？答：原先已用 PageFly 建立的頁面不會消失，只是無法編輯。
想要開一個 Shopify 網路商店？在開始之前，可以先註冊目前搭配優惠方案：前三個月每月只要 $1 塊美金的 Shopify 帳號，若你已經在使用 Shopify 了，則可以回到這裡，前往安裝 Shopify App：PageFly Landing Page Builder，選擇免費方案即可開始體驗！搭配此篇文章邊閱讀邊操作增加學習效率！不熟悉沒關係，至少有初步印象，未來複習時很容易進入狀況。
開始免費試用 Shopify 建立電商網站，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，若試用後不想用，也可以隨時取消訂閱
若有網站設計與建置的需求，歡迎填寫表單，與 Irving 爾文深度諮詢與討論！
快速簡介 PageFly 操作介面
我直接用影片講解一下 PageFly 的使用介面，以下的內容圖文搭配挑出重點說明，然後用最快的速度示範我們建立一個網頁時常用的基本功能與建立方式。
影片可開啟字幕觀看，記得按讚、訂閱、開啟小鈴鐺 ^^ 我會陸續新增更多經驗分享與教學影片
PageFly 建立頁面的方式：快速講解
我快速錄製影片講解一下用 PageFly 在 Shopify 網站中建立頁面的方式，主要有二：
- 整個頁面：全部用 PageFly 建立
- 整個頁面：部分 Shopify + 部分 PageFly Section
進入 PageFly 的第一個畫面就是操作面板 (Dashboard)，或稱資訊面板，其綜合了所有可用到的線上支援、軟體最新更新訊息等。
左側欄位的頁面 (Pages) 幾乎是未來建立網頁時常常進進出出的地方，裡面涵蓋相對應的 Shopify 頁面類型：一般頁面 (Regular Pages)、首頁 (Home Pages)、產品頁 (Product Pages)、商品系列頁 (Collection Pages)、部落格文章頁 (Blog Post Page)、密碼頁 (Password Pages)
- 操作面板 (資訊面板) Dashboard
- 頁面 (Pages)
- 一般頁 Regular Pages
- 首頁 Home Pages
- 產品頁 Product Pages
- 商品系列頁 Collection Pages
- 部落格文章頁 Blog Post Page
- 密碼頁 Password Pages
- 頁面列表功能
- 複製 Duplicate
- 發布 Publish
- 匯出 Export
- 匯入 Import
- 刪除 Delete
- 垃圾桶 Trash
選擇其中一種頁面類型進入後，開始建立一個全新的頁面 (Create a blank page) 或從版型建立 (Create from a template)，建立之後在頁面列表的右方有更多項目 (Moare Actions) 可執行複製、發布、匯出、匯入和刪除等動作。這些動作使用時機常見的是若兩個頁面排版差不多則可以用複製已經做好的頁面去修改，如此可以加快執行速度，另外可以匯出這些頁面（但無法匯出其中的圖片，只能匯出裡面的設定），然後匯入到另一個 Shopify 網站，假如這兩個網站內容一樣語系不同而已就可使用，相當方便。
刪除的頁面會進到垃圾桶 (Trash)，所以不小心刪除頁面的話不用心慌 ^^
進入頁面編輯區後，先編輯頁面名稱 (Edit page title) 後按儲存，再去更多設定 (Page Settings) > 頁面設定 (Page Settings) > Page URL 命名網址名稱 (handle)。起手式完成後，就開始建立頁面內容吧！興奮！內容編輯過程中可以隨時復原 (Undo)；隨手儲存 (Save) 是好習慣，網路訊號突然掛了、網頁當了都有可能發生，以防欲哭無淚的方式就是每更新一些就按儲存，PageFly 還有個很貼心的功能：啟動自動儲存 (Enable Auto Save)；頁面進行到一個段落，儲存後按預覽 (Preivew)，預先看一下實際頁面的呈現與閱讀感受，確認後按發布 (Publish)，大功告成！
- 頁面編輯區
- 編輯頁面名稱 Edit page title
- 裝置瀏覽模式 Device View Mode
- 編輯區設定 Editor
- 開啟版型樣式 Enable Theme Styling
- 觀看頁面架構 View Page Structure
- 啟動自動儲存 Enable Auto Save
- 復原 Undo
- 儲存與發佈 Save & Publish
- 預覽 Preview
- 觀看已發布頁面 View Live Page
- 顯示頁面架構 Show page outline
- 更多設定 More Actions
- 頁面版型 Page Template
- 頁面設定 Page Settings
- 前往版型編輯器 Visit Theme Editor
PageFly 建立網頁常用元素
網頁的內容不外乎就是：圖、文、影片，亦即「圖片、文案、影片」這三個主要素材建構整個畫面內容，設計師也是依此來進行頁面的視覺設計與排版，而有別於靜態的平面設計，網頁上還有更多有趣好玩的「互動設計」與「動態元素」可以發揮創意，不僅提高良好的 UX 使用者體驗，善加運用可以吸引訪客的眼球，增加停留時間，還可以提高轉換率 (Conversion Rate)，所以總的來說，身為一個專業的網頁設計師，要擁有的心態就是要知道如何打造一個符合商業目標的高轉換率、能符合品牌精神且吸睛的網站，只要善加應用這五大網頁的組合元素：圖、文、影片、互動、動態。
以下列出 PageFly 建立頁面時一般常用的元素，透過它們的組合一個完整網頁就可以完成！
- Layout 排版 (頁面佈局)
- Heading 標題
- Paragraph 段落
- Image 圖片
- List 項目清單
- Slideshow 輪播橫幅
- Tab 頁籤（不是「標籤」喔！定義不太一樣）
- Accordion 手風琴
- Video 影片
- YouTube Video
- HTML Video
一開始先建立版面 (Layout)，預設有 1-4 列 (Row)，最多可切成 12 列；頁面佈局完成後，插入標題 (Heading) 可以設定標題一 (H1)、標題二 (H2) 到標題六 (H6)，以 SEO 角度，每個網頁頁面只會設定一個標題一 (H1)，表示這頁的核心主題，有關 Shopify SEO 可以參考這篇 Shopify SEO 推薦 APP：Yoast SEO 實戰教學；再來就是內文，就是撰寫段落 (Paragraph)，然後插入圖片 (Image)，呈現圖文並茂、引人入勝的編排；必要時使用條列式的項目清單 (List) 說明要點，還可插入電商網站常見的輪播橫幅 (Slideshow)，設定自動或讓網站訪客手動點擊下一橫幅；透過頁籤 (Tab) 進行內容分類，例如產品功能的特色、產品頁的敘述和規格等；手風琴 (Accordition) 則時常用於常見問題 (FAQ) 頁面，開闔收納各式各樣的問題與解答，若問題超多時，例如超過五十個以上，那用此法搭配排版就可以讓整個畫面簡潔而不過於繁複；最後適時在頁面中插入影片 (Video) 素材，除了提高訪客停留度，也可以更便於讓觀者吸收品牌或商品所要傳達的理念，PageFly 有內建 YouTube Video 元素可以直接複製貼上指定的 YouTube 影片連結，還可以使用自己上傳的影片檔連結輕易地將影片呈現到網頁中，使用的是 HTML Video 元素，相當容易上手。其實不止這些元素，等熟悉之後再逐一熟悉其他項目。
若你真的想了解該元素更多設定方式，PageFly 有個很貼心的提示，滑鼠滑倒該元素後其右方會顯示一個「問號圖示」，點擊之後可以連到該元素的官方文件詳解。
PageFly 特色功能
建立完基本版面之後，在 PageFly 中，還有一些我個人歸類為「特色功能」的元素，也是在瀏覽各個電商網站時常見的功能與呈現方式，可以因應更多的客製化需求執行彈性設計與設定。
- RWD (裝置瀏覽模式 Device View Mode)
- Version History 頁面編輯歷史紀錄
- Customer Form 聯繫表單
- MailChimp Form 電子報訂閱
- Content List 內容項目清單
- Add Shopify element：Product List / Details / Media / Title … 產品資訊組合 (可分別嵌入產品資訊細節)
- Add Shopify element：Blog Post List 嵌入部落格網誌文章列表
- Action 元素動作設定
- Go To URL
- Open Pop-up
- Open Lightbox
- Scroll To Section
- Send Email
- Call Number
- Animation 元素動態設定
- 情境 (互動方式)：When Display、When Mouse Over
- 動態選項：分別對應上列兩者不同的互動方式有不同的動態設定項目，包含有 Bouncing、Fading、Flipper、Rotate、Sliding、Zoom 等
- Integrations 整合其他 Shopify App
- Product Add To Cart 產品加入購物車
- Search 搜尋欄位
- Select Page Template 選擇頁面版型
網頁編輯器內建越多功能，就可減少寫越多程式碼，進而讓人人都可以維護，提高執行效率與工作交接順暢，例如可以針對各種裝置分別進行版面與樣式設定的 RWD (裝置瀏覽模式 Device View Mode)；可以時光回溯的頁面編輯歷史紀錄 (Version History)，算了一下大概可以回溯到 40 幾個版本；可以建立網站最常見的填寫聯繫表單 (Customer Form)，另外還有專屬 MailChimp 串接電子報訂閱表單 (MailChimp Form)，這兩項真的方便，省了不少功夫，當然，若需要更進階的如上傳功能，則需要選購 App 了；內容項目清單 (Content List) 可以快速建立三欄式的上下排版的圖文，可用於特色介紹、價格表等；產品資訊組合 (Product List / Details / Media / Title …) 可以將產品基本資訊拆解分別設定於不同的版面位置；在任意頁面位置嵌入部落格網誌文章列表 (Blog Post List) 這可謂之相當方便，例如在產品頁中穿插開箱文章。
元素的動作設定是指針對指定標題、按鈕、圖片等元素進行設定點擊事件，例如點擊之後連到指定網址、跳出視窗等，其中寄出電子郵件 (Send Email) 不只可以設定寄送的 Email 外，還可以設定 Email Subject 和 Email Content，這倒是滿少見的；元素的動態設定 (Animation) 可以簡單地針對不同的元素如按鈕、焦點圖片設定漸入 (Fade in) 的動畫，活潑網頁瀏覽體驗；令人興奮的是 PageFly 持續不斷擴大其他類別的 Shopify App 的整合能力，亦即可以擷取它款 App 的部分內容直接插入 PageFly 頁面中進行排版，例如擁有綜合功能 (社群登入、產品評論等) 的 Growave、可以讓顧客上傳圖片的產品評論 Loox、增加營收的產品組合優惠 Pickystory、訂單追蹤 AfterShip、用於網紅行銷的 GrowthHero、將你的客戶變成有影響力的人，讓他們推薦朋友得到獎勵的 Referral Candy、質感設計 Instagram 購物的 Lookbook – Shoppable Galleries 等不勝枚舉；可以不跳轉頁面直接將產品加入購物車的 Product Add To Cart；最後，可以插入簡易的 Search 欄位，沒有太多細緻的設定，其可以搜尋網誌文章或產品頁，也可以限定只搜尋產品頁；若想要秒速完成一個基本頁面，那就選擇頁面版型 (Select Page Template) 直接套用後修改吧！
RWD (裝置瀏覽模式 Device View Mode)
在這行動裝置時代，基本而重要存在的 RWD 設計 (Responsive Web Design)，尤其是針對手機使用者進行優化，可以根據四種裝置類型 (All Devices、Laptop、Tablet、Mobile) 分別設定有不同的文字尺寸與行高、不同的顏色、不同的上下間距等，需注意的是在執行時有一些限制，這個就要進去實作體驗比較容易了解，過程會比較繁瑣一點。
元素動作設定 (Action)
元素的動作設定 (Action) 可以針對文字連結或圖片設定點擊事件，亦即點擊之後前往指定連結 (Go To URL)、跳出視窗 (Open Pop-up)，視窗內容可以是影片、圖片或站內的指定頁面、打開燈箱模式 (Open Lightbox) ，設定圖片點擊之後圖片本身會跳出燈箱成為焦點、點擊之後會滑到該頁面的某個區塊 (Scroll To Section)，而且是絲滑的移動而分蒙太奇秒切換、寄到指定電子信箱 (Send Email)、網頁上播打電話 (Call Number)
聯繫表單 Contact Form
常用於「聯繫我們」頁面，PageFly 預設的表單欄位有：Email、Single Line Text、Multiple Lines Text、Single Choice、Checkbox、Dropdown、Number、Date、Time，但沒有 upload file (上傳檔案) 功能，這會需要選購 Shopify App 如 Powerful Contact Form Builder by Globo 或 Helium Customer Fields，透過這些組合可以快速建立讓使用者填寫姓名、電子信箱和留下訊息的表單，還可以任意組合與設定欄位寬度等表單排版方式。
電子報訂閱 MailChimp Form
PageFly 連電子報訂閱的表單都有內建，是專門針對 MailChimp 這套電子報軟體做整合。若你也有使用 MailChimp，那這功能也就派上用場！
整合其他 Shopify App Integrations
PageFly 頁面編輯器能將其他各領域的 Shopify App 也整合進來，統整並進行排版與設定、內容擴充。而 PageFly 逐年增加越來越多合作夥伴，創造網頁更多的可能性與滿足需求，對使用者而言絕對是再好也不過了。若有你偏好的 App 但沒有被出現在 PageFly Integrations 清單中，則可以去 PageFly 的許願表單填寫資料，前往許願！我是已經許願了希望能整合多國語系翻譯 Transcy: AI Language Translate，希望能手動翻譯而非只能自動翻譯 PageFly 建立的頁面，拜託趕快實現 ^^！
選擇頁面版型 Select Page Template
如果時間真的很趕或想嘗試用現成版型去改造，那直接選擇 PageFly 內建的「頁面版型」即可秒速完成一個網頁頁面，提高執行效率，版型類型多樣，包含首頁 (Home Page)、登錄頁 (Landing Page)、產品頁、商品系列頁 (Collection Page) 等，都有相對應 Shopify 預設的頁面類型，直接套用相當便利。PageFly 官方還會不定時推出更多版型 (Template)，讓我們拭目以待！
PageFly 進階功能與設定
PageFly 能將網頁的視覺設計圖打造成「網頁」並發布到全世界速度真的是快，在前述介紹的操作中就完成差不多了，只要你能熟悉從在 Figma 或 Photoshop、Illustrator 切版切圖、批次丟到 TinyPNG 優化圖片，到上傳 Shopify 用 PageFly 建立頁面這段流程，恭喜你已經會客製化 Shopify 網站頁面了！基礎的會了後，接下來是了解進階的互動設計、動態設計與執行小訣竅達到特殊需求，當然若你會寫 html/css 的話，其實就可以滿足大部分設計排版的需求，剩下的部分要透過 JavaScript / jQuey 來達到無遠弗屆的境界，但那已超出一般人的領域很多，就交給前端工程師吧！
🍉 若你還沒有 Figma 帳號，可以前往註冊免費帳號，免費版就很好用了！
我大概挑選幾樣常見的如視差滾動效果 (Parallax Effect)，PageFly 內建即可做到，解決一般人還要寫程式碼的困難；固定選單 (Sticky Menu) 則官方文件有提供設定方式與 CSS 語法，也不難做到，照著執行即可；行動版上下左右排版小技巧 (Display Style: Flex) ，若懂 CSS 會比較知道如何使用，有一個情況經常遇到：就是同一個區塊電腦版網頁排版是左文右圖，但行動版網頁想改成上圖下文，這時候就會用到，至於如何設定未來實作 Demo 再來分享一下。
- Parallax Effect 視差滾動效果
- Sticky Menu 固定選單
- Display Style: Flex 行動版上下左右排版小技巧
- Saved Section 儲存區塊
- Product Metafield 產品中繼欄位
- 元素 CSS 設定 Attributes 參數
- ID
- Class
- Custom Code Editor 自訂程式碼編輯器 (CSS / JavaScript)
- Custom CSS
- Custom JavaScript
儲存區塊 Saved Section
PageFly 後來新增的功能「儲存區塊」(Saved Section) 終於出現了，這對重複在每個頁面出現的內容來說相當重要且便利，PageFly 有提供預先做好的區塊 (Pre-made sections)，我們也可以自行客製化，只要建立一次共用區塊 (Section) 就可以套用到各個指定頁面中， 若要改區塊的部分內容，一改就全部有使用到該區塊的頁面都自動更新，有沒有超神奇！不用「重複造輪子」，大大提升執行效率，節省超巨量的工作時間，有關如何使用可以參考官方文件：How to Use PageFly Saved Section?
Shopify 推出的中繼欄位 (Metafield) 完全為網站增添了許多動態資料的彈性，大大加分！若了解如何將其結合 PageFly 那會是如虎添翼，例如將中繼欄位插入 PageFly 建立的頁面中作為版型；PageFly 每個元素大部分都可以設定 CSS 的 ID 或 Class 名稱，有些則可以設定 HTML 屬性，這功能對網頁設計師、前端工程師來說絕對重要，他們可以新增程式碼到 PageFly 頁面中只會作用在該頁面或寫在 Shopify 程式碼檔案統一管理，進而去選取和控制所設定的 CSS，所以元素 CSS 設定 Attributes 參數和新增程式碼 (CSS / JavaScript) 編輯區就派上用場。
自訂程式碼編輯器 Custom Code Editor (CSS / JavaScript)
這程式區對會寫 CSS 或 JavaScript 的網頁設計師或工程師來說至關重要，因為可以藉此打造不同排版、互動設計等以做到版型本身沒有的視覺與創意，需要了解的是，寫在該 PageFly 頁面的程式區只會作用於該頁，而非全站。
PageFly 學習資源
PageFly 本身就提供非常豐富的學習資源，盡可能提供了圖文、影音教學讓一般使用者可以快速入門、快速上手，讓工程師盡情運用與查詢，還有一種方式就是直接透過線上客服向他們請教各種有關問題，都可以獲得相當的收穫。
PageFly Help Center 幫助中心
- 網址：前往瀏覽
- 簡介：PageFly 官方線上文件，應該是最經常使用到的，當字典查，有問題就在搜尋欄位搜尋關鍵字，瀏覽每個操作介面與操作方式，還有影片講解，很容易讓你上手 PageFly！這也是我最常使用，經常拿來查找與了解的地方。
- 若想直接進入狀況，可參考這篇 Get started within 6 mins，算是迅速了解其基本功能與如何直接使用 PageFly Template 現成版型建立頁面並發布。
若是英文苦手，進入 PageFly 幫助中心後，網頁上方導覽頁有個語言選項，選擇中文即可閱讀中文版，若想看繁體則用 Chrome 開啟網頁，按右鍵盤點選「翻譯成中文(繁體)」
PageFly YouTube Channel 影片頻道
- 網址：前往瀏覽
- 簡介：PageFly 官方的 YouTube 頻道，有實際的影片教學當然學得更快、更好理解囉！主題分類滿多的，有軟體操作、小訣竅、線上研討會、Shopify 版型評價導覽等。
- 若是第一次接觸 PageFly，可先看這系列 New to PageFly? Start here!
若是英文苦手，可以在 YouTube 影片下方有個齒輪圖示的「設定」，開啟「字幕」切換成「中文」
PageFly Updated 更新訊息
- 網址：前往瀏覽
- 簡介：PageFly 部落格有個分類是 PageFly Updated，持續發布軟體更新內容，有別於一般 Saas 軟體常見的只是發布更新文字資訊，文章中會有概要的操作示意圖，隨時可以了解其最新功能，相當不錯！
PageFly 的 Udemy 免費線上課程
- PageFly Team 有在線上課程平台 Udemy 上架免費課程，作為有系統地學習 如何使用 PageFly，順便一併學習建立 Shopify 商店。
PageFly Academy 學習中心
- 網址：前往瀏覽
- 簡介：免費提供精簡扼要的電商與網站建置的指引，包含 PageFly 導覽與網頁設計基礎概念，幫助了解 Shopify、PageFly 與網頁建立的基本知識。
若是英文苦手，直接用 Chrome 瀏覽內容，按右鍵盤點選「翻譯成中文」閱讀
Irvinglab 爾文實驗室
- 網址：https://irvinglab.com/blog/
- 簡介：當你看到這裡時，其實你已經在爾文實驗室的網站部落格中了 ^^，裡面主題包含 Shopify 和 PageFly，我會持續更新內容與分享網站的實戰經驗，有任何有關 Shopify 或 PageFly 問題可隨時訊息我，一起交流成長！打造客製化的品牌電商網站，不再是樣板、容易撞衫的套版網站。
若有需要協助建立 PageFly 頁面或 Section 的版型，可以來信諮詢，寄信至 irving@irvinglab.com！我們有提供此服務，預約線上會討論需求細節，包含從設計到 PageFly 建立，或提供設計圖，我這邊用 PageFly 建立等這兩種方式都可。
若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果
PageFly 網站實際案例
簡介：以下大概列出幾個有使用 PageFly 建立頁面的 Shopify 電商網站，你會發現不是全站都需要使用，因應不同的需求去搭配，例如有些品牌可能只建立排版較複雜的一般頁面 (Regular Page)、有些使用在產品頁 (Product Page) 或投放廣告用高轉換率的登陸頁 (Landing Page)，極少使用在網誌文章頁 (Blog Article Page) 等，可以瀏覽看看，從中取經。未來會持續新增實際使用的網站案例與網站技術拆解單元，敬請期待！
CUiRASÉX
探索 CUiRASÉX 官方線上商店。探索最新的限量版皮具收藏品系列。CUiRASÉX 是一個卓越的以皮革為中心的跨學科創意工作室，專門生產獨家的限量版收藏品，注重精美的材料、卓越的工藝和無與倫比的細節，同時優先考慮可持續的商業實踐。
ROSIE ALLAN
Rosie Allan – 來自澳洲的時尚太陽眼鏡。一位父親為寶貝女兒 ROSIE 所打造的時尚眼鏡。 ROSIE ALLAN 眼鏡的誕生，意味著父親對女兒無條件的愛與關懷，鏡框採用厚實的義大利純手工板材，舒適堅固。讓你呵護著孩子眼睛的同時，兼具時尚與質感。
CLOUDVOCAL 雲聲
ISOLO System — The next level instrument microphone you’ll love. Tailored for saxophone, guitar, violin and other instruments.
JE22
JE22 knows training is hard and painful, and dedicate to build a cycling kit makes you feel better and faster either during day to day training or competitive races.
GWS
GWS provides water purification products including Puroflo reverse osmosis systems, drinking water faucets, countertop filters, undersink water filter system, whole house water filtration systems, LG Samsung refrigerator filters, swimming pool filters cartridges & other components like water pump for house, water tank.
XRound
XROUND Inc. constantly innovates sound technologies and customizes the user experience, and we pride ourselves on redefining the sound and enhancing the audio experience. Our mission is to find the right sound for you.
PIVOTRAX
Puncture resistant dirt bike tires that offer traction for every terrain. Find the best option to conquer all hard and soft tracks right here. Tires, inner tubes, tire irons, and valve caps available.
加入 Line 的學習社群
成為網頁設計師 | Irvinglab 爾文實驗室
- 簡介：邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
- 網址：https://share.irvinglab.com/be-a-web-designer
Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室
- 簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
- 網址：https://share.irvinglab.com/shopify-line-group
WordPress 網站設計與架站學習｜Irvinglab 爾文實驗室
- 簡介：學習 WordPress 網站設計與架站，分享實作經驗與交流。
- 品牌網址：https://share.irvinglab.com/wordpress-line-group
SEO 資源彙整與學習｜Irvinglab 爾文實驗室
- 簡介：閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。
- 網址：https://share.irvinglab.com/seo-line-group
加入 WhatsApp 的學習頻道
Shopify eCommerce Web Design 網站設計學習交流｜Irvinglab 爾文實驗室
- 簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
- 品牌網址：https://share.irvinglab.com/shopify-whatsapp-channel
精選文章
Shopify
- Shopify 台灣金流、電子發票、物流與超商取貨解決方案
- 用兩個月打造 Shopify 客製化網站設計
- Shopify 網站設計流程與時間規劃
- 如何客製化 Shopify 網頁設計排版
- PageFly 初入門：快速建立 Shopify 網頁
SEO
WordPress
Web Design
Web Server
AI、設計與行銷工具
設計 Design
- Figma：UIUX 設計師和網頁設計師首選必用的線上設計協作軟體，若你是行銷人、專案管理、團隊主管、遠端協作等也都非常適用！大幅提升執行效率、降低溝通成本。最近發現一個很讚的 Figma Plugin，並且我已經購買：Table To Figma，可以串接資料庫大量建立圖片，例如串接 Google Sheets、Notion 等，而且是一次性付費！優惠不知道何時，可以去瀏覽一下。而 Musho AI 這款 Figma 外掛則是則是結合 AI 自動產生網頁設計圖，雖然很棒，但其實現存已經有爆多 Design Template 可以使用，而且更精緻，未來就看其能否推出殺手級的功能。
- Untitled UI：現成的 UI 套件，使用 Figma 的設計師一套即用，可以參考其架構與設定，多多觀摩！The world’s largest and most popular Figma UI kit. Kickstart any project, save thousands of hours, and level up as a designer.
- Fotor：線上 AI 影像修圖和去背是專攻的強項，應該有勝過 Canva，平面設計與社群模板 Template 也都有，AI 系列工具強大內建，包含：Image Generator、Face Generator、Art Generator、Photo Effect Photo Enhance、Background Remover、Object Remover、Avatar Generato 等。我當時是想找 AI Mockup 產生器發現此款，完全被打中！
- Canva：線上完整的平面設計工具集錦，若團隊沒有設計師，那 Canva 真的是神助攻！解決行銷、社群、平面設計、簡報等需求，版型一應俱全
- Placid.app：競爭對手是 Canva，兩者提供近乎相似的線上設計工具 Automations for on-brand creatives
- Creative Market：這個平台是目前看過擁有許多種類高質感的設計素材商店，雖然 Canva 擁有的設計範本也不錯，但若說 Canva 是 80 分的素材，那 Creative Market 就是 90 分 High-quality Stock Photo, Graphics, Fonts, & Design Templates
- Envato Elements：只要訂閱之後，就可以無限下載所有的付費資源素材，包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等，當遇到緊急專案需求時或作為靈感來源都相當便利！Envato 終於推出 AI 生成式圖片了！ AI ImageGen 簡介：使用 AI 和 Envato Elements 為專案打造令人驚歎的獨特視覺效果。獲得無盡的靈感，突破創意障礙。以任何可以想像的風格生成令人驚歎的圖像…只需一個提示即可！超棒的是 AI ImageGen 包含在 Envato Elements 中，無需額外費用。
- Themeforest：擁有豐富的 WordPress 和 Shopify 版型等資源，品質還不錯，強烈推薦！此外也是有販售設計素材、圖片、音樂音效等，但強項還是版型。
- Coolors：色彩靈感來源，快速建立色票與漸層的配色工具，上傳任一圖片擷取其色票、配色對比度確認、現成色卡一覽無遺直接使用等，The super fast color palettes generator!
- Iconfinder：8,400,000 多個免費和進階向量圖示、插圖和 3D 插圖。官網表示使用者知名的公司有 Google、Nike、Netflix、Adobe、Microsoft、Spotify、Amazon、Lego 等。我瀏覽了不少感覺相當有質感的 Icon 圖示庫，有各種檔案格式直接下載，也有免費的圖示們可以使用，官方也有 Figma 頁面可以直接複製！
網域註冊 Website Domain
- GoDaddy：選擇網域建議到全球最大最主流的 GoDaddy 平台購買，然後再串接到 Shopify、WordPress 或你用的架站平台。然後也不建議直接在架站平台本身購買網域，之後若要遷移網站或不想使用此平台時，網域會被綁定在平台中。所以網域和架站平台分開單獨選擇比較理想。若有網域選擇障礙或相關問題也歡迎寄信給我或透過社群傳訊息給我。
網站架站 Website Builder
- Super — Create Websites with Notion：若你是 Notion 的使用者或設計師，或想快速簡單且 No code 建立一個自己的網站或作品集，以 Notion 為主要編輯內容與排版，非常適合透過 Super 打造網頁頁面！基本的版型將 Notion 變得更像「網頁」的模樣呈現。我之後也會用這樣的組合取打造另一個網站，一旦完成會更新在這！
- Framer：輸入文字，數秒內即可生成網站的 AI 工具！這對設計師來說值得研究研究！
- Ycode：它的出現主要是對戰 Webflow 和 Framer，除了提供價格相對優惠一些，功能面還不容小覷，綜合比較下主打的 CP 值！不過動態方面 Webflow 還是比較強
- Relume：若是 Figma 設計師和 Webflow 架站的愛好者，可以玩玩看！Access the world’s largest library of Figma & Webflow components and build better websites in hours, not days.
- Siter.io：又一款免程式碼的網頁編輯器 No-code website builder，介面有點類似 Figma，Siter is a no code website builder for creatives. Create fully responsive portfolios and landing pages directly in the browser.
- Webflow：這款應該是相當多設計師知道的、新潮的 No Code 架站平台，打造客製化品牌官網或作品集網站都不是難事，還有一個強項是動態設計、互動設計的功能設定，但用過之後深深覺得對「網站初學者」不友善，建議可以先使用免費方案操作後台體驗一下！Create a custom website | Visual website builder
- Readymag：發現有相對極少比例的國外頂尖設計師有在使用這個架站平台 The design tool for outstanding websites
防止數位廣告惡意點擊 Click Fraud Protection & Detection
- ClickCease：點擊欺詐保護和檢測軟體 Click Fraud Protection & Detection Software。可以檢測並阻止您的 Google 廣告活動中的點擊欺詐。自動阻止競爭對手和機器人浪費點擊付費廣告預算。至少有 40% 的互聯網流量是非人類的。機器人無意轉化，只會浪費廣告預算。阻止虛假點擊可以提高流量品質，並可以帶來更多轉化。
線上影片錄製 Online Screen Recorder
- Tella：線上螢幕錄製，可以再錄製完螢幕講解影片後直接分享連結，超級方便！尤其可以用在跟客戶或客服講解說明使用，省下不少另約會議時間，無論是團隊內部或外部溝通、錄製線上課程使用、線上簡報等都適用！Online Screen Recorder for Mac & Windows
雲端儲存 Cloud Storage
- Dropbox：目前用最久也最愛的、主要在使用的雲端儲存軟體。經過了多年，新增了不少功能，其中一個最常用的就是其推出的螢幕錄影功能 Dropbox Capture，搭配鍵盤快捷鍵快速錄製影片，錄完就直接雲端了，速度超快，分享連結都自動產生，這成為我快速跟客戶與團隊成員溝通的最佳方式！
品牌標誌設計 Logo Design
- Looka：用 AI 產生無數個品牌 LOGO，有夠方便至極！平面設計師的工作再度受到挑戰…… 我自己因為有數個新品牌正在建立中，先免費試用，覺得有夠讚，後來我就選擇了付年費方案也不貴，直接取得整組 Brand Kit 素材，還可以隨時進後台編輯與修改！Design a Logo, make a website, and create a Brand Identity you’ll love with the power of Artificial Intelligence. 100% free to use.
網站分析 Web Analytics
- Fathom Analytics：愛死這款網站數據分析工具，因為 Google Analytics 最多只能儲存十幾個月的數據，那我經營網站十年以上，不就一半以上的數據都沒了？！為了找一款可以儲存所有數據工具，比較多種多款之後選擇了這款，不僅將舊版 GA 也能將新版 GA 全部匯入進去，數據全部備份啦！興奮！歡迎前往免費試用 30 天！先用用看，好用再選付費方案即可。我是選了付費方案，年費可以省 17%。
- Plerdy：全方位的網站優化分析工具，目標為提供網站優化與轉換率，擁有如此多的功能費用也算平易近人，包含 Heatmap、Session Replay、NPS、Ecommerce Analytics、Event Tracking Tools、Funnel Analysis、SEO Checker、UX assistant、Ecommerce Analytics 等，而 AB Testing 完全免費！
AB Testing 網站 AB 測試
- VWO：這款是我夢寐以求的 AB Testing 主流軟體，其功能的專業程度與順暢度相當高！可以先用免費試用三十天，有提供免費版和付費版，免費版可以當作小試身手，若專注在網站轉換率搭配大量測試各種設計與文案版本測試則可以考慮升級為付費版本。官網著名客戶有 Disney、Amazon、iPROSPECT、SimilarWeb 等
- Mida：非常輕量化的測試工具，不會減慢網站速度，避免頁面載入時間過長，以免影響轉化率。同樣有可視化編輯器，設定容易上手。另外在 AI 的説明下，只需點擊幾下即可生成新的變化創意。光光前述的這三點就相當吸引人使用看看。Lightweight A/B Testing Tool
- Convert：這也是一款非常扎實、重量級的的 AB Testing 主流軟體，跟 VWO 時常被拿來比較，官網註明客戶有 Sony、Audi 等
- ABtesting AI：有用過 AB Testing 在優化網站嗎？來試試 AI 的 Testing，有免費方案可以測試
- ClickMagick：在找 AB Testing 工具時發現 ClickMagick，也看了其他 YouTuber 簡介，感覺相當易用，找時間實測
- Plerdy：全方位的網站優化分析工具，其中 AB Testing 功能完全免費！太佛心！
電商分析 Ecommerce Analytics
- Shulex：電商網站的競品分析工具很多，這款我試用了一下分析 Amazon 產品頁可以自動分析評論、產出該產品的人物誌、正面和負面評論的項目與比例等，讓我可以快速了解產品的使用者輪廓與痛點，滿推薦使用看看。
- PPSPY：Shopify Store Spy & Shopify Dropshipping Monitor Tool 發現這工具真是大開眼界，可以用 AI 尋找 10 倍利潤的熱賣產品，主要針對 Shopify 商店，包含快速監控對手、進行市場研究、熱銷產品研究找到利基市場、進行大量店舖主題設計參考等
音訊轉文字 / 文字轉語音 AI Voice / Text To Speech
- Murf AI：文字轉影音，聲音質感優質，有整合於 Canva 使用。AI Voice Generator – Versatile Text to Speech Software
- Rask.ai：AI 影音配音工具，告別昂貴的翻譯員。目標是用人工智能提供不亞於人類的配音和翻譯體驗。Translate video & audio Unlock Worldwide Potential with AI
ChatGPT
- Sider AI：第一次用就驚艷！良好體驗勝過直接用 OpenAI 的帳號介面，可以快速總結網頁頁面內容、選取片段文字快速翻譯、摘要 YouTube、直接嵌入在 Chrome 瀏覽器側邊欄、有提供 Mac 使用者快捷鍵呼叫、有行動應用程式可以下載、有桌面版應用程式直接使用、反應速度很快、可以切換不同 AI 工具如 OpenAI 的對手 Claude 和 Google 的 Gemini 等也有歷史記錄等，這些功能直接開啟直接使用，大推！ ChatGPT Sidebar, GPT-4, Draw & Web accessMyMap AI
心智圖 AI
- MyMap AI：通過簡單的聊天介面將你的文字想法轉化為視覺化內容，如心智圖和演示文稿。非常適合學生、教師和專業人士使用，無需設計技能。節省時間的工具，用於輕鬆協作的視覺創作
SEO 搜尋引擎優化
- Wincher：一款追蹤 SEO 成效的工具，算是超級簡易版的 Ahrefs，可以直接連接 Google Search Console 簡約地呈現數據，用一用也是清爽的，有提供免費版可以使用，免費版最多追蹤五個關鍵字
- Pro Rank Tracker：另一款追蹤 SEO 成效的工具，介面簡約，瀏覽舒適，有 Mobile App 可以下載，提供免費試用 14 天，SEO Agency Rank Tracking & Reporting Tool
- AlsoAsked：People Also Ask keyword research tool 若要撰寫 SEO 文章，這是一款可以考慮使用的工具，輸入關鍵字後會自動產生樹狀圖表呈現內容延伸標題
- Surfer：SEO 工具，主要可用做 SEO 內容編輯者使用， AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能，介面設計滿新穎的，賞心悅目！可以玩玩看，七天內可以退款。
文案 Copywriting AI
- Writesonic：快速創作部落格、廣告、電子郵件和網站所需的內容，並進行SEO優化，這是最令人期待的 AI 內容產生軟體！其中可以安裝 Chrome extension，然後快捷鍵可以直接呼叫輸入視窗，超級方便。即將推出 ChatSonic AI Bot for Businesses: Customer Support AI Chatbot，類似 Chatbase，這類線上客服 AI Chat 比以往的 Bot 還更人性化且反應不會過於機器人。
- CopyAI：行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
- Frase：彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
網站客服 AI Chatbot
- Chatbase：利用您擁有的知識庫，打造一個AI聊天機器人，並輕鬆將其添加至您的網站中
網站多功能工具 Website Widgets
- Elfsight：跨平台各種功能多合一的 Widget，例如 Instagram Feed、Popup 跳出視窗、客製化 Google map 設計等，跟 Common Ninja 相似，但收費方式不同
- Common Ninja：跨平台各種功能多合一的 Widget，例如 Instagram Feed、Popup 跳出視窗、客製化 Google map 設計等
電子報訂閱 Newsletter
- Beehiiv：滿新穎的電子報訂閱工具，相當輕巧。時常被拿來跟 Substack 相比，近年很多國外新創公司、創作者等偏好使用，也是我主要使用的軟體，功能齊全之外，在撰寫內容時介面非常乾淨，相當適合文字創作者的書寫環境。
- ActiveCampaign：Email 行銷、電子報系統（MailChimp 的替代方案之ㄧ）
社群媒體管理平台 Social Media Management Platform
- SocialBee：越來越多社群媒體需要同時管理、排程貼文、觀看成效，若一次要管理五六個以上的渠道，那可以考慮這款，一站整合所有社群帳號在同一個介面，可以同時設定各個社群媒體的貼文內容、發布時間等，還可以整合 Canva 設計圖片、內建 AI 產生文案等功能 AI-Powered Social Media Management Tool – Schedule your social media content with ease, from one place, for all your profiles.
- Tailwind：一站整合社群媒體和電子郵件行銷，也有生成式 AI 文案、Pinterest 和 Instagram 的排程發佈工具等，跟 SocialBee 有點像，相比之前起跳方案較便宜些 Social Media & Email Marketing Tool
課堂會議 AI 即時筆記 AI Tutor
- Study Fetch：用 AI 輔助學習，我看到一個很強大的美國課堂實際 Demo 就是教授在台上講課，而這位實測者就打開筆電和 Study Fetch 直接錄音、即時語音轉錄文字，然後即時線上 AI 交談，可以問「剛剛教授在講什麼？」，Study Fetch 的交談回覆就會幫你摘要，太酷！我想這不僅可以用在學校課堂上，平時工作開會等相關場合都可以用的。Revolutionize Your Learning With Ai – Study Fetch transforms your powerpoints, lectures, class notes, and study guides into flashcards, quizzes, and tests with an AI tutor right by your side.
多合一行銷平台 Marketing Platform
- Simplified：是一款 AI 的 All-in-one 軟體，適合大小團隊的行銷團隊都適合使用並進行協作。提供數百萬張免費圖片、影片和音訊剪輯、數千個設計師版型、支持 30 多種語言的長篇和短篇內容寫作。內容日曆可用於安排和發布社交媒體貼文。有提供「永久免費」的版本，若需要更多的功能可以再升級付費方案即可！An Easy to Use All-In-One App For Modern Marketing Teams
- GetResponse：All-in-one 行銷平台，包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能，可以先註冊帳號使用免費版，覺得需要未來再升級！這軟體類似 Hubspot
消費者研究 Customer Survey
- PickFu：PickFu 是美國消費者在線調研工具，可進行在線的測試、優化和即時消費者調研問卷，取代猜測。透過 PickFu，你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧，幫助你做出更好的商業決策
- SurveySparrow：全渠道顧客滿意度調查管理平台 Omnichannel Experience Management Platform
- Qwary：全渠道 CX 客戶體驗平台，可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES，以改善購物體驗和產品性能
市場趨勢 Market Trends
- Exploding Topics：在趨勢成為趨勢之前發現趨勢，發現新的機會。此軟體的共同創辦人兼 CEO 是我非常推崇的國外 SEO 專家 Brain Dean，立馬吸引我的注意力，其官網也有揭露使用此產品的有 Google、Apple、Netflix、Amazon、Samsung 等國際品牌公司。See new market opportunities, trending topics, emerging technology, hot startups and more on Exploding Topics.
表單測驗 Quiz & Survey
- Opinion Stage：建立免費的測驗、投票、表單等工具，視覺質感和功能運作不錯！也有提供付費方案，提高每個月的回應數
- Tally：這款表單提供爆多功能且是免費版就可以使用的，可以是 Typeform 的另一個選擇
- Typeform：質感優雅的線上表單
- NoteForms：專門整合 Notion 的表單建立，其官方網站首頁揭示使用者包含哈佛大學、耶魯大學、現代汽車等都有在用。因為我本身主要使用 Notion 管理專案，這大大方便多了，快速建立表單、蒐集回饋直接存到 Notion，節省不少切換軟體與資料轉移的人力
使用者研究 User Reserach
- UXPressia：快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map，還有各種模板可以直接套用。
線上客服 Online Chat
- Help Scout：線上客服（Zendesk 的替代方案）
- Tidio：設計優質的線上交談工具 Online Chat
線上課程 Online Course
- LearnWorlds：創建與銷售線上課程網站平台
- Teachable：創建與銷售線上課程網站平台
線上社群 Online Community
- Circle – The all-in-one community platform for creators and brands：真的是多合一多功能的線上社群平台，包含討論區、舉辦線上活動、線上課程、線上即時群組對話、為您的社群和內容收費等，還有 AI 驅動的連接和學習 Community AI。比較了多款建立討論區的線上社群平台，Circle 的介面設計簡潔、耐看、聚焦內容與交流，相當推薦！
會員制 Membership
- Outseta – All-in-one membership software：支付、身份驗證、CRM、電子郵件——應有盡有。Outseta 為創始人提供了在幾分鐘內通過其網站、SaaS 產品或在線社區獲利的工具。可以串接 Webflow、Framer、WordPress、Discod、Notion 等。
網站軟體素材資源 Saas Resources
- AppSumo：限時優惠的一次性付費數位軟體販售平台（大幅降低成本）
- MotionElements：專業的影片素材、版型、外掛
- MotionVFX：專業的影片素材、版型、外掛
聯盟行銷 Affiliate Program / Referral Program
- Trackdesk：聯盟行銷追蹤軟體，輕鬆實現合作夥伴主導的成長。這款與市面上各種競品相較，看似擁有更多的優勢，可以研究看看。可以整合 Shopify、WooCommerce、Stripe、Magento 等，也可應用的產業有 Saas 軟體、電子商務、網紅行銷等領域。
- Partnero：市面上有許多建立聯盟行銷的關係管理平台，這款是我看過介面優質、申請註冊流程都相當順暢的一款軟體，可以用用看 The Ultimate Platform for Partnership Management
一頁式個人網頁 Online Presence with Liinks
- Liinks：一頁式多連結網頁，整合多個社群、官網的一頁式網站
線上研討會 Online Webniar
- HeySummit：舉辦線上虛擬研討會
線上預約系統 Booking Appointment
- TidyCal：Lifetime deal – AppSumo，一次性付費，終生更新，來自 AppSumo 自行開發，在經營初期想先節省 Calendly 訂閱制費用長期下來的一定成本，可以考慮 AppSumo 這款，雖然在許多進階功能上還沒有追上，但很多基礎功能例如實用的預定月曆會議、整合 Google Calendar、Zoom、PayPal 等就滿實用的
- SimplyBook：線上預約排程系統 及 App 預約軟體
自動化軟體 Automation
- Make：視覺化自動化工作流程，將數據串接等在各種軟體來回穿梭，提升工作效率
- Bardeen AI：結合 AI 的自動化工作流程，整合各種常見 App
- Axiom ai：No code 自動執行網站操作和重複任務
- Repurpose.io：一個貼文自動發佈到多個社群平台，開始有這種需求，以往每次都要一個平台一個平台登入然後貼文 Repurposing content for social media the easy way
資訊圖表 Infographics
- Piktochart：資訊圖表設計工具
跨境收款 Online Payment
- Payoneer 派安盈：安全、快速，一站式跨境收款
- Wise：跨境帳戶，進行國際付款、收款
- Checkout Page：還頭一次看到這種概念，專門打造結帳頁面 Checkout page，但要串接 Stripe 帳號
- SamCart：打造線上快速收款方式，並且要大量模板可直接套用，這邊有 Demo 影片簡介，另外其還有推出線上課程建立的功能。Create an eCommerce storefront with SamCart to make it simple to sell digital products online with innovative checkout and conversion boosting features.
網路爬蟲 Web Crawler
- Apify：Full-stack web scraping and data extraction platform
線上互動產品 Demo 引導 – Interactive Demo Guide
- Guidde：透過 AI 將建立影片文件，滿神奇的！錄製影片後會自動拆解每個步驟，並為每個步驟自動產生標題與內文，然後還會自動產生影片講解投影片，選擇語音自動講解，這軟體用做大量需要錄製軟體操作教學文件滿便利的。Magically create video documentation with AI
- Arcade：線上建立產品互動式 Demo，使用者可以邊聽邊點擊畫面持續往下一個步驟畫面走，非常適用於軟體教學、操作指引，讓初步接觸的人可以有個印象、提升熟悉的效率，透過畫面切換直觀上更容易吸收理解，後台還有使用者的數據查看所建立的 Demo 互動指標 Create Interactive Product Demos – Arcade is an interactive demo platform that allows teams to create effortlessly beautiful demos in minutes.*
- Guideflow：可以製作線上互動式操作步驟產品 Demo 引導畫面，相比於瀏覽圖文教學的文章，互動式畫面切換更有沈浸感 The most advanced interactive product demo platform*
VPN
- Surfshark：Surfshark VPN 最近開始用，還滿好使用的！原本需求是想要瀏覽某些國外網站卻被強制自動轉址，所以用 VPN 解決此問題
Podcast
- Firstory：平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程，我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
- Descript：錄製 Podcast 線上工具，包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
- Riverside.fm：專門針對錄製 Podcast 的 All-in-one 線上工具，包含錄製 4K 和剪輯影片。Record Podcasts And Videos From Anywhere
- Podcastle：錄製 Podcast 的線上工具，包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.
手機應用程式開發 Mobile App Development
- FlutterFlow：這個滿強大的，可以直接拖拉式介面建立手機應用程式，直接發佈在 iOS 和 Android，有點像是用 WordPress 打造網站的後台。FlutterFlow lets you build apps incredibly fast in your browser. Build fully functional apps with Firebase integration, API support, animations, and more. Export your code or even easier deploy directly to the app stores!
- AppMySite：這個令人振奮！因為我已經有網站，所以相當有此需求。其主打的功能是將你現有的網站打造成手機應用程式 mobile app，例如將你的 WordPress 或 Shopify 進行轉換（Shopify 即將推出），後來也推出直接客製化 mobile app，有點像 FlutterFlow，估計是相對適合初入門使用者。AppMySite’s no-code DIY mobile app creator powers you to make premium native apps for Android & iOS.
網站開發 Web Development
- CSS Scan 3.0：在進行網站開發時，檢查、複製和編輯 CSS 的最快速、最簡單的方式，跟「檢查元素」說再見——透過滑鼠懸停於任何元素上，即可立即檢查其 CSS，並透過一個點擊複製其所有規則。
- ShipFast – 快速發布你的 App，創辦人在官網闡述自己的故事：我意識到我一遍又一遍地做同樣的事情：設置 DNS 記錄、監聽 Stripe webhook、設計定價部分……因此，我出於 3 個原因建立了 ShipFast：1. 節省時間，專注於重要的事情：建立業務、2.避免令人頭疼的問題，例如以垃圾郵件結尾的電子郵件或等待 3 天才能獲得 Google 批准、3. 快速盈利 – 發貨越多，學到的越多，賺的就越多。The NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.
全球隱私法的數據隱私合規解決方案 Compliance Solution
- Termly：全球隱私法的數據隱私合規解決方案，需要合規解決方案，但又不想花費數千美元的法律費用？Termly 的合規套件可以説明您保持最新狀態並遵守隱私法律，例如 GDPR、CCPA、PIPEDA、電子隱私法規等——免費。 Data Privacy Compliance Solution for Global Privacy Laws
購物回饋金 Shopping Rewards
- ShopBack：常常網購的人一定要申請的啦！我時常在 Apple 官網購買 iPhone、MacBook，還有博客來買一堆書、PCHome 買 3C 產品、Hahow 熱門線上課程等，其他還有超爆多的線上商店如蝦皮 Shopee、Yahoo 購物中心、保健食品 iHerb、家樂福線上購物、Klook 旅遊、Booking.com 訂房等等都可以使用，並且累積回饋金後至少 200 元新台幣，就可以轉帳到自己指定的銀行帳戶，超方便！
陸續蒐藏與研究……
有任何想問的問題，歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談，我們一起交流、成長！附上我的網頁設計作品，可以來逛逛喔！歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入台灣的 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理，或加入專接收資訊非討論的 WhatsApp 頻道。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。
