商品介紹內頁加入購物車按鈕自定義配色(使用CSS)

使用教學

這邊將示範如何修改 自訂商品介紹內頁,裡面的直接購買、 加入購物車 、追蹤商品這三個按鈕的配色。

直接購買按鈕

/* 直接購買 */
div.main_page.page_product_detail .pd-action-group a.btn-main{
  /*背景色*/
   background:#000000;
   /*邊框色*/
   border-color:#aa0000;
   /*文字色*/
   color:#ffffff;
}
/* 直接購買 ,當滑鼠在按鈕上時(hover)*/
div.main_page.page_product_detail .pd-action-group a.btn-main:hover{
   /*背景色*/
   background:#ffffff;
   /*邊框色*/
   border-color:#aa0000;
   /*文字色*/
   color:#000000;
}

加入購物車按鈕

 
/* 加入購物車 */
div.main_page.page_product_detail div.row.pd-action-group.row-no-gutters.mb-md a.btn-info{
   /*背景色*/
   background:#66aa66;
   /*邊框色*/
   border-color:#aa0000;
   /*文字色*/
   color:#ffffff;
}
/*加入購物車,當滑鼠在按鈕上時(hover)*/
div.main_page.page_product_detail div.row.pd-action-group.row-no-gutters.mb-md a.btn-info:hover{
   /*背景色*/
   background:#3333ff;
   /*邊框色*/
   border-color:#aa0000;
   /*文字色*/
   color:#000000;
}

追蹤商品按鈕

 
/* 追蹤商品按鈕 */
div.main_page.page_product_detail div.row.pd-action-group.row-no-gutters.mb-md a.btn-danger{
   /*背景色*/
   background:#aaaa66;
   /*邊框色*/
   border-color:#aa0000;
   /*文字色*/
   color:#ffffff;
}
/* 追蹤商品 ,當滑鼠在按鈕上時(hover)*/
div.main_page.page_product_detail div.row.pd-action-group.row-no-gutters.mb-md a.btn-danger:hover{
   /*背景色*/
   background:#6565aa;
   /*邊框色*/
   border-color:#aa0000;
   /*文字色*/
   color:#000000;
}

設定兩階段登入 – Google Authenticator

為了防止有心人士暴力破解密碼或是使用機器人大量嘗試攻擊,因此OLLSTORE系統添加了兩階段登入機制,雖然會讓登入流程變多,但為了保障資料安全,設定兩階段登入非常有必要。

快速說明兩階段登入的好處,手機綁定Google Authenticator 以後,每隔30秒都會隨機產生6碼數字,在系統後台登入時,則需要將此6碼驗證登入碼輸入。
這樣即使有心人士破解了您的密碼,但他不知道兩階段登入碼的話,則仍然無法登入。

設定方式

首先,登入系統後台,點個人資料

接著,找到裡面的兩階段登入區域,點選[設定兩階段登入]的按鈕。
(再點選之前可以先下載 Google Authenticator App )

系統便會產生一組Auth Token 以及此Auth Token對應的QR Code
您可以在 Google Authenticator App 內以手動填寫Auth Token的方式 或者直接掃描此QR Code

在 Google Authenticator App 添加成功後 ,便會出現一組名為OLLSTORE的動態驗證碼。

接著將驗證碼輸入到上圖[驗證登入碼]的位置,並按下驗證。

驗證通過的話,就會系統就會顯示[已開啟兩階段登入]的畫面

如果需要取消兩階段登入,則需要輸入驗證登入碼,並按下[重設兩階段登入],驗證成功後,將會關閉兩階段登入。

兩階段登入方式

開啟兩階段登入機制以後,未來登入系統都需要將 Google Authenticator App 的驗證碼輸入到下圖的欄位中

促銷活動排除說明

促銷的執行順序為依據優先度(高到低)執行指定商品分類與指定商品的促銷,在執行訂單折扣級的促銷,最後在執行訂單滿額贈的促銷

