自訂網站頁尾

SHOPLINE_____.jpg

 

為了提供您的網站有更佳的美觀以及讓您的網站呈現更多相關資訊,店家可使用「自訂網站頁尾」功能,您可依自已想要在網站頁尾放置更多的相關資訊。


*請注意:

本功能一旦編輯送出,即無法回到舊的頁尾,請確定送出前仔細檢視。

如果有使用自訂CSS更改商店設計的商店,請在開啟功能時重新檢視CSS設定。

本功能提供的金/物流圖示,請依您既有的金/物流方式放置,請勿隨意放置您網站未提供的服務。

 

 

一、後台操作方式

步驟一

進入「目錄分頁管理」>「網店目錄管理」,最下方有功能提示訊息(如下紅框處),點擊「前往試用」按鈕

_____2018-01-29___1.17.57.png

 

步驟二

進入頁尾編輯頁面,我們提供了一組通用的樣版,可放置您的相關資訊、條款,
還有付款及物流icon,可以調整或選擇刪除重新拉取您要設定的元件

_____2018-05-08___5.38.26.png

 

*請注意:金/物流圖示的部分,請依據您商店中已經有的金/物流方式來放置,請勿隨意放置您網站未提供的服務。

_____2018-01-29___1.08.30.png

  

*若您有需要在文字加上超連結,將頁面導引去另外的畫面,請參考:在文字中插入超連結教學

_____2018-05-11___12.48.19.png

  

步驟三

確認編輯完畢,按下預覽,前往預覽您編輯後的樣式 

注意:請確認你預覽的結果跟您所想改變的樣式為一致,再做保存及送出!!

_____2018-01-29___1.09.41.png

  

步驟四

按下保存後,跳出訊息 確定是否送出,如送出後才會正式將網站的頁尾做改變,
按下取消可返回編輯頁

注意:請確認你預覽的結果跟您所想改變的樣式為一致,再做送出!!

_____2018-01-29___1.09.19.png

 

最後完成,您的網站頁尾即可依您所編輯預覽後的樣式呈現 

 

二、加入社群軟體圖示

我們提供了下列社群軟體圖示icon,可放置您的網站頁尾

_____2018-01-30___11.39.33.png

 

步驟一

點擊 「 A 」 的文字元件,將元件拖曳到畫面中

_____2018-05-08___6.14.59_2.png

 

步驟二

進入文字編輯器,先刪除預設的文字

_____2018-05-08___6.20.24.png

 

步驟三

點擊「</>」View HTML 按鈕,

_____2018-05-08___6.42.14.png

 

貼上圖示的語法

_____2018-05-08___11.34.37.png

 

我們有提供這些社群軟體圖示的語法,
您可以挑選希望放在頁尾中的圖示,複製語法:

圖示

語法

social_facebook.png

 Facebook

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_facebook.png"/>

social_flickr.png

flickr

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_flickr.png"/>

social_google_plus.png

Google Plus

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_google_plus.png"/>

social_instagram.png

 instagram

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_instagram.png"/>

social_line.png

LINE

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_line.png"/>

social_sina_weiboo.png

Sina Weibo

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_sina_weiboo.png"/>

social_tencent_weiboo.png

Tencent  Weibo

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_tencent_weiboo.png"/>

social_twitter.png

twitter

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_twitter.png"/>

social_wechat.png

wechat

<img style="height: 44px; width: auto; display: inline-block;" src="https://static.shoplineimg.co/assets/footer/social_wechat.png"/>

social_whatsapp.png

 whatsapp 

<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 按鈕來預覽圖示,確認無誤之後,按下「確定」> 「保存」

_____2018-05-08___6.55.50.png

  

三、加入金/物流圖示

如同上方加入社群元件圖示的步驟,
請先將 「 A 」 文字元件拖曳到畫面中,並刪除預設的文字。

接著點擊「</>」View HTML 按鈕,貼上預先複製好的圖示語法。

 

*金物流圖示的語法請參考:

圖示

語法

card_visa.png

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"/>

1200px-mastercard-logo.svg______.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"/> 

card_paypal.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"/>

card_unionpay.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"/>

card_linepay.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"/>

card_tw_711_pay.png

7-11

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_tw_711_pay.png"/>

card_tw_fm_pay.png

FamilyMart 

全家

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://static.shoplineimg.co/assets/footer/card_tw_fm_pay.png"/> 

card_taishin.png

台新

<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"/>

card_amex.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"/>

card_ecpay.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"/>

card_jcb.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_Mark_RGB_SMALL_052318.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"/>

AlipayHK-logo.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"/>

card_alipay.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"/>

payme_red_on_white_bg.pngPayMe

<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"/>

payme_white_on_red_bg.pngPayMe

<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-mark.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"/>

Attachment_2_HKMA_FPS_logo_guideline_17aug2018-03.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"/>

 

四、自行更換社群軟體或其他圖示 

若我們上方所提供的社群軟體圖示或其他圖示,
樣式不符合您的需求,您也可以將圖片做更換。

 

步驟一

請先將您的圖片上載到支持外鏈的公開瀏覽的網路相冊中,例如「 Imgur 

(了解 imgur上傳與複製圖片URL的方式,請參考文章 上傳圖片至imgur

*由於 SHOPLINE 已全面升級成 SSL 加密環境,請貼上『https://』的加密網址,
   以避免部分瀏覽器無法顯示非安全性網址圖片。

 

步驟二

完成之後,在瀏覽器新的一頁打開相片,在相片上點滑鼠右鍵,
選擇「複製圖片鏈結」來獲取相片的URL。

_____2017-09-28___2.39.16.png

 

步驟三

從我們上方所提供的語法中,將圖片的連結更改成您的圖片連結,
請更改紅字的部分:

 

社群軟體元件圖示:

<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 按鈕,貼上圖示語法。

 

 

 

 

 

還有其他問題?提交請求

評論