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:

1. How to add new widgets
2. Add text paragraph
3. Add text with title
4. Add photos
5. Add videos
6. Add single product display
7. Add category display
8. Add Facebook widget
9. Add map
10. Add Instagram widget
11. Add QR code
12. Other settings & functions
   12.1 Naming pages
   12.2 Setting up SEO content
   12.3 Preview Function
13. Clone Advanced Page 

First, go to "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



1. How to Add New Widgets

Choose one of the elements from the left hand 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. 



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



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



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



5. Add Videos

Add YouTube Videos 

Insert the URL directly from YouTube 

If you prefer Youtube autoplay, add ?autoplay=1&rel=0 at the end of the embed link

For example:


Add a Vimeo Video

Insert the URL directly from Vimeo video


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




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




8. Add Facebook Widget

Enter the URL of your Facebook page



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



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




11. Add QR Code

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



12. Other Settings & Functions

12.1 Naming Pages

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


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


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

13. Clone Advanced Page

You can clone advanced page by clicking the "Copy" button in Pages Index.
All the widget 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.





Have more questions? Submit a request


Powered by Zendesk