促銷類型[指定商品] :

多個指定商品的促銷活動都有匹配這個商品的話,會以優先度來判斷,高優先度的促銷若有勾選排除促銷類型[指定商品]的話,則其他優先度較低的便不會符合條件。

促銷類型[指定商品分類]:

有勾選的話,其他指定商品分類的促銷活動就不會匹配此商品

優先級別為「商品管理內的屬性設定」>「促銷活動的指定商品」=「促銷活動的指定商品分類」。
指定商品或指定商品分類的促銷活動依據優先度高低優先執行,若高優先度的促銷活動有勾選排除其他促銷類型,則低優先度的促銷活動將會被排除不被執行。 

會員分級折扣:

此排除只限定 會員管理 > 會員分級的那個折扣率
對單品商品裡面的分級設置的分級價格不影響。(單品分級價格說明)

其中促銷類型為:指定商品、指定商品分類,勾選 排除會員分級折扣則購物車有符合條件的商品則不會有會員分級價。
例如:
會員折扣率為90
指定商品促銷Y 折扣20元
A商品 100元,有符合指定商品促銷(有勾選排除會員分級折扣)
B商品 50元,沒有符合指定商品促銷
則購物車為
A商品 100元
B商品 50元 * 0.9 => 45元會員分級價
指定商品促銷Y 折扣20元

購物車金額為 100 + 45 – 20 = 125元

促銷類型為:訂單滿額 勾選 排除會員分級折扣的計算方式

訂單滿額類型 會從同類型中匹配最優惠的折扣
例如-情況1:
訂單滿額A 折扣5元
訂單滿額B 折扣10元
會員折扣3元

那這樣會符合 訂單滿額B折扣10元 與 會員折扣3元

例如-情況2:
訂單滿額A 折扣5元
訂單滿額B 折扣10元,有勾選排除會員分級折扣
會員折扣3元

那這樣僅會符合 訂單滿額B折扣10元

例如-情況3:
訂單滿額A 折扣5元,有勾選排除會員分級折扣
訂單滿額B 折扣10元,有勾選排除會員分級折扣
會員折扣15元

那這樣會符合 會員折扣15元,另外兩項訂單滿額折扣會不符合

促銷類型[訂單金額]

勾選排除促銷類型訂單金額,則匹配促銷的購物車商品不在符合訂單滿額條件
例如:購物車
A商品 100元 符合指定商品折扣,有勾選排除促銷類型訂單金額
B商品 200元 符合指定商品分類折扣 ,有勾選排除促銷類型訂單金額
C商品 150元
促銷活動內還有兩個訂單滿額折扣
訂單滿額折扣1為滿額100元折扣10元
訂單滿額折扣2為滿額200元折扣25元

上面的購物車 商品A、商品B 因為有符合其他促銷,且對應的促銷有勾選排除促銷類型訂單金額,所以實際訂單滿額只會算商品C,因此只會符合 訂單滿額折扣1 這項促銷。

商品購物金

購物車商品若有符合促銷,且有勾選排除商品購物金,則此項商品無法使用購物金折抵

例如:
A商品 100元,符合促銷,有勾選排除商品購物金
B商品 200元

購物金設定訂單最多可折抵 100元 或 10%
則最多可使用 200元 * 0.1 => 20元的購物金

FB應用程式用戶資料刪除

FB app應用如果出現提示,要求提交用戶資料刪除的連結

可以輸入https://你的網站網址/article/detail/privacy_policy
例如:
https://demo.ollstore.com/article/detail/privacy_policy

記得將下面這個連結內的內容,添加到隱私權政策頁
https://demo.ollstore.com/article/fbappdel

資料刪除說明流程

  1. 進入您 Facebook 個人檔案的應用程式和網站設定頁籤:https://www.facebook.com/settings?tab=applications
  2. 移除您的應用程式。

編輯器使用教學

