Advanced Page


Advanced Page Editor allows merchants to create a unique customized page by organizing banners, images, videos, and texts by drag-and-drop.


This article will guide you through different actions in Advanced Page:



First, go to "Online Store Design">>"Pages" in admin panel > Click the yellow "Advanced Page" button > Choose a template

 You can start designing your page with a blank page or with one of our templates 


A.  How to Add New Widgets

Choose one of the elements from the left menu > Drag and drop the element to the position you want on the right.


When you drag the element to the page editing area, green colour indicates placing the element is possible. Otherwise, the element would not be placed.


B. Add Text Paragraph

Box with default text will show up


Click the text box to edit. Text editing tools will be provided on the top of the editor.

Text editing tools: Paragraphs, Font Styles, Alignments, Remove Format, Links, Font colours and Font Size 


C. Add Text with Title


 Box with default text will show up

 The text box is divided into two parts: the top one is "Title" while the bottom one is "Description"

Title and description need to be edited individually. Same as edit the text paragraph, click the title or description to edit. When you edit, text editing tools will be provided on the top of the editor.



D. Add Photos


You can add a photo/banner or a slideshow of multiple photos/banners.

Upload the photos you want to display in the left pop-up window and change the display order by dragging. You can also set up links for each photo so when it is clicked, customers can be redirected to the link respectively.



Set as a Full Width image 

For slideshows, you can switch between full-width and normal-width by checking the box "Show full-width image" under "Settings" > "Image Settings" 



E. Add Videos 


Add YouTube Videos 

 Insert the URL directly from YouTube 




Add a Vimeo Video 

Insert the URL directly from Vimeo video 

You may change the setting of the video for autoplay and looping. Video size and ratio could be also modified manually. 

Remarks: There is new autoplay policy for the new version of Google Chrome. Please proceed to chrome://flags/#autoplay-policy for further setting.


F. Add Single Product Display 

Select product you want to show (you can either search by product name or tag) > Click "Save" to add the product 


You can click "Change" button to switch to another product


"Description Alignments Settings" configures the position of product name and price
It is set as "Align to left" by default, you may change alignment to center or right


G. Add Category Display

Select the category you want to display 


You can create and edit the title, description, number of items per page and enable the “Instant Add To Cart” feature under "Settings" > "Category Settings" after clicking the category widget.
The first 24 products of the category will be displayed by default.



By enabling the “Instant Add To Cart” feature, it allows customers easily add products to cart without going to the product page, and the customer can continue browsing on the same page for a better online shopping experience.




H. Add Facebook Widget


Enter the URL of your Facebook page



. Add Map


 Google Map is shown in popped-up window on the left menu bar > Search address > Click "OK" 



Click here to learn other ways of inserting maps to your shop


. Add Instagram Widget


Step 1

Click "Authorize application" button in the pop up menu 



Step 2 

Directs to Instagram login page > Enter your personal credentials



Step 3 

 Click "Authorize" button to proceed



Step 4 

Page is redirected back to SHOPLINE backend
Click "Unlink" button to disconnect the account with your shop



K.  Add QR Code 


Insert link in the pop up window > Click "OK" 


L. Add H1 Tag

Box with default text will show up



Click the text box to edit. Text editing tools will be provided on the top of the editor.




Please be reminded that only one tag is allowed in a page. If there is any need to modify, please do so with the existing one.


. Other Settings & Functions


1. Naming Pages

Click the blue "Menu" button > "Page Title" under "Page Settings" > Name your own page title


2. Setting up SEO Content

Click the blue "Menu" button > "SEO Settings" > Enter Title, Description, Keywords and SEO-friendly URL


Click here to learn more about SEO

Remarks: You do not need to fill in page titles for both languages if you are not doing bilingual content. You can leave the other language fields blank


3.  Preview Function

You can preview your page by clicking the green "Preview" button at the bottom right corner


In page preview, you can check how your page is resized when browsing in different devices
From left to right: Mobile > Tablet > Desktop



Layouts are automatically adjusted as shown below



Don't forget to click "Save" after finish editing!


N. Clone Advanced Page

  • You can clone the advanced page by clicking the "Copy" button in Pages Index.
  • All the widgets would be copied to the new page, including page name, URL, SEO settings, and please remember to update the information in these sections.

*Please be noted that the copy function is only for advanced pages.



Read more






Have more questions? Submit a request