【教學】圖片彈跳廣告|彈跳視窗自訂連結

最新推出彈跳視窗自訂連結
透過廣告連結,導引消費者前往指定頁面

使用時機:行銷活動宣傳、新推出的商品介紹等等
藉由彈跳出來的廣告文字加深消費者印象,並前往指定頁面,
提高銷售量!!


Step1:登入後台 > 網站維護 > 頁面維護

在要新增彈跳視窗元件的頁面點選異動的放大鏡 (此範例為首頁設定)

Step2: 新增【彈跳視窗自訂連結】元件

在中間元件中新增元件

可以直接搜尋【744】或【彈跳視窗自訂連結】

Step3: 設定【彈跳視窗自訂連結】元件

設定主標題視窗跳出來的圖片以及左右按鍵的連結

※提醒※
1. 左右按鍵都要設定好,前台按鍵才能正常顯示連結!
2.若不想出現按鍵,只要單純展開廣告圖的話,只要上傳圖片即可

以上欄位都設定好後,就完成了哦!
現在您可以點開頁面,確認前台網頁會自動跳出設定的圖片和按鍵!

另有類似的元件可參考: 429 自動開啟廣告/電子報元件 jo

 

【教學】商品變價|指定分類滿額折扣

  ———————————————————————————————
【前台購物車畫面呈現】
下圖為設定「分類滿1000打8折」之前台畫面示意圖,
分類內商品購買小計滿$1000
已符合滿額折扣:$1000打8折 = 800元
因此優惠共折抵:$200元。

【後台功能設定】
以分類「即期品滿1000打8折」做舉例說明,

步驟1:商品管理>商品變價管理>設定分類變價
1)折扣類別:選擇「分類折扣」
2)商品分類:選擇要變價的分類
3)折扣百分比:輸入折扣百分比
4)生日折扣百分比:輸入生日折扣百分比
5)會員群組:選擇參與變價的會員群組
6)起始時間:設定變價活動的起始時間
7)結束時間:設定變價活動的結束時間


步驟2:點選分類後方「鉛筆」做異動

步驟3:限制滿額金額設定1000


按下儲存按鈕後,即完成設定。

若貴司針對此功能有操作上的疑問或者是建議 歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk  (@427sdtqt)

【教學】全館滿額行銷活動|排除參與商品

▲此為進階版、旗艦版、全通路版的行銷功能▲
如有需要升級版本可聯繫LINE@客服
各版本功能比較參考請點

您在規劃全館行銷活動時,是否有遇到特定商品的價格已經很優惠或毛利較低,不想讓該商品參與全館行銷活動的時候呢?

近期,系統有增加一個全新功能,
讓您可以將特定商品排除於全館行銷活動,
設定後,該商品則不會被套用到「全館滿額行銷活動」的滿額計算中。


接下來請跟著以下步驟進行操作!


EC行銷活動 > 全館滿額活動

目前有四種行銷類別可做選擇設定
(1) 全館滿額加贈
(2)全館滿額加購
(3)全館滿額折扣
(4)全館滿額折價

 

舉例:全館滿額1000元加購商品 購買金額區間需設定為:$1000~$999999

可設定是否排除特定商品及分類 選擇「是」,
可選擇依商品分類自行輸入貨號來排除分類或商品參與此檔全館行銷活動

商品分類:下拉選擇商品分類
自行輸入貨號:輸入商品貨號,如有多個商品以,隔開

設定完成後,點選下方藍色設定按鈕

行銷活動基本條件設定完成後,需設定加購商品,
點選右上方管理行銷商品,點選左側選擇商品框框來新增加購品

設定全館滿額加購活動完成後,
網站維護>頁面維護>系統頁>system 購物車>點選放大鏡


新增【全館行銷活動】元件

點選後內容後,新增全館行銷活動

下拉選擇全館行銷活動

【前台購物車頁呈現畫面如下】

 