插入Youtube影片

方式一

複製youtube網址,例如下圖中的
https://www.youtube.com/watch?v=JWDNE9L29ZI

複製網址後,在編輯器內點選[影片]按鈕

將網址貼入,有看到預覽畫面表示成功。

注意!! 以下幾種連結為錯誤格式,會導致影片解析不出來
錯誤格式一: 帶有?v= 以外的參數,例如 &feature=youtu.be
http://https//www.youtube.com/watch?v=JWDNE9L29ZI&feature=youtu.be

正確的格式:
(一). https://www.youtube.com/watch?v=JWDNE9L29ZI
(二). https://www.youtube.com/embed/JWDNE9L29ZI
(三). https://youtu.be/JWDNE9L29ZI (2020.04.06新增格式)

新版購物車機制

原始機制:所有單頁式銷售頁與官網共用同一個購物車

舉例:假設有一件商品 氣炸鍋(A001)
顧客在單頁式銷售頁A 將氣炸鍋(A001)加入購物車 x 4
顧客又到官網再次將氣炸鍋(A001)加入購物車 x 1
後來顧客又進入單頁式銷售頁B 再次將氣炸鍋(A001)加入購物車 x 2
無論顧客進入哪一個頁面購物車內會顯示 氣炸鍋(A001) x 7

新版機制:每個單頁式銷售頁面購物車與官網購物車彼此獨立

舉例:假設有一件商品 氣炸鍋(A001)
顧客在單頁式銷售頁A 將氣炸鍋(A001)加入購物車 x 4
顧客又到官網再次將氣炸鍋(A001)加入購物車 x 1
後來顧客又進入單頁式銷售頁B 再次將氣炸鍋(A001)加入購物車 x 2

顧客進入銷售頁A 購物車會顯示 氣炸鍋(A001) x 4
顧客進入官網 購物車會顯示 氣炸鍋(A001) x 1
顧客進入銷售頁B 購物車會顯示 氣炸鍋(A001) x 2

新機制的好處:

好處1.優化結帳的流暢度

原始的機制會出現 顧客在官網購買了[官網專用商品] 後來又跑到銷售頁去結帳,但含有官網專用商品導致無法結帳,必須要刪除官網專用商品才能結帳。
新版機制的話,顧客在官網購買了[官網專用商品]在進入銷售頁,顧客不會看到從官網加入的商品,顧客可在此頁直接加入該銷售頁商品後直接結帳。之後顧客在回到官網就又會出現當初在官網加入的商品

好處2.可優化單頁式銷售頁業績精準度

原始的機制,顧客在單頁式銷售頁A加入了一些商品,後來又跑到單頁式銷售頁B去結帳,此時會將業績都視為是銷售頁B的。
又或者顧客從官網加入了一些商品,後來跑到某個銷售頁,官網的商品業績也會都視為是該銷售頁的。

新版的機制,則會不同的銷售頁有不一樣的購物車,因此在銷售頁A所加入購物車的商品,業績就只會算在銷售頁A。不會在出現原始機制的情況。

新機制缺點:

顧客在多處加入購物車,就得各別去結帳。無法一次結帳所有購物車。
例如在銷售頁A、銷售頁B、官網都有加入商品。顧客必須到銷售頁A、銷售頁B、官網分開各別結帳。

Facebook DPA設定教學

簡單說明一下什麼是Facebook DPA? 這邊的DPA中文叫「動態廣告」,它的主要功用是,只要您的訪客曾經訪問過您的網站,當用戶在FB瀏覽時,FB動態廣告就能自動地將訪客對您網站有興趣的商品自動的推廣給他。(詳細介紹)

要使用FB DPA動態廣告,需要將您的商品資訊提交給FB。可以採用[人工提交]或[給資料源讓FB定期自動抓取]。接下來,將會演示如何提交商品資訊給Facebook。

繼續閱讀 “Facebook DPA設定教學”