自订网站页尾

SHOPLINE_____.jpg

 

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

* 请注意:

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

如果有使用自订CSS更改商店设计的商店,请在开启功能时重新检视CSS设定。

本功能提供的金/物流图示,请依您既有的金/物流方式放置,请勿随意放置您网站未提供的服务。

 

 

一、后台操作方式

步骤一

进入「目录分页管理」>「网店目录管理」,最下方有功能提示讯息(如下红框处),点击「前往试用」按钮

 

步骤二

进入页尾编辑页面,我们提供了一组通用的样版,可放置您的相关资讯、条款,还有付款及物流 icon,

可以调整或选择删除重新拉取您要设定的元件

 

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

 

*若您有需要在文字加上超连结,将页面导引去另外的画面,请参考:

在文字中插入超连结教学

 

 

步骤三

确认编辑完毕,按下预览,前往预览您编辑后的样式

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

 

 

步骤四

按下保存后,跳出讯息 确定是否送出,如送出后才会正式将网站的页尾做改变,
按下取消可返回编辑页
 

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

_____2018-01-29___1.09.19.png

最后完成,您的网站页尾即可依您所编辑预览后的样式呈现

 

二、加入社群软体图示

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

_____2018-01-30___11.39.33.png

步骤一

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

 

步骤二

进入文字编辑器,先删除预设的文字

 

步骤三

点击</>View HTML 按钮,

 

贴上图示的语法

 

我们有提供这些社群软体图示的语法,您可以挑选希望放在页尾中的图示,复制语法:
 

图示

语法

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

 

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

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

步骤一

请先将您的图片上载到支持外链的公开浏览的网路相册中,例如「Imgur」
 
了解 imgur上传与複製图片URL的方式,请参考文章 上传图片至imgur
 
*由于 SHOPLINE 已全面升级成 SSL 加密环境,图片请贴上『https://』的加密网址,以避免部分浏览器无法显示非安全性网址图片。
 
  

步骤二

完成之后,在浏览器新的一页打开相片,在相片上点滑鼠右键,选择「复制图片链结」来获取相片的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 按钮,贴上图示语法。
 
 
 
 
还有其它问题?提交请求

评论