若貴司針對此功能有操作上的疑問或者是建議 歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk  (@427sdtqt)

 

【教學】Banner廣告圖|設定滿版呈現

您是否覺得您的網站Banner圖不夠吸引消費者的目光呢?
現在請跟著以下步驟就可以輕鬆將Banner圖設定為滿版囉!




【前台呈現樣式示意圖】
▼ Banner未滿版

▼ Banner滿版


********************以下為Banner設定滿版操作步驟 ***********************

  • 步驟 1:頁面新增Banner圖
    網站維護>頁面維護>首頁>點選放大鏡>新增「一頁式banner輪播 jo」元件,上傳Banner圖檔〔建議尺寸寬1920、高度不限〕及編輯元件內容。



  • 步驟 2:設定「一頁式banner輪播 jo」元件滿版
    (1)網站維護>頁面維護>首頁>點選放大鏡
    (2)點選「設定」
    (3)是否滿版欄位選擇「是」
    (4)點選下方藍色按鈕【設定】

  • 步驟 3:設定「頁面」滿版
    (1)網站維護>頁面維護>首頁>點選鉛筆
    (2)頁面滿版欄位選擇「是」
    (3)點選下方藍色按鈕【儲存】



    以上步驟設定完成後,即完成Banner滿版設定囉。

 

若貴司針對此功能有操作上的疑問或者是建議 歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk  (@427sdtqt)

 

【教學】Facebook 網域驗證

因應 iOS14 隱私權更新, 除了啟用 Facebook 轉換 API來補充Facebook 像素成效以外, 也需於Facebook企業管理平台網域驗證,以避免傳送事件受到影響

*請留意:Facebook 像素彙整事件僅支援透過「獨立網域」進行建立,故需使用「獨立網域」進行驗證。

一、登入平台後,請至「企業管理平台設定 > 品牌安全 > 網域」點選「新增」按鈕。

二、在視窗中輸入您網站的網域名稱(domain),填入後請點「新增」 舉例來說若您的網站網址為 https://www.abc.com/ ,請您在視窗欄位填寫 abc.com

三、取得中繼標籤驗證代碼

新增網域後,請點選此網域的「中繼標籤」驗證方式並複製下代碼 Content 中間英數字代碼即可 例如:<meta name=”facebook-domain-verification” content=”p33784kvsccil2pXXXXXXXXXXXXXXXXX” /> (複製紅字部分)

四、至網站後台【網站維護】>【網站擴充元件】進去編輯FB像素

五、於FB像素的 HTML標記驗證代碼欄位貼上複製的content值

六、再回至FB的「企業管理平台設定 > 品牌安全 > 網域」點擊【驗證網域】即可完成

 

若貴司針對此設定有操作上的疑問或者是建議 歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk  (@427sdtqt)

【教學】商品任選組合|提供客製化的組合商品!

*僅特定方案提供此功能,如有使用意願,請洽客服或業務*

因應現代有越來越多可以讓消費者客製化的商品, JOO揪開店推出新功能「商品任選組合」! 假設您是一間甜點店的老闆,您的店內有銷售各種口味的甜甜圈及不同包裝盒~

舉例有一甜點店老闆將迎接雙11的到來,希望以優惠價造福消費者,但同時因網路下單會有運費的成本, 故您想將多個商品組成甜點超值禮盒的方式進行銷售, 但是又不想侷限固定商品的組合,想讓消費者自己挑選自己喜歡的口味
這種時候您就需要【商品任選組合】!!
接下來,我們來看看我們能怎麼顯示吧~

首先我們先來看看前台商品頁怎麼呈現~!

與一般商品不同,於右邊多一個內容物選擇的區域,
消費者可於商品頁內的此內容物選擇區域進行選購,
舉例來說甜點店賣一組甜點組合,
其中有一必選區消費者可任選甜甜圈的口味,及另外一區可挑選甜點的外包裝盒 1.甜點組合內容物為五個甜甜圈
故消費者必須要在必選區內挑選五個「甜甜圈口味」

