管理商店页尾|网店目录管理

SHOPLINE_____.jpg

 

为了提供您的网站有更佳的美观以及让您的网站呈现更多相关资讯,店家可使用「商店页尾」功能,依自已想要在网站页尾放置更多的相关资讯

 

 

 

一、后台操作方式

步骤一

若您尚在使用「旧版页尾」,最下方有功能提示讯息(如下红框处),点选「前往试用」按钮,方可进入编辑页面。

 

*本功能一旦编辑送出,即无法回到旧的页尾,请确定送出前仔细检视。

 

若您已经在使用「新版页尾」的话,点选「编辑」按钮进入编辑页面。

_____2020-03-31___11.28.46.png

 

步骤二

进入页尾编辑页面,我们提供了一组通用的样版,可放置您的相关资讯、条款,还有付款及物流 icon,可以调整或选择删除重新拉取您要设定的元件

 

 

*请注意:金/物流图示的部分,请依据您商店中已经有的金/物流方式来放置,请勿随意放置您网站未提供的服务。

 

步骤三

编辑完毕,按下预览,前往预览您编辑后的样式 ,确认无误,点选「保存」您的网站页尾即会依您所编辑预览后的样式呈现 。

注意:请确认你预览的结果跟您所想改变的样式为一致,再做「保存」!

 

 

 

二、加入社群软体图示

我们提供了下列社群软体图示icon,可放置您的网站页尾

_____2018-01-30___11.39.33.png

步骤一

点击 "A" 的文字元件,将元件拖曳到画面中

 

步骤二

點選「</>」View HTML 按鈕

_____2020-03-31___11.42.03.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 按钮来预览图示,确认无误之后,按下「确定」> 「保存」
 
 
 

三、加入金/物流图示

如同上方加入社群元件图示的步骤,请先将 "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"/>

 

 

四、自行更换社群软体或其他图示

若我们上方所提供的社群软体图示或其他图示,样式不符合您的需求,您也可以参考以下做法将图片做更换。
 

步骤一

请先将图片上载 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 按钮,贴上图示语法。
 
 
 
 
还有其它问题?提交请求

评论