Customized Shop Footer

ECSCPOS.png

To allow merchants greater freedom in customizing store design, you can now use the Customized Shop Footer function to add more information at the bottom of your store's page.

1. Steps to set up

Step 1

If you are still using the "former footer editor", you will see a prompt message in [Online Store Design] > [Menu Navigation]. Click Try it to begin using the new footer editor.

*Note: As you finish editing and press send, you cannot recover the former footer. Please re-check carefully before you send it.

SHOPLINE_Admin.jpg

 

[Coming Soon] Page Builder (New)

SHOPLINE is about to launch a brand new Page Builder, which greatly optimizes the design for advanced pages. You can design the announcement board, header & footer, and up to six kinds of widgets to create a unique online store layout.

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.

EN_1.png

 

In the new page editor, select the Footer button.

Screen_Shot_2022-07-04_at_1.19.24_PM.png

 

The page will display the activation message. Click on Enable new footer builder.

Screen_Shot_2022-07-04_at_1.18.31_PM.png

Select Enable to confirm using the new footer editor. Read the following article for more information on Footer Setting.

 

Step 2

On the footer editor page, there will be a default template available, from which you can insert relevant information, terms, and payment & delivery icons. You can delete or customize the widgets according to your need. Read this article for more information on different types of widgets.

*Note: Icon should be chosen according to payment/delivery options your shop provide. Please do not keep the function you don't use. 

_____2018-01-30___11.20.20.png

___2022-05-13___1.37.24.png

 

Step 3

After your edit is finished, click the preview and confirm it. Click Save and your website footer will look exactly like your edit preview.

*Note: Please make sure your preview result is the same as your design, and then save and send it.

Screen_Shot_2022-07-27_at_7.44.45_PM.png

 

2. Social media icons

We provide social media icons that can be placed on your shop footer.

_____2018-01-30___11.39.33.png

 

Step 1

Click on the text element ("A" icon) and drag the element to the screen.

Screen_Shot_2021-09-10_at_4.39.32_PM.png

 

Step 2

Click the "</>" View HTML button.

Note: After clicking </>, the content of this field will change into HTML syntax. Please refer to this link for more details: View HTML from Text Editor.

Screen_Shot_2021-09-10_at_4.40.20_PM.png

 

Paste the HTML code of the icons.

Screen_Shot_2021-09-10_at_4.41.06_PM.png

 

We provide codes for the different icons, and you can use the HTML for the page footer.

Image

HTML

social_facebook.png

 Facebook

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

social_flickr.png

Flickr

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

social_google_plus.png

Google Plus

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

social_instagram.png

 Instagram

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

social_line.png

LINE

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

social_sina_weiboo.png

Sina Weibo

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

social_tencent_weiboo.png

Tencent  Weibo

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

social_twitter.png

Twitter

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

social_wechat.png

WeChat

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

social_whatsapp.png

 WhatsApp 

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

*Tip: When copying the syntax of different icons, please copy the entire syntax from <img style=........ .png"/> separately.


3. Payment/delivery options

Please click text element ("A" icon), enter text editor and click </> function. Post the codes below, click </> again, put the icons we provide, and start to re-edit.

*Note: Icon should be chosen according to payment/delivery options your shop provide. Please do not keep the function you don't use. As you delete it, you can re-post it using the HTML of element tools.

 

Image

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="https://support.shoplineapp.com/hc/article_attachments/360001578646/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://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

Taishin

<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

ECPay

<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-04.png

FPS

<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

Octopus

 <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

Zingala

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

 

4. Replace social media platforms or other icons by yourself

If the style of the social software icons or other icons provided above does not meet your needs, you can also refer to the following steps to replace the images.

Step 1

Please upload the picture to the Image Gallery on SHOPLINE first. (For more information on how to upload and copy image URLs from the Image Library, please refer to the article: Image Gallery)

 

Step 2

From the syntax provided above, change the link of the image to your image link, please change the part in red:

Social media platform icons:

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

Payment/delivery options icons:

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

 

Step 3

Same as the steps for adding social media platform icons and payment/delivery option icons, click the "</>" View HTML button and paste the icon syntax.

 

5. Add hyperlinks to text & icons

After configuring the content using the text element, you can directly select the text or icon and click the "Link" button in the toolbar to set the hyperlink.

For operation step details, please click here.

 

 

Read more

 

 

 

 

Have more questions? Submit a request

Comments