2.甜點組合除了五個甜甜圈外
消費者可依自身需求是否要挑選一個外包裝盒樣式,進行包裝

3.當消費者尚未將必選區選擇完成前,無法加入購物車
必須完成挑選五個甜甜圈口味才可以加入購物車! 4.消費者已任選完五個口味的甜甜圈
除了蜜糖口味外,其餘兩個口味都需要加購價

5.因甜甜圈口味此必選區均已挑選完成,故我們可以將甜點組合加入購物車囉! 6.消費者若將頁面往下滑也可「展開內容物」進行挑選

7.消費者可一邊查看商品介紹等資訊,一邊於內容物選擇區域進行挑選

接下來我們進到網站後台來看怎麼設定商品任選組合吧~!

網站後台左邊功能列【EC行銷活動】 >【商品任選組合】

依照下方操作流程即可建立一個商品任選組合
1.點選右上角「新增商品任選組合」 2.假設甜點店老闆決定幫網站的商品組成一個禮盒的方式銷售,
首先我們來幫禮盒的名稱取個名字及定價吧!
(1)商品名稱 :甜點超值組合
(2)商品任選組合定價:599
(3)商品任選組合售價:499
完成填寫,點擊「新增」!
3.甜點店老闆新增完一個禮盒商品且希望禮盒可以在雙11限定銷售100組!!
故我們需要在庫存,及商品銷售時間上特別設定~
※其餘主檔內的設定跟原本一般商品設定是一樣的唷!※ 4.接著甜點店老闆要來挑選設定禮盒內的內容物~
點擊「設定任選區」,前往設定商品的任選區 5.進入設定任選區後,於必選 任選區點擊「新增任選區」進入設定!
※任選區可新增多個※ 6.甜點店老闆首先要將甜甜圈組成一個任選區
故任選區名稱填寫 :甜甜圈口味
可選數量填寫 : 5
這樣甜點超值組合內即可任選5個甜甜圈口味囉~! 7.設定完任選區的規則後,
甜點店老闆就可以點「選擇商品」 挑選任選區內的甜甜圈口味啦~ 8.甜點店老闆搜尋”甜甜圈”關鍵字的商品
※可用商品的關鍵字進行搜尋※ 9.甜點店老闆搜尋出的商品可點選「點我加入」的按鈕
將該商品新增至任選區內!

若有父子商品,加入父商品,子商品系統也會自動被加入唷 10.若甜點店老闆覺得「已加入」的甜甜圈商品內,
假設其中一個子商品(草莓口味)非常熱銷!!!
不該讓此子商品(草莓口味)參與任選區,可點「X」移除 挑選完畢後,
點「儲存」即完成選擇商品,
可關閉視窗 11.甜點店老闆完成挑選任選區的商品後,點選放大鏡可查看任選區的商品明細 12.甜點店老闆展開該任選區的商品明細後, 可針對成本較高的子商品(口味)設定加購價!
如其中的「豆香」口味是成本較高的口味,
則需於「豆香」口味的「加購價(紅框處)」欄位設定加購10元
另外若商品買越多,商品成本可能會壓低,
那甜點店老闆可於「成本(藍框處)」欄位,
另外調整該商品在此任選組合內的成本多少唷!
13.若商品任選組合內,有不強制、可讓消費者依自身需求是否需選購的商品區 至「選填」的任選區這邊新增
假設甜點店老闆,甜點超值組合除了可任選五個甜甜圈口味之外,
另外還可以讓消費者自行選擇是否要挑選外包裝盒樣式進行包裝,
這邊甜點店老闆就需要新增包裝盒的任選區~ 14.甜點店老闆於選填任選區這邊
任選區名稱填寫:包裝盒任選區
可選數量填寫 :1 15.設定完任選區的規則後,
甜點店老闆就可以點「選擇商品」 挑選任選區內的外包裝盒商品啦~ 16.甜點店老闆搜尋「包裝盒」關鍵字的商品
※可用商品的關鍵字進行搜尋※ 17.甜點店老闆搜尋出的商品可點選「點我加入”」的按鈕
將該商品新增至任選區內!

