为了提供您的网站有更佳的美观以及让您的网站呈现更多相关资讯,店家可使用「商店页尾」功能,依自已想要在网站页尾放置更多的相关资讯
一、后台操作方式
步骤一
若您尚在使用「旧版页尾」,最下方有功能提示讯息(如下红框处),点选「前往试用」按钮,方可进入编辑页面。
*本功能一旦编辑送出,即无法回到旧的页尾,请确定送出前仔细检视。
若您已经在使用「新版页尾」的话,点选「编辑」按钮进入编辑页面。
步骤二
进入页尾编辑页面,我们提供了一组通用的样版,可放置您的相关资讯、条款,还有付款及物流 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"/>
评论