為了提供您的網站有更佳的美觀以及讓您的網站呈現更多相關資訊,店家可使用「商店頁尾」功能,依自已想要在網站頁尾放置更多的相關資訊。
一、後台操作方式:
步驟一
若您尚在使用「舊版頁尾」,最下方有功能提示訊息(如下紅框處),點選「前往試用」按鈕,方可進入編輯頁面。
*本功能一旦編輯送出,即無法回到舊的頁尾,請確定送出前仔細檢視。
若您已經在使用「新版頁尾」的話,點選「編輯」按鈕進入編輯頁面。
步驟二
進入頁尾編輯頁面,我們提供了一組通用的樣版,可放置您的相關資訊、條款,還有付款及物流 icon,可以調整或選擇刪除重新拉取您要設定的元件,相關各個元件的功能教學請點此了解。
*金/物流圖示的部分,請依據您商店中已經有的金/物流方式來放置,請勿隨意放置您網站未提供的服務。
步驟三
編輯完畢,按下預覽,前往預覽您編輯後的樣式 ,確認無誤,點選「保存」您的網站頁尾即會依您所編輯預覽後的樣式呈現 。
注意:請確認你預覽的結果跟您所想改變的樣式為一致,再做「保存」!
二、加入社群軟體圖示
我們提供了下列社群軟體圖示 icon,可放置您的網站頁尾
步驟一
點選 「 A 」 的文字元件,將元件拖曳到畫面中
步驟二
點選「</>」View HTML 按鈕
貼上圖示的語法
我們有提供這些社群軟體圖示的語法,您可以挑選希望放在頁尾中的圖示,複製語法:
圖示 |
語法 |
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_facebook.png"/>
|
flickr |
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_flickr.png"/>
|
Google Plus |
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_google_plus.png"/>
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_instagram.png"/>
|
LINE |
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_line.png"/>
|
Sina Weibo |
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_sina_weiboo.png"/>
|
Tencent Weibo |
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_tencent_weiboo.png"/>
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_twitter.png"/>
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_wechat.png"/>
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_whatsapp.png"/>
|
*提醒您:
一組 <img style=........ .png"/> 即表示一小段完整個圖示語法,您可以看到上面有好幾個語法片段,都表示不同的圖示。複製語法時,請您由 <img height=........ .png"/> 整段複製下來。
步驟三:確認無誤後保存
貼上語法後,再次點擊「</>」View HTML 按鈕來預覽圖示,確認無誤之後,按下「確定」> 「保存」
三、加入金/物流圖示
如同上方加入社群元件圖示的步驟,請先將 「 A 」 文字元件拖曳到畫面中,接著點選「</>」View HTML 按鈕,貼上預先複製好的圖示語法。
*金/物流圖示的部分,請依據您商店中已經有的金/物流方式來放置,請勿隨意放置您網站未提供的服務。
金物流圖示的語法請參考:
圖示 |
語法 |
VISA |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_visa.png"/>
|
Master Card |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_master.png"/>
|
Paypal |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_paypal.png"/>
|
UnionPay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_unionpay.png"/>
|
LINE Pay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_linepay.png"/>
|
7-11 |
|
FamilyMart 全家 |
|
台新 |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_taishin.png"/>
|
American Express |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_amex.png"/>
|
綠界 |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_ecpay.png"/>
|
JCB |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_jcb.png"/>
|
Apple Pay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_apple_pay_with_border.png"/>
|
Alipay HK |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_alipay_hk.png"/>
|
Alipay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_alipay.png"/>
|
|
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/static/web/assets/footer/payme_red_on_white_bg.png"/>
|
|
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/static/web/assets/footer/payme_white_on_red_bg.png"/> |
Google Pay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_google_pay.png"/> |
轉數快 |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_fps.png"/> |
四、自行更換社群軟體或其他圖示
若我們上方所提供的社群軟體圖示或其他圖示,樣式不符合您的需求,您也可以參考以下做法將圖片做更換。
步驟一
請先將圖片上載 SHOPLINE 提供的圖床空間「圖片庫」中
(了解圖片庫上傳與複製圖片 URL 的方式,請參考文章 圖片庫)
步驟二
從我們上方所提供的語法中,將圖片的連結更改成您的圖片連結,請更改紅字的部分:
社群軟體元件圖示:
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_facebook.png"/>
金物流圖示:
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_visa.png"/>
步驟三:
如同加入社群軟體元件圖示、金物流圖示的步驟 ,點擊「</>」View HTML 按鈕,貼上圖示語法。
五、為文字&圖示加入超連結
使用文字元件設定好內容之後,不論文字或是圖示可以直接匡選並在工具列點選「連結」按鈕來設定超連結,詳細操作步驟請點此了解
評論