步驟 1
先設計好你的 LINE 圖文選單
免費教學開始：這篇文會以柔兒數位的圖文選單範例 4 層連結版為範例。
建議可以用 Canva 製作，LINE 圖文選單模板設計尺寸拉 2500 × 1686。也可以直接複製 Canva 4 層圖文選單模板 改成適合自己的設計樣子，然後下載備用。
也推薦你使用柔兒數位的 LINE 選單圖片生成器，免費生成 LINE 圖文選單圖片，支援多層、多版型、品牌配色！
多層 LINE 圖文選單免費付費手把手教學（2026 年版）
100% 的流量給了 LINE 圖文選單
- 0 元免費手把手教學文，LINE 圖文選單換頁
- 也提供付費教學或付費系統使用（見下方兩個選項）
- 選單進階全方位應用，LINE 自動回應訊息
付費教學
一對一專人線上上課
真人開螢幕帶你把自己的帳號設定完成，約 2–3 小時，含課後技術支援。 也有企業團班。
看課程內容 →付費系統
LINE BOOST
完全不碰 API 與 Postman，直接拖拉完成多層選單、Quick Reply 與分眾標籤。
看系統 →以下的九個步驟是完整免費的，不需要買任何東西就能做完。 上面兩個選項是給「不想自己試錯」或「之後還要一直改」的人。
LINE 圖文選單是什麼？
LINE 圖文選單（LINE Rich Menu）是 LINE 即時通訊應用程式上的一種功能，允許 LINE 用戶在聊天界面中以視覺化的方式與 LINE 官方帳號互動。圖文選單在 LINE 聊天視窗下方的固定選單，每次用戶不管是因為推播或其他互動打開品牌的 LINE 官方帳號時，都能看到這個版位。制式的 LINE 圖文選單從後台就可以設定，然而如果要做到多層、切換，甚至不同的版型，發揮創意，則需要使用 LINE 的 Messaging API 進行設定。
豐富的 LINE 圖文選單，可以增強用戶體驗，提高用戶參與度，透過多層圖文選單換頁設計，更可讓品牌擁有迷你官網形象，在宣傳、銷售等方面擁有提供更多機會，官方帳號更可以根據特定活動或需求定期更換圖文選單內容，以適應不同的推廣和行銷策略。
這篇 LINE rich menu 教學文章要免費 0 元教你手把手完成綁定自己的 LINE 多層圖文選單！可以先 加入柔兒官方帳號 LINE 看實際效果。
步驟 2
到 LINE Developer 後台拿 Channel access token
到 LINE Developer 後台設定畫面，點選 Create a new provider → Create a Messaging API channel 畫面，把資料填一填後，得到一個 Channel access token，把它複製起來。
如果圖文選單是要套用在現有的官方帳號上，不是要新建立，則就是需要去取得既有帳號的 Channel access token 喔！
步驟 3
到 Postman 網站，或下載免費 Postman 軟體
請到 Postman 的官方網站下載應用程式。
安裝好之後打開軟體，創建一個帳號，你可以新增一個 Collection（資料夾概念），以及點 NEW 準備要來和 API 溝通了。
因為 Postman 是雲端機制，所以寫好的 code 只要有存，換台電腦依然可以登入帳號後使用與繼續。
步驟 4
透過 Postman 取得 richMenuId
現在，我們必須開始刻畫這個圖文選單的背後程式邏輯了！完成後呼叫 LINE 替每一個我們創作的圖文選單取得它的 richMenuId。像我們範本要來製作四層圖文選單，就需要取得四個 richMenuId。
如果你複製範本後有調整設計欄位，或是從頭設計自己美美的圖文選單，可以下載官方的 LINE Bot Designer，它可以協助你拉出圖片上每個按鈕的座標。
不過 LINE 已經不再維護 LINE Bot Designer，bugs 很多，沒辦法完全用它寫出程式碼，只能當作輔助工具，但拉座標和寬高很方便。記得哦，上傳圖文選單圖片後，要點圖片的上方、開始拉框框，動作那些欄位才會出現；一開始傳圖上去時，動作和座標是預設不會出現的！
- 方法與網址
- POST https://api.line.me/v2/bot/richmenu
- Authorization
- 選擇 Bearer，填入步驟二的 channel access token
- Header
- Key 填 Content-Type，Value 填 application/json
- Body
- 選 raw，帶入 JSON 程式碼。送出後會回傳 rich menu id，後面 API 會使用到
{
"size": {
"width": 2500,
"height": 1686
},
"selected": true,
"name": "richmenu-a",
"chatBarText": "Menu",
"areas": [
{
"bounds": {
"x": 1250,
"y": 0,
"width": 1250,
"height": 200
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-b",
"data": "richmenu=b"
}
},
{
"bounds": {
"x": 0,
"y": 220,
"width": 1250,
"height": 730
},
"action": {
"type": "uri",
"uri": "https://www.gentlerdigit.com/"
}
},
{
"bounds": {
"x": 0,
"y": 951,
"width": 1250,
"height": 730
},
"action": {
"type": "uri",
"uri": "https://www.gentlerdigit.com/%E5%A4%9A%E5%B1%A4line%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE"
}
},
{
"bounds": {
"x": 1250,
"y": 220,
"width": 1250,
"height": 730
},
"action": {
"type": "uri",
"uri": "https://www.gentlerdigit.com/home/AI-SEO"
}
},
{
"bounds": {
"x": 1250,
"y": 951,
"width": 1250,
"height": 730
},
"action": {
"type": "uri",
"uri": "https://www.youtube.com/@gentlerdigit"
}
}
]
}{
"size": {
"width": 2500,
"height": 1686
},
"selected": true,
"name": "richmenu-b",
"chatBarText": "Menu",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 1250,
"height": 200
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-a",
"data": "richmenu=a"
}
},
{
"bounds": {
"x": 1450,
"y": 1115,
"width": 1000,
"height": 500
},
"action": {
"type": "uri",
"uri": "https://www.sheriffteaegg.com/"
}
},
{
"bounds": {
"x": 850,
"y": 285,
"width": 830,
"height": 135
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-c",
"data": "richmenu=c"
}
},
{
"bounds": {
"x": 1705,
"y": 285,
"width": 830,
"height": 135
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-d",
"data": "richmenu=d"
}
}
]
}{
"size": {
"width": 2500,
"height": 1686
},
"selected": true,
"name": "richmenu-c",
"chatBarText": "Menu",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 1250,
"height": 200
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-a",
"data": "richmenu=a"
}
},
{
"bounds": {
"x": 1450,
"y": 1115,
"width": 1000,
"height": 500
},
"action": {
"type": "uri",
"uri": "https://wumudesign.com.tw/"
}
},
{
"bounds": {
"x": 0,
"y": 285,
"width": 830,
"height": 135
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-b",
"data": "richmenu=b"
}
},
{
"bounds": {
"x": 1705,
"y": 285,
"width": 830,
"height": 135
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-d",
"data": "richmenu=d"
}
}
]
}{
"size": {
"width": 2500,
"height": 1686
},
"selected": true,
"name": "richmenu-d",
"chatBarText": "Menu",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 1250,
"height": 200
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-a",
"data": "richmenu=a"
}
},
{
"bounds": {
"x": 1450,
"y": 1115,
"width": 1000,
"height": 500
},
"action": {
"type": "uri",
"uri": "https://www.largitdata.com/"
}
},
{
"bounds": {
"x": 0,
"y": 285,
"width": 830,
"height": 135
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-b",
"data": "richmenu=b"
}
},
{
"bounds": {
"x": 850,
"y": 285,
"width": 830,
"height": 135
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-c",
"data": "richmenu=c"
}
}
]
}步驟 5
上傳圖文選單的圖片
這個步驟就要來真正上傳圖片給 LINE 了，上一步驟我們只是在製作選單背後邏輯。所以現在，我們得把剛剛取得的 4 個 richMenuId，必須一一上傳圖片。
首先程式碼建議是分開存哦，尤其新手很容易犯錯誤，所以上一步驟的每一個 richMenuId 都有自己的程式碼，傳圖片也比照辦理。
- 方法與網址
- POST https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content
- Authorization
- 選擇 Bearer，填入步驟二的 channel access token
- Header
- Key 填 Content-Type，Value 填 image/jpeg 或 image/png
- Body
- 選擇 binary，選擇對應的圖文選單上傳。回傳狀態碼 200 與 {} 代表成功
步驟 6
自定義連動 Rich Menu 別名
這個關鍵步驟，我們需要將先前建立圖文選單的別名 Alias 分配給 Rich Menu a、b、c、d，這樣才能互相連動起來。
因為在創建的程式碼中，我們有使用 "type": "richmenuswitch"、"richMenuAliasId": "richmenu-b" 這樣的語法，意思是點選這個區域後 LINE 圖文選單要 switch 去另外一個別名叫做 richmenu-b 的圖文選單。但要是我們沒有在這步驟把定義傳送給 LINE，他根本也不會知道誰是 richmenu-b —— 因為我們寫 richmenu-a 時，richmenu-b 的 richMenuId 還沒生出來。所以這邊算是一個把該「連結」的都連起來的關鍵步驟。
四個 Alias 都要做哦。
- 方法與網址
- POST https://api.line.me/v2/bot/richmenu/alias
- Authorization
- 選擇 Bearer，填入步驟二的 channel access token
- Header
- Key 填 Content-Type，Value 填 application/json
- Body
- 選 raw 帶入 JSON 程式碼。回傳狀態碼 200 與 {} 代表成功
{
"richMenuId": "richmenu-5da3fd3e8f48dd73169074d71b7ce541",
"richMenuAliasId": "richmenu-a"
}步驟 7
設定哪個圖文選單預設出現
即將完成啦！誰是首頁就設定誰。
- 方法與網址
- POST https://api.line.me/v2/bot/user/all/richmenu/
- Body
- 帶入 JSON 程式碼 richMenuID。送出後回傳狀態碼 200 與 {} 代表成功
{
"richMenuId": "richmenu-5da3fd3e8f48dd73169074d71b7ce541"
}步驟 8
成功！換頁的圖文選單出現
回到你的官方帳號，看看有沒有出現製作的 LINE 多層圖文選單呢？
通常如果是第一次裝，只要重新開 LINE，基本上馬上就會出現。官方說不會超過數分鐘。
如果沒有出現新的，可以先試試看把先前做的、沒有在使用的舊選單刪除（可參考步驟四、步驟五的刪除方式說明）。
要是沒有刪除舊的就又疊加綁新的，新好友加入看到就會是新的選單，舊客人看到就會是舊的選單。如果舊客人想要新選單，就要封鎖重加好友，這樣會造成你的 LINE 好友很多困擾。
步驟 9
解除、取消綁定多層圖文選單
有什麼方法可以取消使用多層圖文選單，用回去 LINE 預設的圖文選單嗎？因為 LINE 在顯示選單的順位上，是把使用 Messaging API 的多層圖文選單優先於一般後台預設的圖文選單，所以需要先把多層圖文選單刪除掉，才能使用 LINE 預設的圖文選單。
取消刪除多層圖文選單的話，需要下面三大步驟都要一一執行（一個滾回去最初什麼都沒有的概念）：
- ① 先取消預設的選單
- DELETE https://api.line.me/v2/bot/user/all/richmenu/，Body 是你要取消的選單 richMenuID
- ② 刪除所有的 Alias
- GET https://api.line.me/v2/bot/richmenu/alias/list 取得所有 richMenuAliasId，再逐一 DELETE https://api.line.me/v2/bot/richmenu/alias/{richMenuAliasId}/
- ③ 刪除所有的 richMenuID
- GET https://api.line.me/v2/bot/richmenu/list 取得所有 richMenuId，再逐一 DELETE https://api.line.me/v2/bot/richmenu/{richMenuId}/
以上資訊都可以在 LINE 官方文件中找到更詳細的說明。祝福大家順利！
卡住了？可以找真人帶你走一次
這篇教學是免費的，而且刻意寫得完整 —— 但 Postman、Webhook、alias 連動這幾段，第一次做的人卡住很正常。 如果你不想自己一直試錯，可以直接聯絡我們安排一對一專人線上上課：真人開螢幕帶你把自己的帳號設定完成， 約 2–3 小時，結束後你會知道每一步在做什麼，之後要改也改得動。
也有企業團班，適合團隊裡有多個人需要接手維護的情況。
FAQ
常見問題
- LINE 圖文選單是什麼？
- LINE 圖文選單（Rich Menu）是顯示在 LINE 聊天視窗下方的固定選單，用戶每次打開品牌的 LINE 官方帳號都會看到。基本款從官方後台就能設定；要做到多層、切換與不同版型，則需要透過 LINE 的 Messaging API 設定。
- 做多層圖文選單一定要會寫程式嗎？
- 本文的做法需要使用 Postman 呼叫 LINE Messaging API，但不需要自己寫程式，照著每個步驟填欄位即可。如果不想碰 API，也可以用現成的工具或系統直接拖拉完成。
- 圖文選單的圖片尺寸是多少？
- 必須是以下其中一種：2500×1686、2500×843、1200×810、1200×405、800×540、800×270。本文範例使用 2500×1686。
- 圖片上傳錯了可以直接換嗎？
- 不行。已經上傳貼到選單上的圖片沒辦法取代，必須刪除該 richMenuId 後重新建立一個，再重新上傳新圖。