若有父子商品,加入父商品,子商品系統也會自動被加入唷 18.完成加入商品後,點「儲存」即完成選擇商品,可關閉視窗 19.甜點店老闆設定完挑選任選區的商品後,點選放大鏡可查看任選區的商品明細 20.老闆展開該任選區的商品明細後, 可針對成本較高的商品設定加購價!
如其中的「黃色小鴨」樣式是成本較高的商品,
則需於「黃色小鴨」樣式的「加購價(紅框處)」欄位設定加購10元~
若商品買越多,商品成本可能會壓低,
那甜點店老闆可於「成本(藍框處)」欄位,
另外調整該商品在此任選組合內的成本多少唷!
 

*僅特定方案提供此功能,如有使用意願,請洽客服或業務*

若貴司針對此功能有操作上的疑問或者是建議 歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk  (@427sdtqt)

 

【教學】Facebook像素|設定Facebook轉換API

因應 iOS14 隱私權更新,
建議啟用 Facebook 轉換 API來傳送事件資料,
補充Facebook 像素成效,
該設定需與FB企業管理平台網域驗證一併做設定,
以避免傳送事件受到影響

如何設定Facebook轉換API ?

1. 請進入企業管理平台  事件管理工具
從右上角選擇 FB 像素所綁定的企業管理平台帳號,
選擇對應的 FB 像素後,
請點選> 設定 > 按下「產生存取權杖」。
*您必須是此企業管理平台帳號的管理員,才能建立存取權杖 2.按下「產生存取權杖」後,請複製「存取權杖」 3.進到網站後台,【網站維護】>【網站擴充元件】>找到「 Facebook 像素
點擊後方鉛筆進入編輯 4.將方才複製的「存取權杖」貼至對應的「存取權杖」欄位即完成設定

如何確認設定成功 ?

1. 進入網站進行瀏覽或購買,就會觸發設定的相關轉換事件
2.前往Facebook事件管理工具
3.在事件內即可看到如下圖「收到的伺服器事件數」代表設定就成功囉 !  

若貴司針對此設定有操作上的疑問或者是建議 歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk  (@427sdtqt)

【教學】客服即時通訊按鈕|拉近距離聯繫

JOO開發新功能,自有客服即時通訊功能,店家可選擇提供聯繫方式以便與瀏覽者連絡,包含line、FB Messenger、whatsapp、電話及e-mail欄位等,於網站放置小圖示,訪客點開後即使用設定好的方式聯絡囉!

一、設定客服即時通訊按鈕

  • 步驟1 
    登入後台>網站維護>網站擴充元件
    使用客服即時通訊功能

  • 步驟2
    開啟使用客服即時按鈕功能
    並選擇置放網頁按鈕位置

  • 步驟3
    設定提供客服聯絡的社交服務
    如不提供的聯繫方式,則不需填寫 ^^

    左側圓形按鈕
    點擊按鈕 可選擇按鈕顏色
    客服按鈕尺寸
    輸入按鈕的尺寸大小 例如 60
    輸入 Line好友連結
    例如 https://lin.ee/66MSHfk
    輸入 Facebook Messenger 聊天室
    例如 https://m.me/+Facebook ID
    輸入whatsapp聯繫號碼
    例如 0900000000
    輸入 電話號碼
    例如 0900000000
    輸入 E-mail
    例如 cs@joo.com.tw

    二、網頁呈現畫面
  • 電腦版畫面

  • 手機版畫面

透過客服即時通訊按鈕功能
讓您與消費者的距離更貼近,聯絡更便利了!


