行銷圖片彈窗
在公開網站顯示活動圖片與可點擊區域。
共 5 項操作・20 個步驟・最後複驗 2026-10-03
從哪裡進入
網站後台 → 網站設定 → 上方分頁「行銷圖片彈窗」
照著下方圖文逐步完成
重點摘要（TL;DR）
彈窗可依延遲、捲動或離站意圖出現，桌機與手機可分別選「自動彈出視窗」或「角落小標籤」，並控制同一位訪客看到的頻率。
什麼時候會用到
- 要宣傳限時活動或重要公告
- 想讓逛網站的人一眼看到檔期優惠，並點進活動頁或商品頁
開始前先準備
- • 準備桌機與手機圖片，並確認素材權利
第一次設定，照這個順序做
共 5 站。每一站都連到詳細步驟，做完一站再往下。
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
上傳桌機與手機圖片
彈窗會依裝置顯示適合桌機或手機比例的活動圖片。
- 1
這一步要做
到網站後台的「行銷圖片彈窗」，在「桌機／通用主圖片」上傳主圖片。
為什麼：主圖片是彈窗唯一必填的素材，桌機和手機都會先用這一張。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
桌機預覽區會顯示主圖片。 - 1操作
- 位置：
- 畫面上的「桌機／通用主圖片」。
- 動作：
- 到網站後台的「行銷圖片彈窗」，在「桌機／通用主圖片」上傳主圖片。
- 結果：
- 桌機預覽區會顯示主圖片。
完成後會看到
桌機預覽區會顯示主圖片。
- 2
這一步要做
若手機要用不同構圖，在「手機專用圖片（選填）」上傳直式或窄版圖片。
為什麼：寬版主圖在手機上會縮得很小，直式圖才看得清楚。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
切到手機設定時會顯示手機專用圖片；留空則沿用主圖片。 - 2操作
- 位置：
- 畫面上的「手機專用圖片（選填）」。
- 動作：
- 若手機要用不同構圖，在「手機專用圖片（選填）」上傳直式或窄版圖片。
- 結果：
- 切到手機設定時會顯示手機專用圖片；留空則沿用主圖片。
完成後會看到
切到手機設定時會顯示手機專用圖片；留空則沿用主圖片。
做錯或略過會怎樣
手機專用圖片構圖不同時，連結區域通常會對不上，記得到「圖片連結區域」切到「手機」重新調整。
- 3
這一步要做
在「圖片替代文字」寫出圖片重點，例如「週年慶全館九折」。
為什麼：這段文字會給螢幕閱讀器讀出來；選用角落小標籤又沒寫標籤文字時，也會拿它當標籤。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
圖片無法顯示或被輔助工具讀取時，仍有可理解的文字。 - 3操作
- 位置：
- 畫面上的「圖片替代文字」。
- 動作：
- 在「圖片替代文字」寫出圖片重點，例如「週年慶全館九折」。
- 結果：
- 圖片無法顯示或被輔助工具讀取時，仍有可理解的文字。
完成後會看到
圖片無法顯示或被輔助工具讀取時，仍有可理解的文字。
- 4
這一步要做
按「儲存設定」。
為什麼：圖片要存下來，下一步框選連結區域時才看得到。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
圖片與替代文字會被保存。 - 4操作
- 位置：
- 畫面上的「儲存設定」。
- 動作：
- 按「儲存設定」。
- 結果：
- 圖片與替代文字會被保存。
完成後會看到
圖片與替代文字會被保存。
注意事項
- • 桌機／通用主圖片是開啟彈窗的必要資料。
- • 圖片不要只放小字；手機縮小後仍要看得清楚。
在圖片上框選連結熱區
訪客點圖片中的指定區域，就能前往活動頁、商品頁或其他網址。
- 5
這一步要做
在「圖片連結區域」先選「桌機」或「手機」。
為什麼：整張圖本身不能點，只有框出來的區域可以點，所以要先決定在哪個裝置的圖上框。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
畫面會顯示該裝置使用的圖片。 - 5操作
- 位置：
- 畫面上的「桌機」。
- 動作：
- 在「圖片連結區域」先選「桌機」或「手機」。
- 結果：
- 畫面會顯示該裝置使用的圖片。
完成後會看到
畫面會顯示該裝置使用的圖片。
- 6
這一步要做
按「框選連結區域」，在圖片上拖曳框出可點擊範圍。
為什麼：一張圖最多可以框 12 個區域；框好後可以直接拖動換位置，或拉右下角的小方塊調整大小。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
圖片上會出現一個熱區框與對應設定欄。 - 6操作
- 位置：
- 畫面上的「框選連結區域」。
- 動作：
- 按「框選連結區域」，在圖片上拖曳框出可點擊範圍。
- 結果：
- 圖片上會出現一個熱區框與對應設定欄。
完成後會看到
圖片上會出現一個熱區框與對應設定欄。
- 7
這一步要做
輸入「區域說明」與「前往連結」，需要時勾選「在新分頁開啟」。
為什麼：區域說明和網址是桌機、手機共用的，只有位置分開。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
該熱區會記住用途、網址與開啟方式。 - 7操作
- 位置：
- 畫面上的「前往連結」。
- 動作：
- 輸入「區域說明」與「前往連結」，需要時勾選「在新分頁開啟」。
- 結果：
- 該熱區會記住用途、網址與開啟方式。
完成後會看到
該熱區會記住用途、網址與開啟方式。
做錯或略過會怎樣
站內頁面寫成像 /products 這樣的路徑，站外網址要以 https:// 開頭；其他格式儲存時會被擋下。
- 8
這一步要做
桌機與手機圖片構圖不同時，分別切換「桌機」、「手機」重新框選，再按「儲存設定」。
為什麼：手機位置預設沿用桌機；另外上傳了手機圖時，框通常要重拉。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
兩種裝置會各自使用正確位置的可點擊區域。 - 8操作
- 位置：
- 畫面上的「手機」。
- 動作：
- 桌機與手機圖片構圖不同時，分別切換「桌機」、「手機」重新框選，再按「儲存設定」。
- 結果：
- 兩種裝置會各自使用正確位置的可點擊區域。
完成後會看到
兩種裝置會各自使用正確位置的可點擊區域。
做錯或略過會怎樣
想放棄手機的調整，選取該區域後按「手機位置改回沿用桌機」。
注意事項
- • 啟用彈窗前至少要有一個有效熱區。
- • 連結請用完整網址或正確站內路徑，並避免讓熱區蓋住關閉按鈕。
設定出現方式與觸發時機
桌機與手機各自決定要自動彈出還是放一顆角落小標籤，並在進站、停留、捲動或準備離開時出現。
- 9
這一步要做
在「出現方式」分別替「桌機」與「手機」選「自動彈出視窗」或「角落小標籤」；選了自動彈出視窗時，可以再勾「視窗關掉後，在角落留一顆小標籤」。
為什麼：同一張直式海報在手機上會蓋滿整個螢幕；角落小標籤讓客人想看再點開，不打斷逛店。
完成後會看到
選了角落小標籤時，下方會出現「小標籤文字」與「標籤位置（左下角／右下角）」。
做錯或略過會怎樣
標籤放「右下角」可能和浮動聯絡按鈕或購物車按鈕疊在一起。
- 10
這一步要做
在「顯示規則」找到「何時出現」。
為什麼：「何時出現」決定彈窗打斷客人的時機；全部用角落小標籤時，這裡改叫「小標籤何時出現」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
畫面會顯示可選的觸發方式。 - 10操作
- 位置：
- 畫面上的「何時出現」。
- 動作：
- 在「顯示規則」找到「何時出現」。
- 結果：
- 畫面會顯示可選的觸發方式。
完成後會看到
畫面會顯示可選的觸發方式。
- 11
這一步要做
選「進站立即顯示」、「停留幾秒後」、「捲動到指定進度」或「準備離開頁面時」。
為什麼：停留與捲動都需要一個門檻；頁面很短、捲不動時，選捲動進度會直接出現。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
下方會顯示該方式需要的秒數或捲動百分比。 - 11核對
- 位置：
- 畫面上的「延遲秒數」。
- 動作：
- 選「進站立即顯示」、「停留幾秒後」、「捲動到指定進度」或「準備離開頁面時」。
- 結果：
- 下方會顯示該方式需要的秒數或捲動百分比。
完成後會看到
下方會顯示該方式需要的秒數或捲動百分比。
- 12
這一步要做
若選停留或捲動，輸入秒數或百分比，再按「預覽彈窗」。
為什麼：觸發時機要儲存後才會套用到公開網站。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
預覽會以目前圖片、尺寸與熱區顯示彈窗。 - 12操作
- 位置：
- 畫面上的「預覽彈窗」。
- 動作：
- 若選停留或捲動，輸入秒數或百分比，再按「預覽彈窗」。
- 結果：
- 預覽會以目前圖片、尺寸與熱區顯示彈窗。
完成後會看到
預覽會以目前圖片、尺寸與熱區顯示彈窗。
- 13
這一步要做
按「儲存設定」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
公開彈窗會依選定時機判斷是否出現。 - 13操作
- 位置：
- 畫面上的「儲存設定」。
- 動作：
- 按「儲存設定」。
- 結果：
- 公開彈窗會依選定時機判斷是否出現。
完成後會看到
公開彈窗會依選定時機判斷是否出現。
注意事項
- • 「準備離開頁面時」在手機無法偵測滑鼠離開，系統會改用約 8 秒後顯示。
- • 進站立即顯示較容易打擾訪客，先確認活動真的重要。
- • 「彈窗尺寸」有小（最大 480px）、中（最大 640px）、大（最大 840px）三種，在「顯示規則」最上方。
設定顯示頻率
同一位訪客不會被過度重複打擾，或可依活動需要每次顯示。
- 14
這一步要做
在「顯示規則」找到「同一位訪客多久再自動彈出一次」。
為什麼：預設是「每次瀏覽工作階段一次」：這次逛網站只被打斷一次，換頁不會再跳。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
畫面會顯示頻率選項。 - 14核對
- 位置：
- 畫面上的「同一位訪客多久再自動彈出一次」。
- 動作：
- 在「顯示規則」找到「同一位訪客多久再自動彈出一次」。
- 結果：
- 畫面會顯示頻率選項。
完成後會看到
畫面會顯示頻率選項。
做錯或略過會怎樣
桌機和手機都選了角落小標籤時，這個選項不會出現；小標籤會一直在，直到客人按 ×。
- 15
這一步要做
選「每次開啟頁面」「每次瀏覽工作階段一次」「每 24 小時一次」「每 7 天一次」或「只顯示一次」。
為什麼：「看過了沒」記在客人自己的瀏覽器裡，不是記在你的後台。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
系統會依所選頻率記住這位訪客是否已看過。 - 15操作
- 位置：
- 畫面上的「同一位訪客多久再自動彈出一次」。
- 動作：
- 選「每次開啟頁面」「每次瀏覽工作階段一次」「每 24 小時一次」「每 7 天一次」或「只顯示一次」。
- 結果：
- 系統會依所選頻率記住這位訪客是否已看過。
完成後會看到
系統會依所選頻率記住這位訪客是否已看過。
- 16
這一步要做
按「儲存設定」。
為什麼：每次按儲存都會被當成一檔新活動，之前「已經看過」的紀錄不再算數，所有人都會再看到一次。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
新的顯示頻率會套用到公開網站。 - 16操作
- 位置：
- 畫面上的「儲存設定」。
- 動作：
- 按「儲存設定」。
- 結果：
- 新的顯示頻率會套用到公開網站。
完成後會看到
新的顯示頻率會套用到公開網站。
注意事項
- • 頻率會依訪客瀏覽器的儲存資料判斷；清除網站資料或換瀏覽器後會被視為新訪客。
- • 重要公告若選「只顯示一次」，訪客關掉後不會再看到。
啟用後用無痕視窗測試
你能用全新訪客的狀態確認彈窗會出現、可關閉，且熱區連結正確。
- 17
這一步要做
確認已有「桌機／通用主圖片」與至少一個有效熱區，再勾選「在公開網站顯示行銷圖片彈窗」。
為什麼：啟用前一定要有主圖片和至少一個連結區域；想先存半成品，就先不要勾。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「儲存」時會檢查：沒有主圖片或連結區域會提示「啟用前請先上傳主圖片」或「啟用前請至少建立一個連結區域」，補齊後才存得進去。 - 17操作
- 位置：
- 畫面上的「在公開網站顯示行銷圖片彈窗 關閉時保留圖片與連結設定。啟用前必須有主圖片和至少一個有效連結區域。」。
- 動作：
- 確認已有「桌機／通用主圖片」與至少一個有效熱區，再勾選「在公開網站顯示行銷圖片彈窗」。
- 結果：
- 按「儲存」時會檢查：沒有主圖片或連結區域會提示「啟用前請先上傳主圖片」或「啟用前請至少建立一個連結區域」，補齊後才存得進去。
完成後會看到
按「儲存」時會檢查：沒有主圖片或連結區域會提示「啟用前請先上傳主圖片」或「啟用前請至少建立一個連結區域」，補齊後才存得進去。
做錯或略過會怎樣
之後想暫停活動，取消勾選再儲存即可，圖片與連結區域都會保留。
- 18
這一步要做
按「儲存設定」，再用瀏覽器開啟新的無痕視窗。
為什麼：無痕視窗沒有任何「已經看過」的紀錄，看到的就是第一次來的客人看到的。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
無痕視窗會以尚未看過彈窗的新訪客狀態開啟。 - 18操作
- 位置：
- 畫面上的「儲存設定」。
- 動作：
- 按「儲存設定」，再用瀏覽器開啟新的無痕視窗。
- 結果：
- 無痕視窗會以尚未看過彈窗的新訪客狀態開啟。
完成後會看到
無痕視窗會以尚未看過彈窗的新訪客狀態開啟。
- 19
這一步要做
進入公開網站，依設定等待秒數、捲動或移動滑鼠到頁面上緣。
為什麼：要真的達到觸發條件才會出現：秒數等完、捲到設定進度，或在桌機把滑鼠從頁面上緣移出去。
完成後會看到
彈窗會在設定的觸發時機出現。
- 20
這一步要做
點每個熱區與關閉按鈕。
為什麼：後台「預覽彈窗」點連結區域不會跳頁，連結對不對只能在公開網站上點才知道。
完成後會看到
熱區會前往正確網址，關閉按鈕會收起彈窗。
注意事項
- • 「預覽彈窗」適合看外觀；無痕視窗才適合驗證觸發與頻率。
- • 測試外部連結前先確認網址安全且已上線。
遇到問題先看這裡
- 彈窗沒有出現？
- 檢查是否已啟用、目前是否符合觸發條件，以及瀏覽器是否因顯示頻率記錄而暫時不再顯示；可用無痕視窗重新測試。
- 在購物車、結帳或登入頁看不到彈窗？
- 這是刻意的。購物車與結帳、付款結果、預約結果、登入、註冊、忘記密碼與確認信箱這些頁面，客人正在完成一件事，平台不會在那裡跳出活動圖。到首頁或其他一般頁面就看得到。
- 按「儲存設定」出現「啟用前請先上傳主圖片」或「啟用前請至少建立一個連結區域」？
- 啟用的條件是要有主圖片，而且至少一個連結區域。補上之後再存；只想先存半成品，就先取消勾選「在公開網站顯示行銷圖片彈窗」再儲存。
- 手機上彈窗把整個畫面都蓋住了？
- 直式海報在手機上本來就容易蓋滿螢幕。到「出現方式」把手機改成「角落小標籤」，客人想看再點開；或另外上傳「手機專用圖片（選填）」，再把「彈窗尺寸」調小。
- 付款完成頁和會員中心那張活動圖在哪裡設定？
- 那是「活動橫幅」，跟行銷圖片彈窗是兩個功能。彈窗是全站的；活動橫幅只出現在付款完成頁與會員中心，設定在「網路商店 › 優惠 › 活動橫幅」。
逐步操作