Customized Shop Footer

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.

• Steps to set up
• Social media icons
• Payment/delivery options
• Replace social media platforms or other icons by yourself
• Add hyperlinks to text & icons

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.

SHOP Builder

SHOPLINE SHOP Builder 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.

In the SHOP Builder, select the Footer button.

The page will display the activation message. Click on Enable new footer builder. 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 the payment/delivery options your shop provide. Please do not keep the function you don't use.

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.

2. Social media icons

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

Step 1

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

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.

Paste the HTML code of the icons.

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

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

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

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

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

<img style="height: 44px; width: auto; display: inline-block;" src="https://img.shoplineapp.com/media/image_clips/65a8a87fff80dc001a195556/original.png"/>

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

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

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

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

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

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

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

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

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

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

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

<img height="30" style="max-height: 30px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/65a8a60c15126216564f6610/original.png"/>

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

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

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

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

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

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

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

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

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

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

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

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

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

<img height="40" style="max-height:40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/63ecb26abbaa99001147ff29/original.png"/>

<img height=“50” style=“max-height:50px; width: auto; display: inline-block; margin-right: 10px;” src=“https://img.shoplineapp.com/media/image_clips/647570a981ada70020572385/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

• Introduction｜SHOP Builder

• Footer Setting | SHOP Builder