若有任何問題,歡迎詢問LINE@客服唷 ~
LINE@ ID:@427sdtqt,或拿起手機掃描Qrcode加入 ↓

 

【教學】匯出網站訂單|有效管理您的商店庫存

訂單管理可匯出為Excel試算表軟體的.csv 檔。

為順利匯出網站訂單,有效管理線上線下庫存,建議當匯出資料量較多時,使用匯出申請功能將訂單匯出唷。


一、如何匯出並下載訂單清單報表

  • 步驟1  
    登入後台>訂單管理>訂單管理>搜尋訂單>點選匯出申請
    由上方功能列點擊清單匯出申請功能。
    店家可以自行由左側搜尋功能,指定匯出訂單的交易區間、訂單狀態。

 

  • 步驟2

申請後 提示顯示申請成功。

 

  • 步驟3

匯出清單功能,可查看匯出狀態
待系統產生檔案後(約三十分鐘),即可下載。

 

  • 步驟4

至管理員信箱收取檔案開啟密碼。


  • 步驟5

開啟匯出檔案,輸入密碼即可開啟檔案囉!


二、如何篩選訂單並下載訂單報表

  • 步驟1
    訂單管理>出貨單查詢

透過篩選器,篩選出不同運送方式的訂單,匯出訂單報表。
按下「清單匯出申請」,即可以匯出當頁「特定運送方式」訂單,不需經試算表篩選器篩選,直接於訂單報表中查看便利操作。

包含付款方式、出貨日期、交易日期、付款日期亦可使用篩選器篩選按照需求匯出訂單!


若有任何問題,歡迎詢問LINE@客服唷 ~
LINE@ ID:@427sdtqt,或拿起手機掃描Qrcode加入 ↓

 

【教學】自適應 YOUTUBE 影片|隨螢幕比例RWD

直接使用YouTube產生的嵌入碼,使用行動裝置瀏覽網頁會有爆版的情況,

為了讓YouTube影片在電腦與手機都能讓完整呈顯,需要對這段原始碼做些微調整!

 

使用YouTube的嵌入碼,如下:

 

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/XbEJlBYiCHM” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

↑這段嵌入碼是尚未修改過的

直接貼進網頁並用手機瀏覽時會如下圖呈現:

難到不能讓影片也隨著螢幕同比例RWD嗎?

「可以的!」只要對YouTube產生的嵌入碼,稍作修改就沒問題囉!

 

【步驟一:將以下原始碼完整的複製下來】

 

<div class=”ytb_video_box”>

<div class=”ytb_video_container”>

 

<!–嵌入碼貼在這下面–>

 

<!–嵌入碼貼在這上面–>

 

</div>

</div>

 

<style>

.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}

.ytb_video_container { max-width:1180px; margin:0 auto; position:relative; height:658px; overflow:hidden;}

.ytb_video_container iframe,.ytb_video_container object,.ytb_video_container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:658px;}

@media screen and (max-width:1280px) { 

.ytb_video_container{ padding-bottom:56%; height:0;}

}

</style>

 

【步驟二:把YouTube產生的嵌入碼,一起貼進來】

 

<div class=”ytb_video_box”>

<div class=”ytb_video_container”>

 

<!–嵌入碼貼在這下面–>

 

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/XbEJlBYiCHM” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

<!–嵌入碼貼在這上面–>

 

</div>

</div>

 

<style>

.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}

.ytb_video_container { max-width:1180px; margin:0 auto; position:relative; height:658px; overflow:hidden;}

.ytb_video_container iframe,.ytb_video_container object,.ytb_video_container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:658px;}

@media screen and (max-width:1280px) { 

.ytb_video_container{ padding-bottom:56%; height:0;}

}

</style>

 

使用修改後的原始碼,影片就能如下圖一樣完整呈現囉!

【進階調整】

如何修改影片的最大寬度?

 

找到以下這一段↓

.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}

 

黃色標記的地方可以隨適合的寬度自行調整喔!