為了讓您的網站更美觀，同時可以呈現更多相關資訊，店家可使用「商店頁尾」功能，依自已想要在網站頁尾放置更多的相關資訊。
一、後台操作方式：
步驟一
若您尚在使用「舊版頁尾」，在「網店目錄」頁面最下方有功能提示訊息(如下紅框處)，點選「前往試用」按鈕，方可進入編輯頁面。
＊注意：本功能一旦編輯送出，即無法回到舊的頁尾，請確定送出前仔細檢視。
[即將推出] 新版頁面編輯器
SHOPLINE 即將推出新版頁面編輯器，大幅優化進階分頁的設計功能，可以更自由地設計商店公告欄、頁首頁尾、以及多達六種元件組合，助您創造獨一無二的網店版面。
首先在進入「SHOPLINE 後台 > 網店設計 > 網店分頁」，點按右側的「進階分頁」按鈕進入新版頁面編輯器。
進入編輯頁面後，點按「頁尾」按鈕。
畫面將跳出新版頁尾編輯器的啟用通知，點按「啟用新頁尾編輯器」。
確認啟用新版頁尾編輯器，請點選「啟用」。後續詳細步驟請參考這篇文章。
步驟二
進入頁尾編輯頁面，SHOPLINE 提供了一組通用的樣版，可放置您的相關資訊、條款，還有付款及物流 圖示，可以調整或選擇刪除重新拉取您要設定的元件，相關各個元件的功能教學請點此了解。
＊注意：金/物流圖示的部分，請依據您商店中已經有的金/物流方式來放置，請勿隨意放置您網站未提供的服務。
步驟三
編輯完畢，按下預覽，前往預覽您編輯後的樣式，確認無誤，點選「保存」後，您的網站頁尾即會依您所編輯預覽後的樣式呈現。
＊注意：請確認你預覽的結果跟您所想改變的樣式為一致，再點選「保存」。
二、加入社群軟體圖示
SHOPLINE 提供了下列社群軟體圖示，可放置於您的網站頁尾。
步驟一
點選 「 A 」 的文字元件，將元件拖曳到畫面中。
步驟二
點選「</>」View HTML 按鈕。
備註：點擊之後，此欄位內容將改以 HTML 語法顯示，可參考此連結文字編輯器查看 HTML。
貼上圖示的語法。
SHOPLINE 提供以下社群軟體圖示的語法，您可以挑選希望放在頁尾中的圖示，複製其語法：
|
圖示 |
語法 |
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_facebook.png"/>
|
|
Flickr |
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_flickr.png"/>
|
|
Google Plus |
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_google_plus.png"/>
|
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_instagram.png"/>
|
|
LINE |
<img style="height: 44px; width: auto; display: inline-block;" src="https://support.shoplineapp.com/hc/article_attachments/360001582523/social_line.png"/> |
|
新浪微博 |
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_sina_weiboo.png"/>
|
|
騰訊微博 |
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_tencent_weiboo.png"/>
|
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_twitter.png"/>
|
|
微信 |
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_wechat.png"/>
|
|
|
<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_whatsapp.png"/>
|
＊提醒您：
一組 <img style=........ .png"/> 即表示一小段完整個圖示語法，您可以看到上面有好幾個語法片段，都表示不同的圖示。複製語法時，請您由 <img style=........ .png"/> 整段複製下來。
步驟三：確認無誤後保存
貼上語法後，再次點按「</>」View HTML 按鈕來預覽圖示，確認無誤之後，點選「確定」> 「保存」。
三、加入金/物流圖示
如同上方加入社群元件圖示的步驟，請先將「 A 」文字元件拖曳到畫面中，接著點選「</>」View HTML 按鈕，貼上預先複製好的圖示語法。
＊注意：金/物流圖示的部分，請依據您商店中已經有的金/物流方式來放置，請勿隨意放置您網站未提供的服務。
金物流圖示的語法請參考：
|
圖示 |
語法 |
|
SHOPLINE Payments |
<img height="40" style="max-height:40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/62297669a344ad002979d725/original.png"/> |
|
VISA (白字去背) |
<img height="20" style="max-height: 20px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/627b756d7cb363001b9aa69e/original.png"/> 建議非白底背景使用。 |
|
VISA (藍字白底) |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_visa.png"/>
|
|
Mastercard |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_master.png"/>
|
|
PayPal |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_paypal.png"/>
|
|
UnionPay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_unionpay.png"/>
|
|
LINE Pay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://support.shoplineapp.com/hc/article_attachments/360001578646/card_linepay.png"/> |
|
7-11 |
|
|
FamilyMart 全家 |
|
|
台新 |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_taishin.png"/>
|
|
American Express |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_amex.png"/>
|
|
綠界 |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_ecpay.png"/>
|
|
JCB |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_jcb.png"/> |
|
Apple Pay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/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://shoplineimg.com/assets/footer/card_alipay_hk.png"/> |
|
Alipay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_alipay.png"/> |
|
|
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/62943ef1d23b980015241eff/original.png"/> |
|
|
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/62943ef1121e54002161a747/original.png"/> |
|
Google Pay |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_google_pay.png"/> |
|
|
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src=" https://shoplineimg.com/assets/footer/card_fps_en.png"/> |
|
八達通 |
<img height="40" style="max-height: 60px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/628f12bb509075001bcd5a7c/original.png"/> |
|
銀角零卡 |
<img height="50" style="max-height: 70px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/628f138f43783a00214def9f/original.png"/> |
|
Atome |
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/628f11d6b4a1c700152935da/original.png"/> |
PayMe
PayMe
轉數快
四、自行更換社群軟體或其他圖示
若上方所提供的社群軟體圖示或其他圖示，樣式不符合您的需求，您也可以參考以下做法更換圖片。
步驟一
請先將圖片上傳 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 按鈕，貼上圖示語法。
五、為文字＆圖示加入超連結
使用文字元件設定好內容之後，不論文字或是圖示可以直接匡選並在工具列點選「連結」按鈕來設定超連結，詳細操作步驟請點此了解。
延伸閱讀
評論