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

Avatar
SHOPLINE TW Copywriters

簡中＿EC + SC + POS (简中).png

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

 

一、后台操作方式

步骤一

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

＊注意：本功能一旦编辑送出，即无法回到旧的页尾，请确定送出前仔细检视。

 

若您已经在使用「新版页尾」的话，在「商店页尾」栏位右侧点选「编辑」按钮进入编辑页面。

_____2020-03-31___11.28.46.png

 

步骤二

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

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

 

 

步骤三

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

＊注意：请确认你预览的结果跟您所想改变的样式为一致，再点选「保存」。

___2022-05-13___1.39.34.png

 

二、加入社群软体图示

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

_____2018-01-30___11.39.33.png

步骤一

点击「A」的文字元件，将元件拖曳到画面中。

 

步骤二

點選「</>」View HTML 按鈕。

备注：点击「</>」之后，此栏位内容将改以 HTML 语法显示，可参考此连结：文字编辑器查看 HTML。

_____2020-03-31___11.42.03.png

 

贴上图示的语法。

 

SHOPLINE 提供以下社群软体图示的语法，您可以挑选希望放在页尾中的图示，复制语法：

图示

 语法

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 style=........ .png"/>  整段复制下来。
 

步骤三：确认无误后保存

贴上语法后，再次点击「</>」View HTML 按钮来预览图示，确认无误之后，按下「确定」> 「保存」。
mceclip7.png
 

三、加入金/物流图示

如同上方加入社群元件图示的步骤，请先将「A」文字元件拖曳到画面中，并删除预设的文字，接著点击「</>」View HTML 按钮，贴上预先複製好的图示语法。
＊注意：金/物流图示的部分，请依据您商店中已经有的金/物流方式来放置，请勿随意放置您网站未提供的服务。
 
 ＊金物流图示的语法请参考：

图示

 语法

SHOPLINE_Payments_mini.png

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_Brandmark_White_RGB.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_Brandmark_Blue_RGB.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"/>

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

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

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

card_linepay.png

LINE Pay

 
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="/hc/article_attachments/36788595783705"/>

card_tw_711_pay.png

7-11

 
<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://shoplineimg.com/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://img.shoplineapp.com/media/image_clips/62943ef1d23b980015241eff/original.png"/>

payme_white_on_red_bg.pngPayMe

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

 

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://shoplineimg.com/assets/footer/card_fps_en.png"/>

Octopus_Master_Signature_horizontal_cmyk-01.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"/>

zingala_____.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_large_3x.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"/>

 

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

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

步骤一

请先将图片上载 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 按钮，贴上图示语法。
 

五、为文字＆图示加入超连结

使用文字元件设定好内容之后，不论文字或是图示可以直接匡选并在工具列点选「连结」按钮来设定超连结，详细操作步骤请点此了解。

 

 

 
 
 
还有其它问题？提交请求

评论