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.
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
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.
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"
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:
https://www.youtube.com/watch?v=V7BEzkRBp_g?autoplay=1&rel=0
Add a Vimeo Video
Insert the URL directly from Vimeo video
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
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.
Enter the URL of your Facebook page
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
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
Insert link in the pop up window > Click "OK"
12. Other Settings & Functions
Click the blue "Menu" button > "Page Title" under "Page Settings" > Name your own page title
Click the blue "Menu" button > "SEO Settings" > Enter Title, Description, Keywords and SEO-friendly URL
Click here to learn more about SEO
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!
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.
Comments